PHP Classes

File: scrollbar2.js

Recommend this page to a friend!
  Classes of Marius   dbFile   scrollbar2.js   Download  
File: scrollbar2.js
Role: Auxiliary data
Content type: text/plain
Description: scrollbar2.js
Class: dbFile
file based web database and Administrator
Author: By
Last change:
Date: 20 years ago
Size: 16,136 bytes
 

Contents

Class file image Download
// ------------------------------------------------ // Custom DHTML scrollbar // ------------------------------------------------ // (c) 2000 Peter Nederlof // http://www.xs4all.nl/~peterned/ // Last updated: January 26, 2001 // ------------------------------------------------ // Values below are defaults. overwrite in HTML var barWidth = 23; var barHeight = 230; var barXstart = 170; var barXfromRight = false; var barYstart = 0; var scrollerHeight = 15; var layerToScroll = "divContent"; var arrowSpeed = 3; var clickStepSize = 40; var extraSpace = 5; var scrollerBG = "images/scroll_balk2.gif"; var upSRC = "images/up2.gif"; var downSRC = "images/down2.gif"; var scrollSRC = "images/scroller2.gif"; var autoDisable = true; var onDisable = "hide"; var arrowGrouping = false; // ------------------------------------------------ // I suggest you don't alter anything below var ie4 = (document.all)? true:false; var ns6 = (!ie4 && document.getElementById)? true:false; var ns4 = (!ie4 && !ns6)? true:false; var loaded = false; var arrowSize; var x, y, pageFromTop; var upIMG, downIMG, scrollIMG; var pageWidth, pageHeight; if(!ie4 && navigator.appName != "Netscape") { alert('It seems you are using an unsupported browser'); } // ------------------------------------------------ // Initializes the scrollbar // - called by body onload() function initScroller() { arrowSize = barWidth; pageWidth = (ie4)? document.body.clientWidth:window.innerWidth; pageHeight = (ie4)? document.body.clientHeight:window.innerHeight; var tempLyr = getLayer(layerToScroll); if(ie4) pageFromTop = tempLyr.style.pixelTop; if(ns4) pageFromTop = tempLyr.top; if(ns6) pageFromTop = 0; //parseInt(tempLyr.style.top); upIMG = '<IMG SRC="'+upSRC +'" WIDTH="'+barWidth+'" HEIGHT="'+barWidth+'" BORDER="0">'; downIMG = '<IMG SRC="'+downSRC +'" WIDTH="'+barWidth+'" HEIGHT="'+barWidth+'" BORDER="0">'; scrollIMG = '<IMG name="theScroller" SRC="'+scrollSRC+'" WIDTH="'+barWidth+'" HEIGHT="'+scrollerHeight+'" BORDER="0">'; scrollbar = new Scrollbar(barWidth, barHeight, barXstart, barYstart); scrollbar.build(); scrollbar.setMaxScroll(); loaded = true; scrollbar.monitor(); scrollbar.setPage(layerToScroll); } // ------------------------------------------------ // Scrollbar Object. // - defines values and functions function Scrollbar(width, height, xPos, yPos) { // ------------------------------------------------ // Values: this.width = width; this.height = height; this.xPos = xPos; this.yPos = yPos; this.enabled = true; this.barString = ""; this.arrowSize = arrowSize; this.arrowUpYstart = 0; this.pageToScroll = layerToScroll; this.toScrollHeight = 0; this.activePage = layerToScroll; this.maxScroll = this.height - this.arrowSize; this.scrollerHeight = scrollerHeight; // ------------------------------------------------ // Functions: this.build = build; this.monitor = monitor; this.setPage = setPage; this.toTop = toTop; this.setMaxScroll = setMaxScroll; } // ------------------------------------------------ // Scrollbar Build function // - builds Scrollbar and writes it to page function build() { upApos = (arrowGrouping)? (this.height - (2*this.arrowSize)):0; scrpos = (arrowGrouping)? 0:this.arrowSize; // ------------------------------------------------ // Internet Explorer 4+ if(ie4) { this.barString = '<DIV ID="scrollyr" STYLE="position:absolute; left:'+this.xPos+'; top:'+this.yPos+'; ' + 'z-index:20; width:'+this.width+'; height:'+this.height+';">' + '<DIV ID="arrowUp" STYLE="position:absolute; left:0; top:'+upApos+'; width:'+this.arrowSize+'; height:' + this.arrowSize+'; z-index:30; Clip:rect(0,'+this.arrowSize+','+this.arrowSize + ',0); cursor:hand;">'+upIMG+'</DIV>' + '<DIV ID="scroller" STYLE="position:absolute; left:0; top:'+scrpos+'; width:'+this.arrowSize + '; height:'+scrollerHeight+';' // clip:rect(0,'+this.width+','+scrollerHeight+',0);' + ' z-index:25; cursor:hand;">'+scrollIMG+'</DIV>' + '<DIV ID="arrowDown" STYLE="position:absolute; left:0; top:'+(this.height-this.arrowSize)+'; width:' + arrowSize+'; height:'+arrowSize+'; z-index:30; Clip:rect(0,'+this.arrowSize+','+this.arrowSize + ',0); cursor:hand;">'+downIMG+'</DIV>' + '</DIV>'; document.body.insertAdjacentHTML("BeforeEnd", this.barString); scrollyr.onmousedown = goThere; if(scrollerBG != "none") { if(scrollerBG.indexOf('.') != -1) scrollyr.style.backgroundImage = "url("+scrollerBG+")"; else scrollyr.style.backgroundColor = scrollerBG; scrollyr.style.height = this.height } } // ------------------------------------------------ // Netscape Navigator 4.x if(ns4) { this.barString = '<Layer name="arrowUpF" left="0" top="'+upApos+'" width="'+this.arrowSize+'" height="' + this.arrowSize+'" z-index="30">'+upIMG+'</Layer>' + '<Layer name="arrowUp" left="0" top="'+upApos+'" width="'+this.arrowSize+'" height="' + this.arrowSize+'" z-index="31"></Layer>' + '<Layer name="scrollerF" left="0" top="'+scrpos+'" width="'+this.arrowSize + '" height="'+scrollerHeight+'" z-index="25">'+scrollIMG+'</Layer>' + '<Layer name="scroller" left="0" top="'+scrpos+'" width="'+this.arrowSize + '" height="'+scrollerHeight+'" z-index="26"></Layer>' + '<Layer name="arrowDownF" left="0" top="'+(this.height-this.arrowSize)+'" width="' + arrowSize+'" height="'+arrowSize+'" z-index="30">'+downIMG+'</Layer>' + '<Layer name="arrowDown" left="0" top="'+(this.height-this.arrowSize)+'" width="' + arrowSize+'" height="'+arrowSize+'" z-index="31"></Layer>'; scrollyr = new Layer(this.width); scrollyr.document.write(this.barString); scrollyr.document.close(); scrollyr.visibility = "show"; scrollyr.moveTo(barXstart, barYstart); if(scrollerBG!="none") { if(scrollerBG.indexOf('.') != -1) scrollyr.background.src = scrollerBG; else scrollyr.bgColor = scrollerBG } scrollyr.document.onmousedown = goThere; this.pageToScroll = getLayer(layerToScroll); scroller = getLayer('scroller'); scrollerF = getLayer('scrollerF'); arrowUp = getLayer('arrowUp'); arrowDown = getLayer('arrowDown'); scroller.style = scroller; scrollyr.style = scrollyr; } // ------------------------------------------------ // Mozilla - Netscape 5 or 6 if(ns6) { scrollbarElement = new ns6layer("scrollyr", this.xPos, this.yPos, this.width, this.height, 20); arrowUpElement = new ns6layer("arrowUp", 0, 0, this.arrowSize, this.arrowSize, 30); arrowUpElement.addImage(upSRC); arrowDownElement = new ns6layer("arrowDown", 0, (this.height-this.arrowSize), this.arrowSize, this.arrowSize, 30); arrowDownElement.addImage(downSRC); scrollerElement = new ns6layer("scroller", 0, this.arrowSize, this.arrowSize, scrollerHeight, 25); scrollerElement.addImage(scrollSRC, "theScroller"); scroller = getLayer('scroller'); scrollyr = getLayer('scrollyr'); arrowUp = getLayer('arrowUp'); arrowDown = getLayer('arrowDown'); scrollyr.onmousedown = goThere; } } // ------------------------------------------------ // Mozilla layer function (as Object) // - creates and writes layer to page // - addImage() writes an image to the layer function ns6layer(name, left, top, width, height, z) { this.nameSRC = document.createElement("Div"); this.nameSRC.id = name; if(name == "scrollyr") document.body.appendChild(this.nameSRC); else scrollbarElement.nameSRC.appendChild(this.nameSRC); this.lyr = document.getElementById(this.nameSRC.id); this.lyr.setAttribute("style","position:absolute; left:"+left +"; top:"+top+"; width:"+width+"; height:"+height+";"); this.lyr.style.zIndex = z; if(name == "scrollyr" && scrollerBG != "none") { if(scrollerBG.indexOf('.') != -1) this.lyr.style.backgroundImage = "url("+scrollerBG+")"; else this.lyr.style.backgroundColor = scrollerBG; } this.addImage = addImage; } function addImage(path, imgName) { this.imgElement = document.createElement("Img"); this.imgElement.src = path this.imgElement.width = barWidth; if (imgName != null) { this.imgElement.id = imgName; this.imgElement.height = scrollerHeight; } this.imgElement.border = 0; this.lyr.appendChild(this.imgElement); } // ------------------------------------------------ // Built in option to enable page flipping in // one document. // // - scrollbar.setPage(arg) with arg as String // representing a layername with content, // nested in the clipped top level layer function setPage(toWhat) { var hideThis = getLayer(this.activePage); if(ns4) hideThis.style = hideThis; hideThis.style.visibility = "hidden"; var showThis = toWhat; showThis = getLayer(showThis); if(ns4) showThis.style = showThis; showThis.style.visibility = "visible"; this.pageToScroll = toWhat; if(ns4 || ns6) this.pageToScroll = getLayer(this.pageToScroll); this.activePage = toWhat; if(ie4) this.toScrollHeight = document.all[this.pageToScroll].clientHeight; if(ns4) this.toScrollHeight = this.pageToScroll.document.height; if(ns6) this.toScrollHeight = this.pageToScroll.offsetHeight; if(autoDisable && this.toScrollHeight <= this.height) { scrollbar.enabled = false; if(onDisable == "hide") { scrollyr.style.visibility = "hidden"; } } else { scrollbar.enabled = true; scrollyr.style.visibility = "visible"; } scroller.style.top = (arrowGrouping)? 0:this.arrowSize; scroller.checkPos(); } function toTop() { with(this) { setPage(activePage); } } // ------------------------------------------------ // Defines the range of the scroll-element, // how far you can drag it up and down. function setMaxScroll() { this.maxScroll = this.height - this.arrowSize - this.scrollerHeight; scroller.range = this.maxScroll - this.arrowSize; } // ------------------------------------------------ // Sets up mouse event listeners for the // elements of the scrollbar. function monitor() { scroller.scrolling = false; scroller.moving = false; scroller.yStart = this.yPos; scroller.difY = 0; scroller.checkPos = checkPos; if(ns4) { arrowUp.onmouseout = stopScroll; arrowDown.onmouseout = stopScroll; arrowUp = arrowUp.document; arrowDown = arrowDown.document; scroller.document.onmousedown = setDrag; scroller.document.onmouseup = stopDrag; } else { scroller.onmousedown = setDrag; scroller.onmouseup = stopDrag; arrowUp.onmouseout = stopScroll; arrowDown.onmouseout = stopScroll; } arrowUp.onmouseout = stopScroll; arrowDown.onmouseout = stopScroll; arrowUp.onmouseover = scrollUp; arrowDown.onmouseover = scrollDown; } // ------------------------------------------------ // Maps scroll-element position to the content // layer, the heart of the script. function checkPos() { if(arrowGrouping) { scrollbar.maxScroll -= scrollbar.arrowSize; scrollbar.arrowSize = 0; } if(ns4) { if(this.top < scrollbar.arrowSize) this.top = scrollbar.arrowSize; if(this.top > scrollbar.maxScroll) this.top = scrollbar.maxScroll; scrollerF.top = scroller.top; } else { if(parseInt(this.style.top) < scrollbar.arrowSize) this.style.top = scrollbar.arrowSize; if(parseInt(this.style.top) > scrollbar.maxScroll) this.style.top = scrollbar.maxScroll; } var position = 0 - scrollbar.arrowSize; if(ns4) position += this.top else position += parseInt(this.style.top); var amountToDo = (scrollbar.toScrollHeight - scrollbar.height) + pageFromTop + extraSpace; if(amountToDo < 0) amountToDo = 0; var stepSize = amountToDo/this.range; var newPosition = pageFromTop - (position * stepSize); if(ie4) document.all[scrollbar.pageToScroll].style.pixelTop = newPosition; if(ns4) scrollbar.pageToScroll.top = newPosition; if(ns6) scrollbar.pageToScroll.style.top = newPosition; } // ------------------------------------------------ // Mouse event function, enables dragging function setDrag() { scroller.scrolling = true; scroller.difY = (y - scroller.yStart); if(ie4) scroller.difY -= scroller.style.pixelTop; if(ns4) scroller.difY -= scroller.top; if(ns6) scroller.difY -= parseInt(scroller.style.top); scroller.difY += scroller.yStart; } // ------------------------------------------------ // Mouse event functions, disables dragging function stopDrag() { if(!loaded) return; scroller.scrolling = false; } function mouseUp(e) { if(!loaded) return; scroller.scrolling = false; } // ------------------------------------------------ // Mouse event function, mouse positions function mouseMove(e) { if(!loaded) return; if (ns4) {x=e.pageX; y=e.pageY;} if (ns6) {x=e.clientX; y=e.clientY;} if (ie4) {x=event.x; y=event.y;} if(ie4 && loaded) { if(event.button == 0) stopDrag(); } if(loaded && scroller.scrolling && scrollbar.enabled) { if(ie4 || ns6) scroller.style.top = (y - scroller.yStart) - (scroller.difY - scroller.yStart); if(ns4) scroller.top = (y - scroller.yStart) - (scroller.difY - scroller.yStart); scroller.checkPos(); return false; } } function fixNSresize() { if(pageWidth != window.innerWidth || pageHeight != window.innerHeight) history.go(0); } document.onmousemove = mouseMove; document.onmouseup = mouseUp; if(ns4) { document.captureEvents(Event.MOUSEMOVE||Event.MOUSEUP||Event.MOUSEDOWN); window.onresize = fixNSresize; } // ------------------------------------------------ // Arrow Buttons events, up and down functions var SCmove = null; function scrollUp() { keyLock = true; scroller.moving = true; if(ns6) SCmove = setInterval(moveScroller, 25, (0-arrowSpeed)); else SCmove = setInterval("moveScroller(0-arrowSpeed)",25); } function scrollDown() { keyLock = true; scroller.moving = true; if(ns6) SCmove = setInterval(moveScroller, 25, arrowSpeed); else SCmove = setInterval("moveScroller(arrowSpeed)",25); } function stopScroll() { scroller.moving = false; if(SCmove != null) clearInterval(SCmove); } function moveScroller(how) { if(scroller.moving && scrollbar.enabled) { if(ie4) scroller.style.pixelTop += how; if(ns4) scroller.top += how; if(ns6) scroller.style.top = parseInt(scroller.style.top) + how; scroller.checkPos(); } } // ------------------------------------------------ // Clicking in the bar causes the scroll // element to take a step towards the mouse function goThere() { var where = y - scrollbar.yPos; if(!scroller.scrolling && !scroller.moving) { if(where < ((ie4)? scroller.style.pixelTop:((ns6)? parseInt(scroller.style.top):scroller.top))) { if(ie4) scroller.style.pixelTop -= clickStepSize; if(ns4) scroller.top -= clickStepSize; if(ns6) scroller.style.top = parseInt(scroller.style.top) - clickStepSize; } else { if(ie4) scroller.style.pixelTop += clickStepSize; if(ns4) scroller.top += clickStepSize; if(ns6) scroller.style.top = parseInt(scroller.style.top) + clickStepSize; } scroller.checkPos(); } } // ------------------------------------------------ // finds layers within document. Brainjar. // - http://www.brainjar.com. function getLayer(name) { if (ns4) return findLayer(name, document); if (ie4) return eval('document.all.' + name); if (ns6) return document.getElementById(name); return null; } function findLayer(name, doc) { var i, layer; for (i = 0; i < doc.layers.length; i++) { layer = doc.layers[i]; if (layer.name == name) return layer; if (layer.document.layers.length > 0) { layer = findLayer(name, layer.document); if (layer != null) return layer; } } return null; }