Question

Trying to re-write this to be compatible with the jquery v1.7.1 It currently works with version 1.5

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script type="text/javascript">             
$(document).ready(function(){
   $("#content-slipslide").slider({
       animate: true,
       change: handleSliderChange,
       slide: handleSliderSlide
    });
});
function handleSliderChange(e, ui) {
   var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
   $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}
function handleSliderSlide(e, ui) {
   var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
   $("#content-scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}
</script>

Answer 1

jQuery 1.6 (revised slightly in 1.6.1) introduced separate handling for properties over attributes (previously, both had been handled by the attr() method). This was convenient, but let to the idea that attributes and were properties were one and the same thing, which is untrue.

Since scroll properties are precisely that – properties – and so should be accessed via the prop() method.

The question doesn’t warrant an explanation of the differences between properties and attributes are, but I am happy to edit the answer to provide some details if asked.