Auto-resize custom horizontal scrollbar/slider?
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>
