Question

This slider code works fine with older version of jquery, such as jquery-1.5. But it does not work properly when I tried to intergrate it with the latest version of jquery – jquery-1.6.

You can try it here – the content does not scroll when you along the slider. The content should be scrolled along the slider when you drag and move it forward and backward.

Here is some of the code,

function init_scrollbar ()
{
    //scrollpane parts
    scroll_frame = $('#scroll-frame'); // scroll-frame
    scroll_content = $('#scroll-content'); // scroll-content
    scroll_location_pixel = 0;
    original_location_scroll_handle = 0;
    original_width_scroll_content = scroll_content.width();

    scrollbar = $('#content-slider').slider({
        min: 0,
        animate: true,
        create: on_scrollcreate,
        change: on_scrollchange,
        slide: on_scrollslide
    });
}

I think it is the event slide does not work, here it is the code,

function on_scrollslide(event, ui)
{
    var scroll_maximum = scroll_content.width() - scroll_frame.width();
    scroll_frame.attr({scrollLeft: ui.value * (scroll_maximum / 100) });
}

Any idea what have I done wrong? can you tell me how to fix it?

Thanks.

Answer 1

For jQuery 1.6:

As of jQuery 1.6, the .attr() method
returns undefined for attributes that
have not been set. In addition,
.attr() should not be used on plain
objects, arrays, the window, or the
document. To retrieve and change DOM
properties, use the .prop() method.

Here is a working fiddle.