I have created a slider resembling volume controls for players using jQuery. However, I am facing an issue ONLY IN FIREFOX. When I drag the slider for the second time, the browser itself drags the div as if dragging images. The problem disappears if I click on an empty area after the first drag and then try dragging the slider again. What could be causing this issue?
EDIT :
http://codepen.io/anon/pen/bjChB
HTML:
<div id="btn_container">
<div id="button"></div>
</div>
CSS:
div#btn_container{
width:200px;
height:60px;
position:absolute;
background:red;
margin:auto;
right:0;left:0;top:0;bottom:0;
}
div#button{
width:60px;
height:60px;
background:blue;
position:absolute;
left:0px;top:0px;
}
jQuery:
$(document).ready(function() {
var pressed = false;
var $this;
var x;
$("div#button").mousedown(function(e){
pressed = true;
$this = $(this);
var offset = $this.offset();
var inside = e.pageX - offset.left;
$(document).mousemove(function(e){
if(pressed){
var parentOffset = $this.parent().offset();
x = e.pageX - parentOffset.left;
if( x <= $this.parent().width() - $this.width() + inside && x >= 0 + inside)
$this.css({"left":x - inside});
}
});
});
$(document).mouseup(function(){
if(pressed){
if( x > $this.parent().width() - $this.width() - 30)
$this.animate({"left":$this.parent().width() - $this.width()} , 50);
pressed = false;
}
});
});