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.

Answer 1

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.