Adds a scrollbar to a specific div. The scrollbar is implemented using a Script.aculo.us slider. The class reparents the original div, creates a slider and ties the reparented div to the slider, setting any properties necessary on the divs to make it all work. The scrollbar can be styled using CSS. The track of the scrollbar has class ‘scroll-track’, the thumb has class ‘scroll-handle’.
| myIndex | an integer used to generate a unique ID for use in, for example, div ids. |
| outerBox | the div that holds the scrollpane + scrollbar |
| innerBox | the div that holds the scrollpane |
| innerHeight | the height of the inner box. |
| viewportHeight | the height of the view onto the scrolled div. |
| track | a div that holds the script.aculo.us slider (the scrollbar) |
| trackHeight | the height of the slider |
| handle | the div for the ‘thumb’ of the scrollbar |
| handleHeight | the height of the thumb |
| slider | the script.aculo.us slider itself |
| ieDecreaseBy | a fudge factor used when calculating the width of innerBox |
| Scroller | Adds a scrollbar to a specific div. |
| Properties | |
| Scroller.ids | A cache of Scrollers indexed by the ID of the original div. |
| Scroller.i | A unique ID generator. |
| Functions | |
| initialize | Wrap the passed div in a scrollpane. |
| decorate | create the necessary elements to implement the scrollbar and wire up events. |
| resetScrollbar | Re-calculate the geometry of the scrollbar. |
| setWidth | Set the width of of the scrollpane (aka innerBox). |
| getHeight | Get the height of the passed element. |
| getWidth | Get the width of the passed element. |
| onChange | Called when the script.aculo.us slider has changed (i.e. |
| Scroller. setAll | Search for divs of the class ‘makeScroll’ and wrap them in a Scroller. |
| Scroller. reset | If the passed element has class ‘makeScroll’, wrap it in a Scroller. |
| Properties | |
| Scroller. updateAll | Reset all of the scrollbars. |
initialize: function( el )
Wrap the passed div in a scrollpane.
| el | the div to add a scrollbar to. |
decorate: function()
create the necessary elements to implement the scrollbar and wire up events.
resetScrollbar: function( full )
Re-calculate the geometry of the scrollbar. Typically called from an event handler.
| full | if true, re-calculate the geometry of the scrollpane as well as the scrollbar. |
getHeight: function( el )
Get the height of the passed element.
| el | the element to get the height of. |
getWidth: function( el )
Get the width of the passed element.
| el | the element to get the width of. |
onChange: function( val )
Called when the script.aculo.us slider has changed (i.e. when it has been dragged). Scroll the inner box.
| val | not used. |
Scroller.setAll = function ()
Search for divs of the class ‘makeScroll’ and wrap them in a Scroller.
Wrap the passed div in a scrollpane.
initialize: function( el )
create the necessary elements to implement the scrollbar and wire up events.
decorate: function()
Re-calculate the geometry of the scrollbar.
resetScrollbar: function( full )
Set the width of of the scrollpane (aka innerBox).
setWidth: function()
Get the height of the passed element.
getHeight: function( el )
Get the width of the passed element.
getWidth: function( el )
Called when the script.aculo.us slider has changed (i.e.
onChange: function( val )
Search for divs of the class ‘makeScroll’ and wrap them in a Scroller.
Scroller.setAll = function ()
If the passed element has class ‘makeScroll’, wrap it in a Scroller.
Scroller.reset = function ( body_id )