jquery slider does not work with jquery-1.6!

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开发者_StackOverflow社区 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.

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.

jQuery is now properly distinguishing between attributes and properties with its new .prop() method.

In the on_scrollslide function, change scroll_frame.attr({ to scroll_frame.prop({:

function on_scrollslide(event, ui)
{
    //var scroll_maximum = scroll_frame.attr("scrollWidth") - scroll_frame.width();
    var scroll_maximum = scroll_content.width() - scroll_frame.width();

      // change---vv
    scroll_frame.prop({scrollLeft: ui.value * (scroll_maximum / 100) });
}

I think you should ignore version 1.6 and directly go to 1.6.1. Per the jQuery blog:

When updating from 1.5.2 to 1.6.1, you should not have to change any attribute code.

Source: http://blog.jquery.com/