Inside Technique : Scroll Tricks II : Define the Buttons

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 a scrollers class.

<STYLE>
.scrollers {position: absolute; 
            visibility: hidden; 
            background: lightgrey; 
            layer-background-color: lightgrey; 
            border: 1px black solid}
.scrollers A {text-decoration: none; 
              color: darkred}
</STYLE>

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:

<TABLE ID="prevPage" CLASS="scrollers">
  <TR><TD>
    <A HREF="#" ONCLICK="movePage(true); return false">Up</A>
  </TD></TR>
</TABLE>
<TABLE ID="nextPage" CLASS="scrollers">
  <TR><TD>
    <A HREF="#" ONCLICK="movePage(false); return false">Down</A>
  </TD></TR>
</TABLE>

The movePage() function is called whenever the scroller links are pressed. This function automatically scrolls the document one screen at a time:

  function movePage(dir) {
    var clientHeight
    if (ie4) 
      clientHeight = document.body.clientHeight
    else
      clientHeight = window.innerHeight
    window.scrollBy(0,clientHeight * (dir ? -1 : 1))    
  }

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.