We create the up and down buttons in absolutely positioned tables. We use TABLEs because table cells automatically size themselves to their contents providing a very accurate width and height. DIV elements on the otherhand default in Internet Explorer to 100% wide and 100% tall if no size is specified.
To make it easy to change the style and appearance we used a global style sheet to define
Netscape incorrectly interprets the CSS background property. When applied to a positioned table, it only sets the background on the individual contents. Netscape has added their own extension, layer-background-color, that works the way background is intended. Therefore you should set the layer-background-color and the background attributes to get the same results in Netscape and Explorer. The border attribute on the table element is only interpreted by Internet Explorer. We included it to illustrate that you should always test any use of CSS.
Inside of the table, we create the up and down buttons as standard anchors. We chose to override the default appearance of the anchor. This shows how you can easily customize the contents of the scrollers without effecting any of the other elements on your page.
Below is the HTML to define the scroller buttons:
The movePage() function is called whenever the scroller links are pressed. This function
automatically scrolls the document one screen at a time:
In this article we showed a cross-browser way to track scrolling. You can easily change the functionality of the above buttons by changing the movePage() function or the appearance of the buttons by modifying the table's contents.
On the last page we provide the complete source code necessary to create this example.
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.