 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© 1997-2000 InsideDHTML.com, LLC. All rights reserved. |