Question

I am assigning new arrows to my jscrollpane with the below code. This works fine in all browswers, but its buggy in ie7/8. An example of the bug can be found on http://jsfiddle.net/WzNM4/6/ .

If you click the down button, leave it running for 2secs then click the up button, the text starts jumping up and down. Do you know what is causing this and how to resolve perhaps?

I know my attached code is not the same as in the jsFiddle, but the jsFiddle was done by Vitch and I didn’t feel the need to redo it, as the bug occurs on his version as well.

This only happens in ie7/8…

Thank you in advance.

    $(function () {

        var api = $('.ThmbsCntnr').jScrollPane().data('jsp');


        $('.FinalArrowLeft').bind('mousedown', function () {
                var interval = setInterval(
                    function () {
                        api.scrollByX(-40);
                    },
                    100
                );
                $(window).bind(
                    'mouseup.jspExample',
                    function () {
                        clearInterval(interval);
                        $(document).unbind('.jspExample');
                    }
                );
       });

       $('.FinalArrowRight').bind('mousedown', function () {
                var interval = setInterval(
                    function () {
                        api.scrollByX(40);
                    },
                    100
                );
                $(window).bind(
                    'mouseup.jspExample',
                    function () {
                        clearInterval(interval);
                        $(document).unbind('.jspExample');
                    }
                );
       });




    });

Answer 1

What’s happening is that the mouseup event is never triggered.

It doesn’t work to bind the mouseup event on window in IE7 and IE8. Bind it on document instead.

Demo: http://jsfiddle.net/Guffa/WzNM4/44/