Bug with jQuery 1.1.2, Interface 1.2, Slider with fractions
I have a Slider with fractions and an onSlide handler. Sometimes when the handler is invoked, the reported value for xProc seems to be "lagging" -- it seems to be the value from just before the slider jumped to its current position.
Here's a fragment demonstrating the problem:
<div id="slider_frame">
<div id="bar">
<div id="indicator" class="Indicator"></div>
</div>
</div>
<p id="msg"></p>
...
onSlide: function(xProc, yProc, x, y) {
var fraction = x / this.dragCfg.containerMaxx;
var nearest = Math.round(x / 4) * 4;
var expected = Math.round(nearest * 100 / this.dragCfg.containerMaxx);
$("#msg").html("Expected " + expected + ", got " + xProc);
In the web app where I've encountered this problem, I'm working around it by recomputing the xProc value inside the onSlide handler:
xProc = parseInt(x * 100 / this.dragCfg.containerMaxx);
Here's a more complete example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>interactive_problem_demo</title>
<style type="text/css" media="screen">
#slider_frame {
border: 1px inset;
position: relative;
width: 300px;
height: 12px;
}
#bar {
position: absolute;
width: 300px;
height: 12px;
background-color: #99a;
}
#indicator {
position: absolute;
width: 6px;
height: 12px;
background-color: #eef;
}
#msg {
max-width: 300px;
}
.Good {
background-color: #0f0;
}
.Bad {
background-color: #f99;
}
</style>
</head>
<body>
<div id="slider_frame">
<div id="bar">
<div id="indicator" class="Indicator"></div>
</div>
</div>
<p id="msg" class="Good">Please click in the trough.</p>
<script src="../../../shared/js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../shared/js/jquery/interface.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../shared/js/jquery/dimensions.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
<!--
$(document).ready(function() {
var f = 5;
var slider = $("#bar").Slider({
accept: "#indicator",
fractions: f,
onSlide: function(xProc, yProc, x, y) {
var fraction = x / this.dragCfg.containerMaxx;
var expected = Math.round(100 * fraction / (f - 1)) * (f - 1);
$("#msg").html("Expected " + expected + ", got " + xProc);
$("#msg").removeClass("Good Bad");
$("#msg").addClass(xProc == expected ? "Good" : "Bad");
}
})
});
//-->
</script>
</body>
</html>
No comments:
Post a Comment