Inside Technique : Scroll Tricks II : Tour the Code

We are now going to walk you through the different sections of the scroller scripts. At the end of this article is the complete code listing. The scroller script is written to try and minimize browser checks when performing calculations. To do this we take advantage of the way JavaScript allows us to add custom properties to any element. Whenever possible, we add a property to Netscape or Internet Explorer (depending on which one is more convenient to access) that matches the property exposed by the other browser. The comments in the initialization code below show how we did this:

  // Use object detection to determine browser
  var ie4 = (document.all!=null)
  var ie4Mac = ie4 && navigator.platform.indexOf("Mac")>=0
  var ns4 = (document.layers!=null)
  // Store a reference to the positioned DIV's
  // We use this reference throughout the code so we no longer
  // have to go through the different browser's collections
  // Store a reference to the positioned DIV's
  // We use this reference throughout the code so we no longer
  // have to go through the different browser's collections
  if (ns4 || ie4) {
    var prevScroll = (ie4) ? document.all.prevPage : document.layers.prevPage
    var nextScroll = (ie4) ? document.all.nextPage : document.layers.nextPage
    var makeVisible = "" // used to store the value of visibility to display an element

    // Initialize objects
    // This adds the appropriate objects and properties to each object model.
    if (ie4 || ie4Mac) {
      // We can use the real events in Internet Explorer. This is
      // more efficient than the Netscape timer solution below.
      window.onresize = window.onscroll = positionScrollers;
      makeVisible = "visible"
      positionScrollers()
      // Mac doesn't fire onscroll event correctly
      // Simulate with timer
      if (ie4Mac)
        setInterval("positionScrollers()",50)
    }
    else {
      // Create a simulated style object in Netscape.
      // This is only used as a placeholder and is explained in more
      // detail later
      prevScroll.style = new Object; nextScroll.style = new Object
      // Copy the width and height properties to offset* properties
      prevScroll.offsetWidth = prevScroll.clip.width
      nextScroll.offsetWidth = nextScroll.clip.width
      prevScroll.offsetHeight = prevScroll.clip.height
      nextScroll.offsetHeight = nextScroll.clip.height
      makeVisible = "show"
      // Use a timer. This is required to work around Netscape's lack
      // of an onscroll event.
      setInterval("positionScrollers()",50)
    }
  }

Once intialized, we need to write the positionScrollers() function. In Internet Explorer, this function is only called when the page is actually scrolled or resized. In Netscape, we handle page resizing and scrolling by checking the size and position on a timer. Netscape does support an onresize event which we chose not to use. This was simply because the code to handle scrolling already works with resizing and to try and be smarter and distinguish between scrolling and resizing would have made our code more complicated.

  function positionScrollers() {
    // Initialize Properties
    var clientHeight = clientWidth = docHeight = docWidth = 0
    // Initialize browser differences
    if (ie4) {
      clientHeight = document.body.clientHeight
      clientWidth = document.body.clientWidth
      docTop = document.body.scrollTop
      docLeft = document.body.scrollLeft
      document.height = ie4Mac ? document.body.offsetHeight : document.body.scrollHeight
    } else
    {
      // Fudge for the scrollbars
      clientHeight = window.innerHeight -20
      clientWidth = window.innerWidth - 20
      docTop = window.pageYOffset      
      docLeft = window.pageXOffset
    }

    // Do the real work
    // Notice that we are assigning the new position to both Netscape's and Explorer's
    // version of the properties and no extra browser detection is needed.
    if (docTop!=0) {
      prevScroll.top = prevScroll.style.pixelTop = docTop
      prevScroll.left = prevScroll.style.pixelLeft = clientWidth - prevScroll.offsetWidth + docLeft
      prevScroll.visibility = prevScroll.style.visibility = makeVisible
    } else  // At top, hide up button
      prevScroll.visibility = prevScroll.style.visibility = "hidden"
    if (docTop + clientHeight < document.height) {
      nextScroll.top = nextScroll.style.pixelTop = docTop + clientHeight - nextScroll.offsetHeight 
      nextScroll.left = nextScroll.style.pixelLeft = clientWidth - nextScroll.offsetWidth + docLeft
      nextScroll.visibility = nextScroll.style.visibility = makeVisible
    } else  // At bottom, hide down button
      nextScroll.visibility = nextScroll.style.visibility = "hidden"
  }

The next is to create the up and down buttons. These buttons are standard HTML and can be easily customized.

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