Auto re-size slider scrollbar range based on viewport's width

[Keane]

I'm using slider as a scrollbar for a horizontal layout. It works
fine, but when I re-size the browser, the scrollbar's range will not
resize based on the browser's viewport width. The scrollbar extends to
the rigth and the default horizontal scrollbar shows up.

Here's the page where you can check it
http://keanetix.co.cc/scrollpage/page.htm

The slider.js and prototype.js files can be found in the same
directory:
http://keanetix.co.cc/scrollpage/

How do I make the slider/scrollbar resize it's scrollable range
automatically once the browser has been resized?

Thanks,
Keane

[anony]

did you get a reply?

[Victor]

I use custom resizing events (tested in IE6-8, Opera 10, FF 3.6):

/**
 * Window resizing events: resize:start, resize:continued, resize:end.
 *
 * Event resize:continued will fire with interval >= delayRC milliseconds and
 * only if window size is actually changed (e.g. no repeated events with same window size).
 *
 * Event resize:end will fire if window dimensions stay unchanged for delayRE milliseconds.
 *
 * Each event will supply actual window dimensions as additional parameter.
 */
(function() {
  var timerRC = null, timerRE = null, delayRC = 200, delayRE = 500, dimensions = {};
   
  function fireResizeContinued() {
    var dims = document.viewport.getDimensions();
    if (dims.width !== dimensions.width || dims.height !== dimensions.height) {
      dimensions = dims;
      document.fire("resize:continued", dimensions);
    }
    timerRC = setTimeout(fireResizeContinued, delayRC);
  }

  function fireResizeEnd() {
    clearTimeout(timerRC);
    timerRC = null;
    timerRE = null;
    document.viewport.isResizing = false;
    document.fire("resize:end", document.viewport.getDimensions());
  }

  function resizeListener() {
    //console.log("resizeListener - isResizing", document.viewport.isResizing);
    if (!document.viewport.isResizing) {
      dimensions = document.viewport.getDimensions();
      document.viewport.isResizing = true;
      document.fire("resize:start", dimensions);
      timerRC = setTimeout(fireResizeContinued, delayRC);
    }
    if (timerRE) {
      //console.log("clearTimeout(timerRE)");
      clearTimeout(timerRE);
    }
    timerRE = setTimeout(fireResizeEnd, delayRE);
  }

  Event.observe((document.onresize ? document : window), "resize", resizeListener);
})();


You can listen to resize:continued and resize:end and change your size accordingly to dimensions received in event's memo field.