Question

I’m having some problems with the jQuery UI slider widget. I can get the slider itself to work, but it will not slide through any content. You can see the site i’m working on here:
jquery slider problem

I want the div with the cyan-bordered boxes to be slided through as you slide with the handler, but I simply can’t get it to work. This is the mark I’m using at the moment:

<div id="content-scroll" class="reference-scroller">
<div id="content-holder" class="reference-content">
  <div id="content-slider"></div>
  <ul>
    <li class="content-item">test1</li>
    <li class="content-item">test2</li>
    <li class="content-item">test3</li>
    <li class="content-item">test4</li>
    <li class="content-item">test5</li>
     .....
  </ul>
</div>
</div>

And the slider plugin is started up like this:

$("#content-slider").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) });
}

Has anyone got a suggestion for this? 🙂 Any input is greatly appreciated!

All the best,

Bo

Answer 1

Finally found the flaw! 🙂

jQuery 1.6.1 distinguishes between attr() and prop(), so I changed:

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) });
}

To:

function handleSliderChange(e, ui)
{
    var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
    $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
    var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
    $("#content-scroll").prop({scrollLeft: ui.value * (maxScroll / 100) });
}

And now it works just as it should!