Auto-resize custom horizontal scrollbar/slider?

Question

I'm working on a site that scrolls horizontally. I know very little about jQuery and prototype and I got this slider script working as the page scrollbar. When the window is resized smaller, the custom horizontal slider/scrollbar won't resize to the viewport's width.

I have the page and js files here http://keanetix.co.cc/scrollpage/

Try to resize the browser and you'll notice the custom scrollbar extending to the right. The custom scrollbar wont fit on the viewport, unless you refresh the page when it's been resized.

Can somebody help me with this? Thanks.

This is the code in the HTML page:

     <script type="text/javascript" language="javascript">
 // <![CDATA[

  // horizontal slider control
  var slider2 = new Control.Slider('handle', 'track', {
   onSlide: function(v) { scrollHorizontal(v, $('scrollable'), slider2);  },
   onChange: function(v) { scrollHorizontal(v, $('scrollable'), slider2); }
  });



  // scroll the element horizontally based on its width and the slider maximum value
  function scrollHorizontal(value, element, slider) {
   element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
  }

  // disable horizontal scrolling if text doesn't overflow the div
  if ($('scrollable').scrollWidth <= $('scrollable').offsetWidth) {
   slider2.setDisabled();
   $('track').hide();
  }

 // ]]>
 </script>

Answer 1

EDIT: It seems that what's needed is a recalculation of the page size. And it looks like it needs to be done with the prototype slider. I haven't used it myself, so I can't really tell you what to do in this case. There might be a method in the plug-in that does it for you...

---

I couldn't open your page, maybe overload from SO users? :p

But it sounds like you'll need to resize the element that holds your custom scrollbar whenever the window is resized:

window.onresize = resizePage;

Then write your resizePage function to calculate the new size and change accordingly.

As a side note, you might want to throttle your resize function, so you won't get too many calls.

function throttle(method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function () {
        method.call(context);
    }, 50);
}

Then use this as following:

window.onresize = function () {
    throttle(resizeFrame);
};

This means you'll wait until the user is "finished" resizing the browser window before you call your resize function.