|
EXAMPLE
Examples of additional functions:
Add extra line
- go to the last window to see new added line
Initialize -
updates the windows list
Delete line 2 -
removes defined line, and the successive there after
Reset - permanently closes the window, reload page to open it
again
1) Download
this ZIP file with the listbox.js script file and unzip into
the desired directory.
2) Insert these scripts in the <HEAD> section of the
page.
3) Insert the following HTML code in the <BODY> section of the
page where you want the arrows to appear.
4) Customize the style, positioning, number of lines to display for each
sliding window and other variables in this section of the
script:
// background colors, left and top position, window width, row height, nr.
of display lines, cell padding, text alignment, direction of sliding
windows
myWindow = new ListBox("listTest","#E5E5E5","#FFFFFF",115,285,220,15,10,3,"middle","center","left","left");
// the style for the links
myWindow.setFont("Verdana","10px","336699","none","FF9900","underline");
{
// total number of links to display (from 1 to 50 in this example)
for (i = 1; i < 51; i++) {
// description, links base name, extension, target
myWindow.addLine("DHTML script "+i,"http://simplythebest.net/scripts/dhtmscript"+i+".html","_top");
If you want to add the links manually, replace the last two lines of code
above with:
// description, URL, target
myWindow.addLine("SimplytheBest Fonts","http://simplythebest.net/fonts/","_top");
myWindow.addLine("SimplytheBest CGI scripts","cgi_scripts/cgi_scripts.html","_blank");
myWindow.addLine("SimplytheBest DHTML scripts","scripts/dhtml_scripts.html","_blank");
and so forth
5) Adjust the speed of the sliding windows in this section of the
listbox.js script file:
this.row.position = 0;
this.speed = 50;
this.increment = 20;
6) Define the path to the script file in the script tag in the <HEAD>
section:
<script language="JavaScript1.2" src="dhtml_scripts/listbox.js"></script>
|
