Custom Scroll Bars

Custom Scroll Bars (11-08-2005)
by Vic Phillips http://www.vicsjavascripts.org.uk

Applies Custom Scroll Bars to a Message Scroll Panel.
Horizontal, Vertical or both may be applied.
The Scroll Bars may be in or external to the Message Scroll Panel.

There may be as many applications as required on a page.

The Message Scroll Panel and content may be defined in the pages HTML code
or if the Message Scroll Panel is an <IFRAME> the content may be a HTML file.
The Custom Scroll Bars are defined in the pages HTML code
and the appearance may be customised by applying CSS style.

Application Notes

When the Message Scroll Panel and Content defined in the page HTML code

The Message Scroll Panel is defined in the HTML code
e.g.
<div id="databox2" style="position:absolute;overflow:hidden;left:100px;top:360px;width:200px;height:100px;border:solid black 1px;" >
<div style="position:absolute;left:0px;top:0px;width:200px;text-Align:center;" >
<br>
The quick bown Fox<br>
.........
The quick bown Fox<br>
The quick bown Fox<br>
<br>
<br>
</div>
</div>

The Message Panel is a <DIV> with a unique ID
The position style of this <DIV> can be 'absolute' or 'relative',
the overflow must be 'hidden'

A <DIV> containing the message HTML is nested in the Message Panel <DIV>
The position style of this <DIV> must be 'absolute',
top and left positions will be retained when scrolling,
the width is optional, the height must NOT be set.

Where the Message Scroll Panel is an <IFRAME> and the Content an HTML file.

The Message Scroll Panel <IFRAME>
e.g.
<iframe name="fred" id="fred" src="F1F1.htm"
onload="csbCustomXScroll(this.name,'scrollboxFX');csbCustomYScroll(this.name,'scrollboxFY');"
width="200" height="200" marginwidth="0" marginheight="0" scrolling="no"
style="position:absolute;left:410px;top:310px;" ></iframe>

The <IFRAME> must have a unique NAME and ID name

The <IFRAME> src contains the Content
e.g.
<html>
<head>
</head>
<body >
<div style="position:absolute;left:0pt;top:10px;width:200px;text-Align:center;" >
MouseOver=stop<br>
MouseOut=start<br>
.........
More data<br>
More data<br>
<br>
<br>
</div>
</body>
</html>

Each Custom Scroll Bar is defined in the HTML code
e.g.
<div id="scrollbox2" style="position:absolute;overflow:hidden;left:50px;height:100px;top:350px;width:20px;" >
<div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:10px;background-Color:green;border:solid black 1px;" >
</div>
</div>

The Custom Scroll Bar is a <DIV> with a unique ID
The position style of this <DIV> can be 'absolute' or 'relative',
the overflow must be 'hidden',
the width and hight are set according to its application as a Vertical or Horizontal bar.

The first nested <DIV> is the 'Slider'
The position style of this <DIV> must be 'absolute'.

If 'Up' and 'Down' controlls are required two more <DIV>s must be added
e.g.
<div id="scrollbox2" style="position:absolute;overflow:hidden;left:50px;height:100px;top:350px;width:20px;" >
<div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:10px;background-Color:green;border:solid black 1px;" >
<div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:20px;background-Color:yellow;border:solid black 1px;" >
<div style="position:absolute;overflow:hidden;left:0px;top:0px;width:20px;height:20px;background-Color:yellow;border:solid black 1px;" >
</div>
</div>

The examples above use inline style definitions,
the use of 'Style Classes' is recommended in the actual application.

Initialising the Script

When the Message Scroll Panel and Content defined in the page HTML code

The Message Scroll Panels and Custom Scroll Bars
are initialised from a <BODY> onload event
e.g.
<body onload="csbCustomYScroll('*MessPanelID*','*ScrollBarID*');csbCustomXScroll('*MessPanelID*','*ScrollBarID*');">
where:
csbCustomYScroll(.. = intitalises the Vertical(Y) Scroll Bars.
csbCustomXScroll(.. = intitalises the Horizontal(X) Scroll Bars.
*MessPanelID* = the unique ID name of the Message Panel (string)
*ScrollBarID* = the unique ID name of the Custom Scroll Bar (string)

If there is more than one application on the page
simply repeat the Scroll Panels and Custom Scroll Bars pairs
e.g. csbCustomYScroll('*MessPanelID-1*','*ScrollBarID-1*','*MessPanelID-2*','*ScrollBarID-2*');

Where the Message Scroll Panel is an <IFRAME> and the Content an HTML file.

The script is initialised by an <IFRAME> onload event
e.g.
<iframe name="fred" id="fred" src="F1F1.htm"
onload="csbCustomXScroll(this.name,'scrollboxFX');csbCustomYScroll(this.name,'scrollboxFY');"
width="200" height="200" marginwidth="0" marginheight="0" scrolling="no"
style="position:absolute;left:410px;top:310px;" ></iframe>

General

All variable, function etc. names are prefixed with 'csb' to minimise coflicts with other JavaScripts

The Script(5.5k less notes) is best as an external JavaScript.

Tested with IE6 and Mozilla FireFox