Bug with jQuery 1.1.2, Interface 1.2, Slider with fractions

Mitch Chapman

2007-06-20 18:16

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>