// *** LOAD FILES INTO DIV FUNCTIONS *** function scrLoad(fName) { with (this) { if (!fName || !loaded || !isDyn) return; loadingFile = fName; if (onbeforeload) onbeforeload(); if (loadingFile != history[histPos]) { histPos++; history[histPos] = loadingFile; history.length = histPos + 1; } if (isIE || isDOM) with (bufRef.document) { // Nest an Iframe with an onload handler. write('' + ''); close(); if (!bufRef.nestBuf || (isIE4 && !isWin)) { bufRef.location.href = fName; setTimeout(myName + '.fileLoaded()', 5000); } } else if (isNS4) { if (window.ns4LayerLoading) { setTimeout(myName + '.load("' + fName + '")', 100); return; } window.ns4LayerLoading = true; div.ref.onload = new Function(myName + '.fileLoaded()'); div.ref.load(fName, cWidth); } }} function scrFileLoaded() { with (this) { activeScr = null; if (isNS4) window.ns4LayerLoading = false; if ((isDOM || isIE) && loadingFile) { var bufDoc = bufRef.nestBuf ? bufRef.nestBuf.document : bufRef.document; if (bufDoc && bufDoc.body) div.ref.innerHTML = bufDoc.body.innerHTML; bufRef.location.replace('about:blank'); } loadedFile = loadingFile; setTimeout('with(' + myName + ') { scrollTo(0); if (onload) onload() }', 1); }} function scrGo(dir) { with (this) { histPos += dir; if (histPos < 0) { histPos = 0; return } if (histPos >= history.length) { histPos = history.length - 1; return } load(history[histPos]); }} // *** DIV SCROLLING FUNCTIONS *** function scrScrollTo(pos, isStick) { with (this) { if (!isDyn || !loaded) return; cTop = pos; if (!isStick) stickTop = cTop; divHeight = div.h() + padTop + padBot; if (divHeight == 0) divHeight = 1; if (checkBounds) { if (cTop + cHeight > divHeight) cTop = divHeight - cHeight; if (cTop < 0) cTop = 0; } div.y(eval(divs[0].y) - cTop + padTop); div.clip(0, cTop - padTop, cWidth, cTop - padTop + cHeight); thmHeight = Math.ceil(barHeight * (cHeight / divHeight)); if (thmHeight < minThmHeight) thmHeight = minThmHeight; if (thmHeight > barHeight) thmHeight = barHeight; thm.h(thmHeight); if (onscroll) onscroll(); if (activeScr || isStick) return; var fracDivDown = (cTop / (divHeight - cHeight)); thm.y(bar.y() + fracDivDown * (barHeight - thmHeight)); }} function scrScrollBy(amount) { with (this) { scrollTo(cTop + amount); }} function scrSetScroll(newSpeed, steps) { with (this) { if (!loaded) return; stepsLeft = steps; if (timer) clearInterval(timer); timer = setInterval('with (' + myName + ') { ' + 'if (stepsLeft > 0) { ySpeed += ' + ((newSpeed-ySpeed)/steps) + '; stepsLeft-- } ' + 'else if (parseInt(ySpeed)==0) {clearInterval(timer);timer=null} scrollBy(ySpeed) }', 50); }} // *** SCROLL THUMB DRAGGING EVENT HANDLERS *** function scrThumbDown(evt) { with (this) { // Find the correct event object. var evt = evt?evt:window.event; activeScr = this; dragOffset = (isNS4 ? evt.layerY : page.scrollY() + evt.clientY - thm.y()); if (onthumbdown) onthumbdown(); if (timer) clearInterval(timer); timer = null; return false; }} function scrThumbMove(evt) { var evt = evt?evt:window.event; if (!activeScr) return true; else with (activeScr) { if ((cTop + cHeight > divHeight) || (thmHeight == barHeight)) return true; var thmTop = (isNS4 ? evt.pageY : page.scrollY() + evt.clientY) - dragOffset - bar.y(); if (thmTop < 0) thmTop = 0; if (thmTop + thmHeight > barHeight) thmTop = barHeight - thmHeight; thm.y(bar.y() + thmTop); stickTop = (divHeight - cHeight) * (thmTop / (barHeight - thmHeight)); if (stick == 1) scrollTo(stickTop); else if (!timer) timer = setInterval(myName + '.stickScroll()', 40); return false; } } function scrStickScroll() { with (this) { if (Math.abs(cTop - stickTop) > 1) { cTop += (stickTop - cTop) * stick; scrollTo(cTop, true); } else if (cTop != stickTop) { cTop = stickTop; scrollTo(cTop, true); } }} function scrThumbUp(evt) { if (activeScr) with (activeScr) if (onthumbup) onthumbup(); activeScr = null; } // *** SCROLLBAR BACKGROUND CLICK EVENT HANDLER *** function scrBarClick(evt) { with (this) { var evt = evt?evt:window.event; clickPos = isNS4 ? evt.pageY : page.scrollY() + evt.clientY; if (clickPos < thm.y()) scrollBy(0 - cHeight); if (clickPos > (thm.y() + thmHeight)) scrollBy(cHeight); if (isNS4) return document.routeEvent(evt); }} // *** LAYOUT HANDLER FOR WINDOW RESIZE ETC *** function scrLayout() { with (this) { if (!isDyn || !loaded) return; for (var i = 0; i < divs.length; i++) with (divs[i].lyr) { x(eval(divs[i].x)); w(Math.max(0,eval(divs[i].w))); if (i) { y(eval(divs[i].y)); h(Math.max(0,eval(divs[i].h))) } } barHeight = eval(divs[1].h); cWidth = eval(divs[0].w); cHeight = eval(divs[0].h); if (onlayout) onlayout(); scrollBy(0); }} // *** ON LOAD: CAPTURE EVENTS & MISC. SETUP *** function scrSetup(defaultFile) { with (this) { if (!isDyn) return; for (var i = 0; i < divs.length; i++) divs[i].lyr = getLyr(divs[i].id, eval(divs[i].par)); div = divs[0].lyr; bar = divs[1].lyr; thm = divs[2].lyr; if (!isNS4) bufRef = eval('window.' + myName + 'Buf'); if (isNS4) { bar.ref.captureEvents(Event.CLICK); thm.ref.captureEvents(Event.MOUSEDOWN); } bar.ref.onclick = new Function('evt', 'return ' + myName + '.barClick(evt)'); thm.ref.onmousedown = new Function('evt', 'return ' + myName + '.thumbDown(evt)'); var noSel = new Function('if (activeScr) return false'); if (isIE) document.onselectstart = noSel; else if (isDOM) document.onselect = noSel; loaded = true; layout(); if (onsetup) onsetup(); var fileName = '' var URL = location.search.substring(1); if (URL) { URL = URL.split('&'); for (var i = 0; i < URL.length; i++) if (URL[i].split('=')[0] == myName) fileName = unescape(URL[i].split('=')[1]); } if (fileName) load(fileName) else if (defaultFile) load(defaultFile); else fileLoaded(); }} // *** SCROLLER OBJECT CONSTRUCTOR FUNCTIONS *** function addProps(obj, data, names, addNull) { for (var i = 0; i < names.length; i++) if(i < data.length || addNull) obj[names[i]] = data[i]; } function DHTMLScroller() { var names = ['myName', 'bufRef', 'div', 'bar', 'thm', 'loaded', 'timer', 'divHeight', 'thmHeight', 'barHeight', 'cHeight', 'cWidth', 'dragOffset', 'onbeforeload', 'onload', 'onscroll', 'onsetup', 'onlayout', 'onthumbdown', 'onthumbup']; addProps(this, arguments, names, true); // The top clipping position by default is zero -- the top of the file. this.cTop = 0; // The file(s) currently loading and displayed in the scroller, this.loadingFile = ''; this.loadedFile = ''; // Scroller history setup -- an array of data and current position. this.history = new Array(); this.histPos = -1; // Array of objects to move when the window is resized (e.g. scrollbar, arrows). this.divs = new Array(); // Minimum height of scrollbar thumb - defaults to 20, set to something else if you want. this.minThmHeight = 20; // Padding at the top and bottom -- set these manually if you want. this.padTop = 0; this.padBot = 0; // Whether or not to allow scrolling out of the normal region. this.checkBounds = true; // Current speed of the scroller, and the steps left to reach that speed. this.ySpeed = this.stepsLeft = 0; // The 'stickiness' of the scroller, 1 means perfect scrolling, decimals = floating. this.stick = 0.3; // Target point to which we scroll, and a timer variable managing sticky scroll. this.stickTop = 1; // Methods - bound to functions above. this.load = scrLoad; this.fileLoaded = scrFileLoaded; this.go = scrGo; this.scrollTo = scrScrollTo; this.scrollBy = scrScrollBy; this.setScroll = scrSetScroll; this.thumbDown = scrThumbDown; // The other thumb functions are global, associated with document.onevent. // They rely on the 'activeScr' global variable to tell them which scroller is being dragged. this.stickScroll = scrStickScroll; this.barClick = scrBarClick; this.setup = scrSetup; this.layout = scrLayout; } // The 'ScrDiv' object contains the data structure for the scroller divs. function ScrDiv() { addProps(this, arguments, ['id','x','y','w','h','par','lyr'], true); } // One global variable that points to the scroller currently being dragged. var activeScr = null; // *** SCROLLER OBJECT SETUP -- START EDITING HERE, keep reading until bottom of file ***. // First, you have to create one or more scroller objects, syntax: // var name = new DHTMLScroller('name'); var mainDiv = new DHTMLScroller('mainDiv'); // Then, working with its properties, we tell it the names of the relevant divs below we want it // to use. This is accomplished by the 'divs' array, to which we add new items like so: // // divs[number] = new ScrDiv('id of div below', 'x', 'y', 'width', 'height', 'parent'); // with (mainDiv) { // divs[0] = new ScrDiv('mainDivContent', 'page.winW()/2 - 300', 'page.winH()/2 - 200', '600', '400'); divs[0] = new ScrDiv('mainDivContent', '50', '140', '600', 'page.winH() - 180'); // De scrollbar divs[1] = new ScrDiv('mainDivBar', '660', '160', '15', 'page.winH() - 210'); divs[2] = new ScrDiv('mainDivThumb', '661', '', '13', ''); // divs[2] = new ScrDiv('mainDivThumb', 'page.winW() - 54', '', '13', ''); // Up and down arrow divs divs[3] = new ScrDiv('mainDivUpArrows', '660', '125', '', ''); divs[4] = new ScrDiv('mainDivDownArrows', '660', 'page.winH() - 50', '', ''); divs[5] = new ScrDiv('mainDivGoback', '125', 'page.winH() - 25', '', ''); // You can set scroller padding at the top and bottom of loaded files like this: padTop = 0; padBot = 0; // Another useful optional property is minimum thumb height. The default is: minThmHeight = 20; // The page object mentioned above can have minimum sizes set. By default, the winW() and winH() // functions just return the window area, but you can set minima like so: // page.minW = 525; // page.minH = 175; // I highly recommend doing this otherwise interesting crashes can result when the window sizes // too small and objects start to overlap and get negative heights etc. onload = loadFunction; // I've also set the onlayout event to hide and show the scrollbar thumb as needed. onlayout = thumbVis; } // Here's the example onload function, which gets called every time the scroller loads a file // and shows/hides the appropriate divs. Note it is a property of the scroller and hence we use // 'with (this)' to get at its other properties. You can just leave this alone, or you can dig // into the source code and make other functions to show/hide loading messages, light up the // scroller thumb as it is being dragged, use the onload to build a browsable history etc... function loadFunction() { with (this) { // Hide loading message... getSty('loadMessage').visibility = 'hidden'; // And show the rest of the divs apart from the scrollbar thumb (which is divs[2]). // You could modify this function to do the reverse on the 'onbeforeload' event perhaps...? for (var i = 0; i < divs.length; i++) if (i != 2) divs[i].lyr.vis('visible'); // Now call the layout function (thumbVis) below to show/hide thumb depending on content size. onlayout(); }} function thumbVis() { with (this) { // Only show the thumb when the actual content height exceeds the clipping area. // If you want to, hide divs[3] onwards to hide the scrollbar and arrows as well. divs[2].lyr.vis(div.h() > cHeight ? 'visible' : 'hidden'); }} // window.onevent=function(){....} is essentially the same as // Make sure you don't assign events either way later in your page, otherwise these get overridden. // eerste pagina die in dhtml geladen wordt. window.onload = function() { mainDiv.setup('bonds-news.htm'); } window.onresize = function() { ns4BugCheck(); mainDiv.layout(); } // Capture mouse movement for dragging. Combine this with other scripts if needed! // Make sure to capture and route these events for NS4 as we should. if (isNS4) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); document.onmousemove = function(evt) { var ret = scrThumbMove(evt); return (ret ? (isNS4?document.routeEvent(evt):true) : false); } document.onmouseup = function(evt) { scrThumbUp(evt); if (isNS4) return document.routeEvent(evt); } // Check for NS4 resize, reload if that's the case and pass current loaded file as query. var nsWinW = window.innerWidth, nsWinH = window.innerHeight; function ns4BugCheck() { if (isNS4 && (nsWinW!=innerWidth || nsWinH!=innerHeight)) { // NS4 cannot handle resizes, so reload -- but use URL query mechanism to keep the loaded file. var fileName = location.href; // Trim existing URL query string out of the current location, if any. if (fileName.indexOf('?') != -1) fileName = fileName.substring(0, fileName.indexOf('?')); // If you've got multiple scrollers, add the URLs of each and separate with '&' signs. location.href = fileName + '?mainDiv=' + mainDiv.loadedFile; } } // *** SCROLLING BY MOUSEWHEEL IN IE6+ *** delete if this isn't needed. if (isIE) document.onmousewheel = function() { // Just call the scrollBy methods of the appropriate scrollers. // You may wish to adjust the scrolling amount, just change the number. mainDiv.scrollBy(event.wheelDelta / -3); // Disable scrolling in the document, as we're handling this event. return false; }