SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Scroll Tricks II : Source Code

<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>

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

  // 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
  if (ns4 || ie4 || ie4Mac ) {
    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) {
      // 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()
      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)
    }
  }

  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"
  }

// -->
</SCRIPT>
Discuss and Rate this Article