Inside Technique : Scrolling Viewports : Cross-browser Scrollers

To write the cross-browser script for scrolling the viewport, we use our DHTMLLib scripting library. This allows us to write the script without doing any browser detection.

In the demonstration at the end of the page , clicking on the U and D links scrolls the contents with the navy background. The scrolling continues until you release the mouse. These U and D links can be modified and changed to custom images and they can be positioned anywhere in your document. This provides you with complete flexibility in designing your user-interface. To demonstrate, we also include two extra links which can scroll the region in bigger chunks.

Below is the complete script we used to create the scrolling region:

<SCRIPT SRC="/dhtmllib/dhtmllib2.js">
  // Include DHTMLLib
</SCRIPT>

<SCRIPT>
var sRepeat=null
function doScroller(dir, src, amount) {
	// 3 arguments, dir: scroll "up" or "down", 
	// src is the string id of positioned element
	// amount (optional) is number of pixels to scroll 
	if (window.document.readyState=="loading") alert("Please wait until the page is finished loading.")
	if (amount==null) amount=10
	if (dir=="down") {
		document.all[src].style.pixelTop-=amount
		if (-document.all[src].style.pixelTop>=document.all[src].offsetHeight-document.all[src].offsetParent.offsetHeight)
			document.all[src].style.pixelTop=-document.all[src].offsetHeight+document.all[src].offsetParent.offsetHeight			
	}
	else {
		document.all[src].style.pixelTop+=amount
		if (document.all[src].style.pixelTop>0)
			document.all[src].style.pixelTop = 0
	}
	if (sRepeat==null)
		sRepeat = setInterval("doScroller('" + dir + "','" + src + "'," + amount + ")",100)
	return false
}

window.document.onmouseup = new Function("clearInterval(sRepeat);sRepeat=null")
window.document.ondragstart = new Function("return false")
</SCRIPT>

<P>
  <A ONCLICK="return false" 
     ONMOUSEDOWN="return doScroller('down','s1',40)" 
     ONMOUSEOUT="clearInterval(sRepeat)" HREF="#">
    Down
  </A> | 
  <A ONCLICK="return false" 
     ONMOUSEDOWN="return doScroller('up','s1',40)" 
     ONMOUSEOUT="clearInterval(sRepeat)" HREF="#">
    Up
  </A>
<DIV STYLE="position: absolute; width: 300; height: 100; 
            clip: rect(0 300 100 0)">
<STYLE>
.scroller {left:280;width:20;text-align:center;position:absolute;}
.scroller A {text-decoration: none;}
#s1 {font:10pt geneva, arial, sans-serif;background:navy;color:white;layer-background-color:navy;}
</STYLE>

<DIV CLASS=scroller>
  <A ONMOUSEDOWN="return doScroller('up','s1')" 
     ONMOUSEOUT="clearInterval(sRepeat)"  
     HREF="#">
    U
</A>
</DIV>
<DIV class=scroller STYLE="top: 80">
  <A ONMOUSEDOWN="return doScroller('down','s1')" 
     ONMOUSEOUT="clearInterval(sRepeat)" 
     HREF="#">
    D
  </A>
</DIV>
<DIV ID="s1" STYLE="position: absolute;width: 280">
  Contents
</DIV>
</DIV>

In the above script and HTML notice that we included the style information for the scrolling viewport within the viewport's DIV. We did this on purpose because we found that Netscape applies styles more consistently to contents within a positioned element when they are scoped within the positioned element. It is important to note that this violates HTML 4.0 in that HTML defines that the style element should be in the head of the document. Also, for STYLE elements defined within the document, Internet Explorer will associate the style with the entire document while Netscape Navigator only applies the style to elements that follow the style definition. To avoid these differences from surfacing you should always ensure styles defined within the document should only apply to the contents that follow them.

You have now seen three methods for adding a scrolling viewport to your document. The last technique works cross-browser and uses our DHTMLLib to handle the dynamic html differences between the browsers.

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