Inside Technique : Auto-Scrolling Viewports : The HTML

Creating an auto-scrolling viewport is easy. First, we show you how to create the viewport and the container for the contents:

<DIV STYLE="position: absolute; 
               width: 300; height: 300; 
               clip: rect(0 300 300 0);
               overflow: hidden;
               background: navy; 
               layer-background-color: navy">


<DIV ID="s1" STYLE="position: absolute;width: 500">
<P>Contents
</DIV>
</DIV>

In the HTML above, all italicized text is customizable. The width and height of the outer DIV represent the size of the viewport. You must specify the size in the width and height as well as in the clip value. The clip RECT values are in the order: top, width, height, left, so make sure to replace the width and height with the same values as the real width and height.

The layer-background-color is Netscape's equivalent to Internet Explorer's background property. To get the same results on both browsers, set these two properties to the same color.

The style block inside of the DIV is the most reliable technique we found for Netscape Navigator to set properties inside of positioned elements. You can also try putting the style sheet in the head of the document, but when you do this you may find that Netscape fails to supply the styles. You also should be aware that we have had significant problems with Netscape Navigator when trying to use positioned elements inside of a TABLE. Therefore, for best results, make sure the outer DIV containing the scrolling contents is not included within any tables on your page and include the style for the scrolling area inside of the outer DIV.

Last, the inner DIV represents the contents to scroll. You can set a width on this DIV if you want the contents to be wider than the outer window. This is only appropriate if you are scrolling left or right. The height does not need to be specified as it is automatically determined by the size of the contents.

At this point, you have seen the HTML to create the scrolling DIV. Next, we take you through the auto-scrolling viewport script.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.