JQuery Slider Stopped Working After Upgrade To JQuery 1.7.1

Question

Prior to upgrading to JQuery 1.7.1, both vertical and horizontal slider were working fine. Now that I have upgraded to 1.7.1, everything stops working. Below are my codes.

$("#HorizontalScrollBar").slider({
    change: HorizontalHandleChange,
    slide: HorizontalHandleSlide,
    min: 0,
    max: 100
});

$("#VerticalScrollBar").slider({    
    orientation: "vertical",
    change: VerticalHandleChange,
    slide: VerticalHandleSlide,
    min: -100,
    max: 0
});

The codes for horizontal slider handles

function HorizontalHandleChange(e, ui) {
    var maxScroll = $(".HorizontalScroll").attr("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").animate({ 
        scrollLeft: +ui.value * (maxScroll / 100)
    }, 100);    
}

function HorizontalHandleSlide(e, ui) {
    var maxScroll = $(".HorizontalScroll").attr("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").attr({ 
        scrollLeft: +ui.value * (maxScroll / 100)   
    });
}

and vertical slider handles

function VerticalHandleChange(e, ui) {
    var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").animate({ 
        scrollTop: -ui.value * (maxScroll / 100)
    }, 100);
}

function VerticalHandleSlide(e, ui) {
    var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").attr({ 
        scrollTop: -ui.value * (maxScroll / 100)   
    });
}

Anyway, I hope someone can find a solution for me to get my sliders working with JQuery 1.7.1. Thanks.

FYI, the sliders are used on 4 DIVs, ie. Top, MidLeft, MidRight & Bottom, where the vertical slider works on MidLeft & MidRight while the horizontal slider works on MidRight, Top and Bottom though I don't think this might be the cause of the problem.

From what version did you upgrade? Do you get error messages in the console? — JJJ, Jan 11 '12 at 17:56
From JQuery 1.5.1 and there is no error in the console at all. It just stop working. Both sliders do appear and mousewheel seems to work but the contents in the DIVs do not move/change at all. — asyadiqin, Jan 11 '12 at 18:16

score 2 · Accepted Answer · answered Jan 11 '12 at 18:27

scrollWidth and scrollHeight are properties, use the .prop method to get and set them.

function HorizontalHandleChange(e, ui) {
    var maxScroll = $(".HorizontalScroll").prop("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").animate({
        scrollLeft: +ui.value * (maxScroll / 100)
    }, 100);
}

function HorizontalHandleSlide(e, ui) {
    var maxScroll = $(".HorizontalScroll").prop("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").attr({
        scrollLeft: +ui.value * (maxScroll / 100)
    });
}

function VerticalHandleChange(e, ui) {
    var maxScroll = $(".VerticalScroll").prop("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").animate({
        scrollTop: -ui.value * (maxScroll / 100)
    }, 100);
}

function VerticalHandleSlide(e, ui) {
    var maxScroll = $(".VerticalScroll").prop("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").attr({
        scrollTop: -ui.value * (maxScroll / 100)
    });
}

This change came from jQuery 1.6 where .attr was split into two methods, .attr and .prop where .attr works on attributes and .prop works on properties.

JQuery Slider Stopped Working After Upgrade To JQuery 1.7.1

1 Answers1