JavaScript DHTML/GUI Components/ScrollBar
Содержание
Custom Scrollbar
<source lang="html4strict"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <title>Recipe 13.13</title> <style rel="stylesheet" id="mainStyle" type="text/css"> html {background-color:#cccccc} body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold} h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline} .buttons {margin-top:10px} </style> <script language="JavaScript" type="text/javascript"> /* *********************************************************** Example 4-3 (DHTMLAPI.js) "Dynamic HTML:The Definitive Reference" 2nd Edition by Danny Goodman Published by O"Reilly & Associates ISBN 1-56592-494-0 http://www.oreilly.ru Copyright 2002 Danny Goodman. All Rights Reserved.
- */
// DHTMLapi.js custom API for cross-platform // object positioning by Danny Goodman (http://www.dannyg.ru). // Release 2.0. Supports NN4, IE, and W3C DOMs. // Global variables var isCSS, isW3C, isIE4, isNN4, isIE6CSS; // Initialize upon load to let all browsers establish content objects function initDHTMLAPI() {
if (document.images) {
isCSS = (document.body && document.body.style) ? true : false;
isW3C = (isCSS && document.getElementById) ? true : false;
isIE4 = (isCSS && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.rupatMode && document.rupatMode.indexOf("CSS1") >= 0) ? true : false;
}
} // Set event handler to initialize API window.onload = initDHTMLAPI; // Seek nested NN4 layer from string name function seekLayer(doc, name) {
var theObj;
for (var i = 0; i < doc.layers.length; i++) {
if (doc.layers[i].name == name) {
theObj = doc.layers[i];
break;
}
// dive into nested layers if necessary
if (doc.layers[i].document.layers.length > 0) {
theObj = seekLayer(document.layers[i].document, name);
}
}
return theObj;
} // Convert object name string or object reference // into a valid element object reference function getRawObject(obj) {
var theObj;
if (typeof obj == "string") {
if (isW3C) {
theObj = document.getElementById(obj);
} else if (isIE4) {
theObj = document.all(obj);
} else if (isNN4) {
theObj = seekLayer(document, obj);
}
} else {
// pass through object reference
theObj = obj;
}
return theObj;
} // Convert object name string or object reference // into a valid style (or NN4 layer) reference function getObject(obj) {
var theObj = getRawObject(obj);
if (theObj && isCSS) {
theObj = theObj.style;
}
return theObj;
} // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) {
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = x + units;
theObj.top = y + units;
} else if (isNN4) {
theObj.moveTo(x,y)
}
}
} // Move an object by x and/or y pixels function shiftBy(obj, deltaX, deltaY) {
var theObj = getObject(obj);
if (theObj) {
if (isCSS) {
// equalize incorrect numeric value type
var units = (typeof theObj.left == "string") ? "px" : 0
theObj.left = getObjectLeft(obj) + deltaX + units;
theObj.top = getObjectTop(obj) + deltaY + units;
} else if (isNN4) {
theObj.moveBy(deltaX, deltaY);
}
}
} // Set the z-order of an object function setZIndex(obj, zOrder) {
var theObj = getObject(obj);
if (theObj) {
theObj.zIndex = zOrder;
}
} // Set the background color of an object function setBGColor(obj, color) {
var theObj = getObject(obj);
if (theObj) {
if (isNN4) {
theObj.bgColor = color;
} else if (isCSS) {
theObj.backgroundColor = color;
}
}
} // Set the visibility of an object to visible function show(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "visible";
}
} // Set the visibility of an object to hidden function hide(obj) {
var theObj = getObject(obj);
if (theObj) {
theObj.visibility = "hidden";
}
} // Retrieve the x coordinate of a positionable object function getObjectLeft(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("left");
} else if (elem.currentStyle) {
result = elem.currentStyle.left;
} else if (elem.style) {
result = elem.style.left;
} else if (isNN4) {
result = elem.left;
}
return parseInt(result);
} // Retrieve the y coordinate of a positionable object function getObjectTop(obj) {
var elem = getRawObject(obj);
var result = 0;
if (document.defaultView) {
var style = document.defaultView;
var cssDecl = style.getComputedStyle(elem, "");
result = cssDecl.getPropertyValue("top");
} else if (elem.currentStyle) {
result = elem.currentStyle.top;
} else if (elem.style) {
result = elem.style.top;
} else if (isNN4) {
result = elem.top;
}
return parseInt(result);
} // Retrieve the rendered width of an element function getObjectWidth(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetWidth) {
result = elem.offsetWidth;
} else if (elem.clip && elem.clip.width) {
result = elem.clip.width;
} else if (elem.style && elem.style.pixelWidth) {
result = elem.style.pixelWidth;
}
return parseInt(result);
} // Retrieve the rendered height of an element function getObjectHeight(obj) {
var elem = getRawObject(obj);
var result = 0;
if (elem.offsetHeight) {
result = elem.offsetHeight;
} else if (elem.clip && elem.clip.height) {
result = elem.clip.height;
} else if (elem.style && elem.style.pixelHeight) {
result = elem.style.pixelHeight;
}
return parseInt(result);
} // Return the available content width space in browser window function getInsideWindowWidth() {
if (window.innerWidth) {
return window.innerWidth;
} else if (isIE6CSS) {
// measure the html element"s clientWidth
return document.body.parentElement.clientWidth
} else if (document.body && document.body.clientWidth) {
return document.body.clientWidth;
}
return 0;
} // Return the available content height space in browser window function getInsideWindowHeight() {
if (window.innerHeight) {
return window.innerHeight;
} else if (isIE6CSS) {
// measure the html element"s clientHeight
return document.body.parentElement.clientHeight
} else if (document.body && document.body.clientHeight) {
return document.body.clientHeight;
}
return 0;
}
</script> <script language="JavaScript" type="text/javascript"> /***********************
SCROLLBAR CREATION
- /
// Global variables var scrollEngaged = false; var scrollInterval; var scrollBars = new Array(); // Utility to retrieve effective style property function getElementStyle(elemID, IEStyleAttr, CSSStyleAttr) {
var elem = document.getElementById(elemID);
if (elem.currentStyle) {
return elem.currentStyle[IEStyleAttr];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, "");
return compStyle.getPropertyValue(CSSStyleAttr);
}
return "";
} // Scrollbar constructor function function scrollBar(rootID, ownerID, ownerContentID) {
this.rootID = rootID;
this.ownerID = ownerID;
this.ownerContentID = ownerContentID;
this.index = scrollBars.length;
// one-time evaluations for use by other scroll bar manipulations
this.rootElem = document.getElementById(rootID);
this.ownerElem = document.getElementById(ownerID);
this.contentElem = document.getElementById(ownerContentID);
this.ownerHeight = parseInt(getElementStyle(ownerID, "height", "height"));
this.ownerWidth = parseInt(getElementStyle(ownerID, "width", "width"));
this.ownerBorder = parseInt(getElementStyle(ownerID, "borderTopWidth",
"border-top-width")) * 2;
this.contentHeight = Math.abs(parseInt(this.contentElem.style.top));
this.contentWidth = this.contentElem.offsetWidth;
this.contentFontSize = parseInt(getElementStyle(this.ownerContentID,
"fontSize", "font-size"));
this.contentScrollHeight = this.contentElem.scrollHeight;
// create quirks object whose default (CSS-compatible) values
// are zero; pertinent values for quirks mode filled in later
this.quirks = {on:false, ownerBorder:0, scrollBorder:0, contentPadding:0};
if (navigator.appName == "Microsoft Internet Explorer" &&
navigator.userAgent.indexOf("Win") != -1 &&
(typeof document.rupatMode == "undefined" ||
document.rupatMode == "BackCompat")) {
this.quirks.on = true;
this.quirks.ownerBorder = this.ownerBorder;
this.quirks.contentPadding = parseInt(getElementStyle(ownerContentID,
"padding", "padding"));
}
// determined at scrollbar initialization time
this.scrollWrapper = null;
this.upButton = null;
this.dnButton = null;
this.thumb = null;
this.buttonLength = 0;
this.thumbLength = 0;
this.scrollWrapperLength = 0
this.dragZone = {left:0, top:0, right:0, bottom:0}
// build a physical scrollbar for the root div
this.appendScroll = appendScrollBar;
} // Create scrollbar elements and append to the "pseudo-window" function appendScrollBar() {
// button and thumb image sizes (programmer customizable)
var imgH = 16;
var imgW = 16;
var thumbH = 27;
// "up" arrow, needed first to help size scrollWrapper
var lineup = document.createElement("img");
lineup.id = "lineup" + (scrollBars.length - 1);
lineup.className = "lineup";
lineup.index = this.index;
lineup.src = "scrollUp.gif";
lineup.height = imgH;
lineup.width = imgW;
lineup.alt = "Scroll Up";
lineup.style.position = "absolute";
lineup.style.top = "0px";
lineup.style.left = "0px";
// scrollWrapper defines "page" region color and 3-D borders
var wrapper = document.createElement("div");
wrapper.id = "scrollWrapper" + (scrollBars.length - 1);
wrapper.className = "scrollWrapper";
wrapper.index = this.index;
wrapper.style.position = "absolute";
wrapper.style.visibility = "hidden";
wrapper.style.top = "0px";
wrapper.style.left = this.ownerWidth + this.ownerBorder -
this.quirks.ownerBorder + "px";
wrapper.style.borderTop = "2px solid #666666";
wrapper.style.borderLeft = "2px solid #666666";
wrapper.style.borderRight= "2px solid #cccccc";
wrapper.style.borderBottom= "2px solid #cccccc";
wrapper.style.backgroundColor = "#999999";
if (this.quirks.on) {
this.quirks.scrollBorder = 2;
}
wrapper.style.width = lineup.width + (this.quirks.scrollBorder * 2) + "px";
wrapper.style.height = this.ownerHeight + (this.ownerBorder - 4) -
(this.quirks.scrollBorder * 2) + "px";
// "down" arrow
var linedn = document.createElement("img");
linedn.id = "linedown" + (scrollBars.length - 1);
linedn.className = "linedown";
linedn.index = this.index;
linedn.src = "scrollDn.gif";
linedn.height = imgH;
linedn.width = imgW;
linedn.alt = "Scroll Down";
linedn.style.position = "absolute";
linedn.style.top = parseInt(this.ownerHeight) + (this.ownerBorder - 4) -
(this.quirks.ownerBorder) - linedn.height + "px";
linedn.style.left = "0px";
// fixed-size draggable thumb
var thumb = document.createElement("img");
thumb.id = "thumb" + (scrollBars.length - 1);
thumb.index = this.index;
thumb.src = "thumb.gif";
thumb.height = thumbH;
thumb.width = imgW;
thumb.alt = "Scroll Dragger";
thumb.style.position = "absolute";
thumb.style.top = lineup.height + "px";
thumb.style.width = imgW + "px";
thumb.style.height = thumbH + "px";
thumb.style.left = "0px";
// fill in scrollBar object properties from rendered elements
this.upButton = wrapper.appendChild(lineup);
this.thumb = wrapper.appendChild(thumb);
this.dnButton = wrapper.appendChild(linedn);
this.scrollWrapper = this.rootElem.appendChild(wrapper);
this.buttonLength = imgH;
this.thumbLength = thumbH;
this.scrollWrapperLength = parseInt(getElementStyle(this.scrollWrapper.id,
"height", "height"));
this.dragZone.left = 0;
this.dragZone.top = this.buttonLength;
this.dragZone.right = this.buttonLength;
this.dragZone.bottom = this.scrollWrapperLength - this.buttonLength -
(this.quirks.scrollBorder * 2)
// all events processed by scrollWrapper element
this.scrollWrapper.onmousedown = handleScrollClick;
this.scrollWrapper.onmouseup = handleScrollStop;
this.scrollWrapper.oncontextmenu = blockEvent;
this.scrollWrapper.ondrag = blockEvent;
// OK to show
this.scrollWrapper.style.visibility = "visible";
} /***************************
EVENT HANDLER FUNCTIONS
- /
// onmouse up handler function handleScrollStop() {
scrollEngaged = false;
} // Prevent Mac context menu while holding down mouse button function blockEvent(evt) {
evt = (evt) ? evt : event; evt.cancelBubble = true; return false;
} // click event handler function handleScrollClick(evt) {
var fontSize, contentHeight;
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
target = (target.nodeType == 3) ? target.parentNode : target;
var index = target.index;
fontSize = scrollBars[index].contentFontSize;
switch (target.className) {
case "lineup" :
scrollEngaged = true;
scrollBy(index, parseInt(fontSize));
scrollInterval = setInterval("scrollBy(" + index + ", " +
parseInt(fontSize) + ")", 100);
evt.cancelBubble = true;
return false;
break;
case "linedown" :
scrollEngaged = true;
scrollBy(index, -(parseInt(fontSize)));
scrollInterval = setInterval("scrollBy(" + index + ", -" +
parseInt(fontSize) + ")", 100);
evt.cancelBubble = true;
return false;
break;
case "scrollWrapper" :
scrollEngaged = true;
var evtY = (evt.offsetY) ? evt.offsetY : ((evt.layerY) ? evt.layerY : -1);
if (evtY >= 0) {
var pageSize = scrollBars[index].ownerHeight - fontSize;
var thumbElemStyle = scrollBars[index].thumb.style;
// set value negative to push document upward
if (evtY > (parseInt(thumbElemStyle.top) +
scrollBars[index].thumbLength)) {
pageSize = -pageSize;
}
scrollBy(index, pageSize);
scrollInterval = setInterval("scrollBy(" + index + ", " +
pageSize + ")", 100);
evt.cancelBubble = true;
return false;
}
}
return false;
} // Activate scroll of inner content function scrollBy(index, px) {
var scroller = scrollBars[index];
var elem = document.getElementById(scroller.ownerContentID);
var top = parseInt(elem.style.top);
var scrollHeight = parseInt(elem.scrollHeight);
var height = scroller.ownerHeight;
if (scrollEngaged && top + px >= -scrollHeight + height && top + px <= 0) {
shiftBy(elem, 0, px);
updateThumb(index);
} else if (top + px < -scrollHeight + height) {
shiftTo(elem, 0, -scrollHeight + height - scroller.quirks.contentPadding);
updateThumb(index);
clearInterval(scrollInterval);
} else if (top + px > 0) {
shiftTo(elem, 0, 0);
updateThumb(index);
clearInterval(scrollInterval);
} else {
clearInterval(scrollInterval);
}
} /**********************
SCROLLBAR TRACKING
- /
// Position thumb after scrolling by arrow/page region function updateThumb(index) {
var scroll = scrollBars[index];
var barLength = scroll.scrollWrapperLength - (scroll.quirks.scrollBorder * 2);
var buttonLength = scroll.buttonLength;
barLength -= buttonLength * 2;
var docElem = scroll.contentElem;
var docTop = Math.abs(parseInt(docElem.style.top));
var scrollFactor = docTop/(scroll.contentScrollHeight - scroll.ownerHeight);
shiftTo(scroll.thumb, 0, Math.round((barLength - scroll.thumbLength) *
scrollFactor) + buttonLength);
} // Position content per thumb location function updateScroll() {
var index = selectedObj.index;
var scroller = scrollBars[index];
var barLength = scroller.scrollWrapperLength - (scroller.quirks.scrollBorder * 2);
var buttonLength = scroller.buttonLength;
var thumbLength = scroller.thumbLength;
var wellTop = buttonLength;
var wellBottom = barLength - buttonLength - thumbLength;
var wellSize = wellBottom - wellTop;
var thumbTop = parseInt(getElementStyle(scroller.thumb.id, "top", "top"));
var scrollFactor = (thumbTop - buttonLength)/wellSize;
var docElem = scroller.contentElem;
var docTop = Math.abs(parseInt(docElem.style.top));
var scrollHeight = scroller.contentScrollHeight;
var height = scroller.ownerHeight;
shiftTo(scroller.ownerContentID, 0, -(Math.round((scrollHeight - height) *
scrollFactor)));
} /*******************
ELEMENT DRAGGING
- /
// Global holds reference to selected element var selectedObj; // Globals hold location of click relative to element var offsetX, offsetY; var zone = {left:0, top:16, right:16, bottom:88}; // Set global reference to element being engaged and dragged function setSelectedElem(evt) {
var target = (evt.target) ? evt.target : evt.srcElement;
target = (target.nodeType && target.nodeType == 3) ? target.parentNode : target;
var divID = (target.id.indexOf("thumb") != -1) ? target.id : "";
if (divID) {
if (document.layers) {
selectedObj = document.layers[divID];
} else if (document.all) {
selectedObj = document.all(divID);
} else if (document.getElementById) {
selectedObj = document.getElementById(divID);
}
setZIndex(selectedObj, 100);
return;
}
selectedObj = null;
return;
} // Drag thumb only within scrollbar region function dragIt(evt) {
evt = (evt) ? evt : event;
var x, y, width, height;
if (selectedObj) {
if (evt.pageX) {
x = evt.pageX - offsetX;
y = evt.pageY - offsetY;
} else if (evt.clientX || evt.clientY) {
x = evt.clientX - offsetX;
y = evt.clientY - offsetY;
}
var index = selectedObj.index;
var scroller = scrollBars[index];
var zone = scroller.dragZone;
width = scroller.thumb.width;
height = scroller.thumb.height;
x = (x < zone.left) ? zone.left : ((x + width > zone.right) ? zone.right - width : x);
y = (y < zone.top) ? zone.top : ((y + height > zone.bottom) ? zone.bottom - height : y);
shiftTo(selectedObj, x, y);
updateScroll();
evt.cancelBubble = true;
return false;
}
} // Turn selected element on and set cursor offsets function engage(evt) {
evt = (evt) ? evt : event;
setSelectedElem(evt);
if (selectedObj) {
if (document.body && document.body.setCapture) {
// engage event capture in IE/Win
document.body.setCapture();
}
if (evt.pageX) {
offsetX = evt.pageX - ((typeof selectedObj.offsetLeft != "undefined") ?
selectedObj.offsetLeft : selectedObj.left);
offsetY = evt.pageY - ((selectedObj.offsetTop) ?
selectedObj.offsetTop : selectedObj.top);
} else if (typeof evt.clientX != "undefined") {
offsetX = evt.clientX - ((selectedObj.offsetLeft) ?
selectedObj.offsetLeft : 0);
offsetY = evt.clientY - ((selectedObj.offsetTop) ?
selectedObj.offsetTop : 0);
}
return false;
}
} // Turn selected element off function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0);
if (document.body && document.body.releaseCapture) {
// stop event capture in IE/Win
document.body.releaseCapture();
}
selectedObj = null;
}
} // Assign event handlers used by both Navigator and IE function initDrag() {
if (document.layers) {
// turn on event capture for these events in NN4 event model
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
return;
} else if (document.body & document.body.addEventListener) {
// turn on event capture for these events in W3C DOM event model
document.addEventListener("mousedown", engage, true);
document.addEventListener("mousemove", dragIt, true);
document.addEventListener("mouseup", release, true);
return;
}
document.onmousedown = engage;
document.onmousemove = dragIt;
document.onmouseup = release;
return;
}
</script> <script type="text/javascript"> // Make a scrollBar object and build one on screen function initScrollbars() {
scrollBars[0] = new scrollBar("pseudoWindow", "outerWrapper", "innerWrapper");
scrollBars[0].appendScroll();
} </script> </head> <body style="height:400px;" onload="initDHTMLAPI(); initDrag(); initScrollbars()">
Custom Scrollbar
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseruntmollit anim id est laborum Et harumd und lookum like Greek to me, dereud facilis est er expedit distinct.
At vver eos et accusam dignissum qui blandit est praesent luptatum delenit aigueexcepteur sint occae. Et harumd dereud facilis est er expedit distinct. Nam libe soluta nobis eligent optio est congue nihil impedit doming idLorem ipsum dolor sit amet, consectetur adipiscing elit, set eiusmod tempor incidunt et labore et dolore magna aliquam. Ut enim ad minimveniam, quis nostrud exerc. Irure dolor in reprehend incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse molestaiecillum. Tia non ob ea soluad incommod quae egen ium improb fugiend. Officia deserunt mollit anim id est laborum Et harumd dereud facilisest er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. Neque pecun modut est neque nonor et imperned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam is nostrud exercitation ullam mmodo consequet. Duis aute involuptate velit esse cillum dolore eu fugiat nulla pariatur. At vver eos et accusam dignissum qui blandit est praesent. Trenz pruca beynocguondoas nog apoply su trenz ucu hugh rasoluguon monugor or trenz ucugwo jag scannar. Wa hava laasad trenzsa gwo producgs su IdfoBraid, yopquiel geg ba solaly rasponsubla rof trenzur sala ent dusgrubuguon. Offoctivo immoriatoly, hawrgasi pwicos asi sirucor.Thas sirutciun appliostyu thuso itoms ghuso pwicos gosi sirucor in mixent gosi sirucor ic mixent ples cak ontisi sowios uf Zerm hawr rwivos. Unte af phen neigepheings atoot Prexs eis phat eit sakem eit vory gast te Plok peish ba useing phen roxas. Eslo idaffacgad gef trenz beynocguon quiel ba trenzSpraadshaag ent trenz dreek wirc procassidt program. Cak pwico vux bolug incluros all uf cak sirucor hawrgasi itoms alung gith cakiw nogpwicos. Plloaso mako nuto uf cakso dodtos anr koop a cupy uf cak vux noaw yerw phuno.</p>
</body> </html>
</source>
Custom Scroll bar 1
<source lang="html4strict"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html><head> <script language="javascript"> /**************************************************
* dom-drag.js * 09.25.2001 * www.youngpup.net ************************************************** * 10.28.2001 - fixed minor bug where events * sometimes fired off the handle, not the root. **************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != "undefined" ? minX : null;
o.minY = typeof minY != "undefined" ? minY : null;
o.maxX = typeof maxX != "undefined" ? maxX : null;
o.maxY = typeof maxY != "undefined" ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == "undefined") e = window.event;
if (typeof e.layerX == "undefined") e.layerX = e.offsetX;
if (typeof e.layerY == "undefined") e.layerY = e.offsetY;
return e;
}
}; </script> <style type="text/css">
#thumb {
position:absolute;
height:50px;
width:12px;
background-color:#eee;
border:1px outset #eee;
}
</style></head>
<body>
<script language="javascript">
var aThumb = document.getElementById("thumb");
Drag.init(aThumb, null, 25, 25, 25, 200);
</script> </body></html>
</source>
Custom scroll bar 2
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="author" content="Sergi Meseguer, meddle" /> <title>Aaron Boodman"s ypSimpleScroll script modified by www.zigotica.ru</title>
<style rel="stylesheet" type="text/css" media="screen, projection"> /*********************** SCROLLERS ***********************/ .root {
position:relative; height: 200px; width: 489px; margin: 0px 0px 8px 7px; }
.root p {
margin: 10px 10px 5px 10px; }
.thumb {
position: absolute; height: 9px; width: 15px; left: 10px; }
.up, .dn {
position: absolute; left: 10px; }
.up a, .up a img, .dn a, .dn a img, .thumb a , .thumb a img{
border: 0; }
.scrollContainer {
position: absolute; left: 2px; top: 19px; width: 350px; height: 200px; clip: rect(0 467 200 0); overflow: auto; border-top: 2px solid #000000; border-left: 2px solid #000000; border-right: 2px solid #686262; border-bottom: 2px solid #686262; background: #D9D9B0; }
.scrollContent {
position: absolute; left: 0px; top: 0px; width: 100px; }
</style> </head> <body>
<script type="text/javascript"> /**************************************************
* dom-drag.js * 09.25.2001 * www.youngpup.net ************************************************** * 10.28.2001 - fixed minor bug where events * sometimes fired off the handle, not the root. **************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != "undefined" ? minX : null;
o.minY = typeof minY != "undefined" ? minY : null;
o.maxX = typeof maxX != "undefined" ? maxX : null;
o.maxY = typeof maxY != "undefined" ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == "undefined") e = window.event;
if (typeof e.layerX == "undefined") e.layerX = e.offsetX;
if (typeof e.layerY == "undefined") e.layerY = e.offsetY;
return e;
}
}; </script>
<script type="text/javascript" > /* =======================================================
- ypSimpleScroll
- 3/11/2001
- http://www.youngpup.net/
- ======================================================= */
// Modified by Sergi Meseguer (www.zigotica.ru) 04/2004 // Now it works with dragger and can use multiple instances in a page
ypSimpleScroll.prototype.scrollNorth = function(count) { this.startScroll(90, count) } ypSimpleScroll.prototype.scrollSouth = function(count) { this.startScroll(270, count) } ypSimpleScroll.prototype.scrollWest = function(count) { this.startScroll(180, count) } ypSimpleScroll.prototype.scrollEast = function(count) { this.startScroll(0, count) } ypSimpleScroll.prototype.startScroll = function(deg, count) {
if (this.loaded){
if (this.aniTimer) window.clearTimeout(this.aniTimer)
this.overrideScrollAngle(deg)
this.speed = this.origSpeed
this.lastTime = (new Date()).getTime() - this.y.minRes
this.aniTimer = window.setTimeout(this.gRef + ".scroll(""+deg+"",""+count+"")", this.y.minRes)
}
} ypSimpleScroll.prototype.endScroll = function() {
if (this.loaded){
window.clearTimeout(this.aniTimer)
this.aniTimer = 0;
this.speed = this.origSpeed
}
} ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
if (this.loaded){
deg = deg % 360
if (deg % 90 == 0) {
var cos = deg == 0 ? 1 : deg == 180 ? -1 : 0
var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
}
else {
var angle = deg * Math.PI / 180
var cos = Math.cos(angle)
var sin = Math.sin(angle)
sin = -sin
}
this.fx = cos / (Math.abs(cos) + Math.abs(sin))
this.fy = sin / (Math.abs(cos) + Math.abs(sin))
this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
}
} ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
if (this.loaded) this.speed = speed
}
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
if (this.loaded){
if (stopH != this.scrollLeft || stopV != this.scrollTop) {
if (this.aniTimer) window.clearTimeout(this.aniTimer)
this.lastTime = (new Date()).getTime()
var dx = Math.abs(stopH - this.scrollLeft)
var dy = Math.abs(stopV - this.scrollTop)
var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
this.fx = (stopH - this.scrollLeft) / (dx + dy)
this.fy = (stopV - this.scrollTop) / (dx + dy)
this.stopH = stopH
this.stopV = stopV
this.speed = d / aniLen * 1000
window.setTimeout(this.gRef + ".scroll()", this.y.minRes)
}
}
} ypSimpleScroll.prototype.jumpTo = function(nx, ny) {
if (this.loaded){
nx = Math.min(Math.max(nx, 0), this.scrollW)
ny = Math.min(Math.max(ny, 0), this.scrollH)
this.scrollLeft = nx
this.scrollTop = ny
if (this.y.ns4)this.content.moveTo(-nx, -ny)
else {
this.content.style.left = -nx + "px"
this.content.style.top = -ny + "px"
}
}
} ypSimpleScroll.minRes = 10 ypSimpleScroll.ie = document.all ? 1 : 0 ypSimpleScroll.ns4 = document.layers ? 1 : 0 ypSimpleScroll.dom = document.getElementById ? 1 : 0 ypSimpleScroll.mac = navigator.platform == "MacPPC" ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0 ypSimpleScroll.prototype.scroll = function(deg,count) {
this.aniTimer = window.setTimeout(this.gRef + ".scroll(""+deg+"",""+count+"")", this.y.minRes)
var nt = (new Date()).getTime()
var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
if (d > 0){
var nx = d * this.fx + this.scrollLeft
var ny = d * this.fy + this.scrollTop
var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
var yOut = (ny >= this.scrollTop && ny >= this.stopV) || (ny <= this.scrollTop && ny <= this.stopV)
if (nt - this.lastTime != 0 &&
((this.fx == 0 && this.fy == 0) ||
(this.fy == 0 && xOut) ||
(this.fx == 0 && yOut) ||
(this.fx != 0 && this.fy != 0 &&
xOut && yOut))) {
this.jumpTo(this.stopH, this.stopV)
this.endScroll()
}
else {
this.jumpTo(nx, ny)
this.lastTime = nt
}
// (zgtc) now we also update dragger position:
if(deg=="270") theThumb[count].style.top = parseInt(((theThumb[count].maxY-theThumb[count].minY)*this.scrollTop/this.stopV)+theThumb[count].minY) + "px"; //ok nomes down
if(deg=="90") theThumb[count].style.top = parseInt(((theThumb[count].maxY-theThumb[count].minY)*this.scrollTop/this.scrollH)+theThumb[count].minY) + "px"; //ok nomes down
}
} function ypSimpleScroll(id, left, top, width, height, speed) {
var y = this.y = ypSimpleScroll
if (document.layers && !y.ns4) history.go(0)
if (y.ie || y.ns4 || y.dom) {
this.loaded = false
this.id = id
this.origSpeed = speed
this.aniTimer = false
this.op = ""
this.lastTime = 0
this.clipH = height
this.clipW = width
this.scrollTop = 0
this.scrollLeft = 0
this.gRef = "ypSimpleScroll_"+id
eval(this.gRef+"=this")
var d = document
d.write("<style type="text/css">")
d.write("#" + this.id + "Container { left:" + left + "px; top:" + top + "px; width:" + width + "px; height:" + height + "px; clip:rect(0 " + width + " " + height + " 0); overflow:hidden; }")
d.write("#" + this.id + "Container, #" + this.id + "Content { position:absolute; }")
d.write("#" + this.id + "Content { left:" + (-this.scrollLeft) + "px; top:" + (-this.scrollTop) + "px; width:" + width + "px; }")
// (zgtc) fix to overwrite p/div/ul width (would be clipped if wider than scroller in css):
d.write("#" + this.id + "Container p, #" + this.id + "Container div {width:" + parseInt(width-10) + "px; }")
d.write("</style>")
}
} ypSimpleScroll.prototype.load = function() {
var d, lyrId1, lyrId2 d = document lyrId1 = this.id + "Container" lyrId2 = this.id + "Content" this.container = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1] this.content = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2) this.docH = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH) this.docW = Math.max(this.y.ns4 ? this.content.document.width : this.content.offsetWidth, this.clipW) this.scrollH = this.docH - this.clipH this.scrollW = this.docW - this.clipW this.loaded = true this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0) this.scrollTop = Math.max(Math.min(this.scrollTop, this.scrollH),0) this.jumpTo(this.scrollLeft, this.scrollTop)
} </script>
<script type="text/javascript">
// ============================================================== // HANDLES SCROLLER/S // Modified from Aaron Boodman http://webapp.youngpup.net/?request=/components/ypSimpleScroll.xml // mixed ypSimpleScroll with dom-drag script and allowed multiple scrolelrs through array instances // (c)2004 Sergi Meseguer (http://zigotica.ru/), 04/2004: // ============================================================== var theHandle = []; var theRoot = []; var theThumb = []; var theScroll = []; var thumbTravel = []; var ratio = []; function instantiateScroller(count, id, left, top, width, height, speed){
if(document.getElementById) {
theScroll[count] = new ypSimpleScroll(id, left, top, width, height, speed);
}
} function createDragger(count, handler, root, thumb, minX, maxX, minY, maxY){
var buttons = " "<a href="#" onmouseover="theScroll["+count+"].scrollNorth(\""+count+"\")" "+
"onmouseout="theScroll["+count+"].endScroll()" onclick="return false;">"+
"<img src="textScrollUp.gif" width="15" height="15"></a> "<a href="#" onmouseover="theScroll["+count+"].scrollSouth(\""+count+"\")" "+
"onmouseout="theScroll["+count+"].endScroll()" onclick="return false;">"+
"<img src="textScrollDown.gif" width="15" height="15"></a>
document.getElementById(root).innerHTML = buttons + document.getElementById(root).innerHTML;
theRoot[count] = document.getElementById(root);
theThumb[count] = document.getElementById(thumb);
var thisup = document.getElementById("up"+count);
var thisdn = document.getElementById("dn"+count);
theThumb[count].style.left = parseInt(minX+15) + "px";
thisup.style.left = parseInt(minX+15) + "px";
thisdn.style.left = parseInt(minX+15) + "px";
theThumb[count].style.border =0;
theThumb[count].style.top = parseInt(minY) + "px";
thisup.style.top = 0 + "px";
thisdn.style.top = parseInt(minY+maxY) + "px";
//thisdn.style.top = 15 + "px";
theScroll[count].load();
//Drag.init(theHandle[count], theRoot[count]); //not draggable on screen
Drag.init(theThumb[count], null, minX+15, maxX+15, minY, maxY);
// the number of pixels the thumb can travel vertically (max - min)
thumbTravel[count] = theThumb[count].maxY - theThumb[count].minY;
// the ratio between scroller movement and thumbMovement
ratio[count] = theScroll[count].scrollH / thumbTravel[count];
theThumb[count].onDrag = function(x, y) {
theScroll[count].jumpTo(null, Math.round((y - theThumb[count].minY) * ratio[count]));
}
} // INITIALIZER: // ============================================================== // ala Simon Willison http://simon.incutio.ru/archive/2004/05/26/addLoadEvent function addLoadEvent(fn) {
var old = window.onload;
if (typeof window.onload != "function") {
window.onload = fn;
}
else {
window.onload = function() {
old();
fn();
}
}
}
addLoadEvent(function(){
if(theScroll.length>0) {
for(var i=0;i<theScroll.length;i++){
createDragger(i, "handle"+i, "root"+i, "thumb"+i, theScroll[i].clipW, theScroll[i].clipW, 15, theScroll[i].clipH-30);
}
}
}) </script> <script type="text/javascript">
instantiateScroller(0, "scroll0", 7, 0, 300, 150, 150); instantiateScroller(1, "scroll1", 7, 0, 375, 200, 150);
</script>
Example one
Javascript is a different layer of the style and structure ones, and like CSS, it should not be required but optional, so that without its use the page should be accessible and usable. If the browser cannot interpret the code it will not execute it, but the contents will be accessible. This is generally called script degradation. Now, being more specific, what makes a piece of code unobtrusive?
- Mix with structure: mainly, script behaviour not being mixed with page contents. This means there will be no intrinsec events inside the document and the file will be stored in a separate .js file.
- Initialization: the ideal solution is the script being initialized automatically on page load
- Assign actions with an event handler: because we have avoided the use of intrinsec events we will need a way to associate actions (execute functions) to events captured by different elements on the page.
- Compatibility: browsers that dont understand the code must do without it throwing no error messages.
- Capacities detection: to allow the previous point be true we will use object detection instead of browser detection.
Ending example one.
Example two
Table of Contents from titles (TOC)
This script reads all nodes in a document and stores the titles hierarchic structure in a variable, showing them in an indented list according to their order. Sections of the list are links to the real section on the page, using the id of the titles (script creates them if needed).
Form validator
This script reads all text fields of a form making all "required" classes having to be filled before sent to server, otherwise warning visually and through an alert. If the field is named email it forces (with a regular expression) to use a valid email.
Ending example two.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/TextScrollWith.zip">TextScrollWith.zip( 8 k)</a>
Scroll bar 1
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .Container {
position: absolute; top: 50px; left: 100px; width: 400px; height: 200px; background: #FFF url(scrollImages/container_background.gif) no-repeat;
}
- Scroller-1 {
position: absolute; overflow: hidden; width: 400px; height: 200px;
}
- Scroller-1 p {
margin: 0; padding: 10px 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 20px; color: #6F6048;
} .Scroller-Container {
position: absolute; top: 0px; left: 0px;
} .Scrollbar-Up {
cursor: pointer; position: absolute; top: -10px; left: -40px;
} .Scrollbar-Down {
cursor: pointer; position: absolute; top: 187px; left: -40px;
} </style> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
}; </script> <script type="text/javascript"> var scroller = null; window.onload = function () {
var el = document.getElementById("Scroller-1");
scroller = new jsScroller(el, 400, 200);
} </script> </head> <body>
<img src="scrollImages/up_arrow.gif" class="Scrollbar-Up" onmouseover="scroller.startScroll(0, 5);" onmouseout="scroller.stopScroll();" /> <img src="scrollImages/down_arrow.gif" class="Scrollbar-Down" onmouseover="scroller.startScroll(0, -5);" onmouseout="scroller.stopScroll();" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
</body> </html>
</source>
Scrollbar 2
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jsScrollbar</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .Container {
position: absolute; top: 50px; left: 100px; width: 400px; height: 200px; background: #FFF url(images/container_background.gif) no-repeat;
}
- Scroller-1 {
position: absolute; overflow: hidden; width: 400px; height: 200px;
}
- Scroller-1 p {
margin: 0; padding: 10px 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 20px; color: #6F6048;
} .Scroller-Container {
position: absolute; top: 0px; left: 0px;
}
- Scrollbar-Container {
position: absolute; top: 40px; left: 60px;
} .Scrollbar-Up {
cursor: pointer; position: absolute;
} .Scrollbar-Track {
width: 20px; height: 161px; position: absolute; top: 36px; left: 4px; background: transparent url(scrollImages/scrollbar_track.gif) no-repeat center center;
} .Scrollbar-Handle {
position: absolute; width: 20px; height: 22px;
} .Scrollbar-Down {
cursor: pointer; position: absolute; top: 187px;
} </style> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
}; </script> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScrollbar (o, s, a, ev) {
var self = this;
this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);
this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();
if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent("on"+ t, f);
else o["on"+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent("on"+ t, f);
else o["on"+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;
e = e ? e : event;
if (!e.target) e.target = e.srcElement;
if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};
self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);
return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}
self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;
self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);
if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };
if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;
this._yHandle.style.top = y +"px";
this._y = y;
this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};
this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
this._src.swapContent(o, w, h);
this.reset();
};
this.reset();
}; </script> <script type="text/javascript"> var scroller = null; var scrollbar = null; window.onload = function () {
scroller = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
} </script> </head> <body>
<img src="scrollImages/up_arrow.gif" class="Scrollbar-Up" /> <img src="scrollImages/down_arrow.gif" class="Scrollbar-Down" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
</body> </html>
</source>
ScrollBar 3
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jsScrollbar</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .Container {
position: absolute; top: 50px; left: 100px; width: 400px; height: 200px; background-color: #EEE;
}
- Scroller-1 {
position: absolute; overflow: hidden; width: 400px; height: 200px;
}
- Scroller-1 p {
margin: 0; padding: 10px 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 20px; color: #777;
} .Scroller-Container {
position: absolute; top: 0px; left: 0px;
} .Scrollbar-Track {
width: 10px; height: 100px; position: absolute; top: 75px; left: 500px; background-color: #EEE;
} .Scrollbar-Handle {
position: absolute; top: 0px; left: 0px; width: 10px; height: 30px; background-color: #CCC;
} </style> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
}; </script> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScrollbar (o, s, a, ev) {
var self = this;
this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);
this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();
if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent("on"+ t, f);
else o["on"+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent("on"+ t, f);
else o["on"+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;
e = e ? e : event;
if (!e.target) e.target = e.srcElement;
if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};
self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);
return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}
self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;
self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);
if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };
if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;
this._yHandle.style.top = y +"px";
this._y = y;
this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};
this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
this._src.swapContent(o, w, h);
this.reset();
};
this.reset();
}; </script> <script type="text/javascript"> var scroller = null; var scrollbar = null; window.onload = function () {
scroller = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
} </script> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
</body> </html>
</source>
ScrollBar 4
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jsScrollbar</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .Scroller-Container {
position: absolute; top: 0px; left: 0px;
} .Scrollbar-Up {
position: absolute; width: 10px; height: 10px; background-color: #CCC; font-size: 0px;
} .Scrollbar-Track {
width: 10px; height: 160px; position: absolute; top: 20px; background-color: #EEE;
} .Scrollbar-Handle {
position: absolute; width: 10px; height: 30px; background-color: #CCC;
} .Scrollbar-Down {
position: absolute; top: 190px; width: 10px; height: 10px; background-color: #CCC; font-size: 0px;
}
- Scrollbar-Container {
position: absolute; top: 50px; left: 460px;
}
- Container {
position: absolute; top: 50px; left: 50px; width: 400px; height: 200px; background-color: #EEE;
}
- News, #About, #Extra {
position: absolute; top: 10px; overflow: hidden; width: 400px; height: 180px; display: none;
}
- News {display: block;}
p {
margin: 0; padding: 0px 20px 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 20px; color: #777;
}
- Navigation {
position: absolute; top: 30px; left: 75px;
}
- Navigation a {
margin: 5px 2px 0 0; padding: 0 5px; height: 20px; background-color: #E4E4E4; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #AAA; text-decoration: none; display: block; float: left; letter-spacing: 1px;
}
- Navigation a:hover {
margin-top: 0px; height: 25px;
}
- Navigation a.current {
margin-top: 0px; height: 25px; background-color: #EEE; color: #777;
} </style> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
}; </script> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScrollbar (o, s, a, ev) {
var self = this;
this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);
this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();
if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent("on"+ t, f);
else o["on"+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent("on"+ t, f);
else o["on"+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;
e = e ? e : event;
if (!e.target) e.target = e.srcElement;
if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};
self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);
return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}
self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;
self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);
if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };
if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;
this._yHandle.style.top = y +"px";
this._y = y;
this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};
this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
this._src.swapContent(o, w, h);
this.reset();
};
this.reset();
}; </script> <script type="text/javascript"> var scroller = null; var scrollbar = null; window.onload = function () {
scroller = new jsScroller(document.getElementById("News"), 400, 180);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true, scrollbarEvent);
} function scrollbarEvent (o, type) {
if (type == "mousedown") {
if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#E3E3E3";
else o.style.backgroundColor = "#BBB";
} else {
if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#EEE";
else o.style.backgroundColor = "#CCC";
}
} function swapIt(o) {
o.blur();
if (o.className == "current") return false;
var list = document.getElementById("Navigation").getElementsByTagName("a");
for (var i = 0; i < list.length; i++) {
if (list[i].className == "current") {
list[i].className = "";
document.getElementById(list[i].title).y = -scroller._y;
}
if (list[i].title == o.title) o.className = "current";
}
list = document.getElementById("Container").childNodes;
for (var i = 0; i < list.length; i++) {
if (list[i].tagName == "DIV") list[i].style.display = "none";
}
var top = document.getElementById(o.title);
top.style.display = "block";
scrollbar.swapContent(top);
if (top.y) scrollbar.scrollTo(0, top.y);
return false;
} </script> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
</body> </html>
</source>
ScrollBar 5
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jsScrollbar</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .Scroller-Container {
position: absolute; top: 0px; left: 0px;
} .Scrollbar-Up {
position: absolute; width: 10px; height: 10px; background-color: #CCC; font-size: 0px;
} .Scrollbar-Track {
width: 10px; height: 160px; position: absolute; top: 20px; background-color: #EEE;
} .Scrollbar-Handle {
position: absolute; width: 10px; height: 30px; background-color: #CCC;
} .Scrollbar-Down {
position: absolute; top: 190px; width: 10px; height: 10px; background-color: #CCC; font-size: 0px;
}
- Scrollbar-Container {
position: absolute; top: 50px; left: 460px;
}
- Container {
position: absolute; top: 50px; left: 50px; width: 400px; height: 200px; background-color: #EEE;
}
- News, #About, #Extra {
position: absolute; top: 10px; overflow: hidden; width: 400px; height: 180px; display: none;
}
- News {display: block;}
p {
margin: 0; padding: 0px 20px 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 20px; color: #777;
}
- Navigation {
position: absolute; top: 30px; left: 75px;
}
- Navigation a {
margin: 5px 2px 0 0; padding: 0 5px; height: 20px; background-color: #E4E4E4; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #AAA; text-decoration: none; display: block; float: left; letter-spacing: 1px;
}
- Navigation a:hover {
margin-top: 0px; height: 25px;
}
- Navigation a.current {
margin-top: 0px; height: 25px; background-color: #EEE; color: #777;
}
- Tween {
position: absolute; top: 50px; left: 490px; width: 100px;
}
- Steps {
position: absolute; top: 275px; left: 50px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #AAA;
}
- Tween a, #Steps a {
padding: 5px 10px; display: block; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #AAA; text-decoration: none;
}
- Tween a:hover, #Steps a:hover {
color: #777;
} </style> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
}; </script> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScrollbar (o, s, a, ev) {
var self = this;
this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);
this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();
if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent("on"+ t, f);
else o["on"+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent("on"+ t, f);
else o["on"+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;
e = e ? e : event;
if (!e.target) e.target = e.srcElement;
if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};
self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);
return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}
self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;
self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);
if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };
if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;
this._yHandle.style.top = y +"px";
this._y = y;
this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};
this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
this._src.swapContent(o, w, h);
this.reset();
};
this.reset();
}; </script> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScrollerTween (o, t, s) {
var self = this;
this._tweenTo = function (y) {
if (self._idle) {
var tHeight = self._parent._src ? self._parent._src.totalHeight : self._parent.totalHeight;
var vHeight = self._parent._src ? self._parent._src.viewableHeight : self._parent.viewableHeight;
var scrollY = self._parent._src ? self._parent._src._y : self._parent._y;
if (y < 0) y = 0;
if (y > tHeight - vHeight) y = tHeight - vHeight;
var dist = y - (-scrollY);
self._inc = 0;
self._timer = null;
self._values = [];
self._idle = false;
for (var i = 0; i < self.steps.length; i++) {
self._values[i] = Math.round((-scrollY) + dist * (self.steps[i] / 100));
}
self._timer = window.setInterval(function () {
self._parent.scrollTo(0, self._values[self._inc]);
if (self._inc == self.steps.length-1) {
window.clearTimeout(self._timer);
self._idle = true;
} else self._inc++;
}, self.stepDelay);
}
};
this._tweenBy = function (y) {
var scrollY = self._parent._src ? self._parent._src._y : self._parent._y;
self._tweenTo(-scrollY + y);
};
this._trackTween = function (e) {
e = e ? e : event;
self._parent.canScroll = false;
var curY = e.clientY + document.body.scrollTop;
self._tweenTo((curY - self._parent._trackTop - self._parent._handleHeight/2) * self._parent._ratio);
};
this.stepDelay = 40;
this.steps = s?s:[0,25,50,70,85,95,97,99,100];
this._values = [];
this._parent = o;
this._timer = [];
this._idle = true;
o.tweenTo = this._tweenTo;
o.tweenBy = this._tweenBy;
o.trackTween = this._trackTween;
if (t) o._scrollTrack = function (e) {
this.trackTween(e);
};
}; </script> <script type="text/javascript"> var scroller = null; var scrollbar = null; var scrollTween = null; var set_one = [0,1,3,6,10,15,21,28,36,45,55,64,72,79,85,90,94,97,99,100]; var set_two = [0,25,50,70,85,95,97,99,100]; var set_three = [0,10,20,30,40,50,60,70,80,90,100]; var set_four = [0,25,50,70,85,95,100,105,101,97,100,99,100]; window.onload = function () {
scroller = new jsScroller(document.getElementById("News"), 400, 180);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true, scrollbarEvent);
scrollTween = new jsScrollerTween (scrollbar, true);
scrollbar._scrollDist = 10;
} function swapSteps (w) {
scrollTween.steps = w;
} function scrollbarEvent (o, type) {
if (type == "mousedown") {
if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#E3E3E3";
else o.style.backgroundColor = "#BBB";
} else {
if (o.className == "Scrollbar-Track") o.style.backgroundColor = "#EEE";
else o.style.backgroundColor = "#CCC";
}
} function swapIt(o) {
o.blur();
if (o.className == "current") return false;
var list = document.getElementById("Navigation").getElementsByTagName("a");
for (var i = 0; i < list.length; i++) {
if (list[i].className == "current") {
list[i].className = "";
document.getElementById(list[i].title).y = -scroller._y;
}
if (list[i].title == o.title) o.className = "current";
}
list = document.getElementById("Container").childNodes;
for (var i = 0; i < list.length; i++) {
if (list[i].tagName == "DIV") list[i].style.display = "none";
}
var top = document.getElementById(o.title);
top.style.display = "block";
scrollbar.swapContent(top);
if (top.y) scrollbar.scrollTo(0, top.y);
return false;
} </script> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.
<a href="javascript:scrollbar.tweenTo(0);">tweenTo(0)</a> <a href="javascript:scrollbar.tweenTo(25);">tweenTo(25)</a> <a href="javascript:scrollbar.tweenTo(120);">tweenTo(120)</a> <a href="javascript:scrollbar.tweenTo(350);">tweenTo(350)</a> <a href="javascript:scrollbar.tweenTo(500);">tweenTo(500)</a> <a href="javascript:scrollbar.tweenBy(25);">tweenBy(25)</a> <a href="javascript:scrollbar.tweenBy(50);">tweenBy(50)</a> <a href="javascript:scrollbar.tweenBy(100);">tweenBy(100)</a> <a href="javascript:scrollbar.tweenBy(-50);">tweenBy(-50)</a>
Change Tween/Set steps (percent of distance): <a href="javascript:swapSteps(set_one);">[0,1,3,6,10,15,21,28,36,45,55,64,72,79,85,90,94,97,99,100]</a> <a href="javascript:swapSteps(set_two);">[0,25,50,70,85,95,97,99,100]</a> <a href="javascript:swapSteps(set_three);">[0,10,20,30,40,50,60,70,80,90,100]</a> <a href="javascript:swapSteps(set_four);">[0,25,50,70,85,95,100,105,101,97,100,99,100]</a>
</body> </html>
</source>
ScrollBar 6
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example Blog</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body {
background-image: url(scrollImages/blog_background.jpg); background-repeat: no-repeat;
}
- Container {
position: absolute; top: 60px; left: 60px; width: 270px; height: 330px; overflow: hidden;
} .Scroller-Container { position: absolute; background: transparent; } h3 {
margin: 0 0 5px 0; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 14px; color: #0B6589;
} p {
margin: 0 0 5px 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #054C68; text-align: justify; text-indent: 10px;
}
- Scrollbar-Container {
position: absolute; top: 55px; left: 335px; width: 10px; height: 340px;
} .Scrollbar-Track {
width: 10px; height: 340px;
} .Scrollbar-Handle {
position: absolute; width: 10px; height: 50px; background-color: #C6E7F4;
}
- sbLine {
position: absolute; width: 6px; height: 5px; left: 7px; background-color: #B5D6E3; font-size: 0px;
}
- List {
position: absolute; top: 50px; left: 380px;
}
- List a {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #7ABAD3; display: block; text-decoration: none; padding: 3px;
}
- List a:hover {
color: #0B6589;
} </style> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
}; </script> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScrollbar (o, s, a, ev) {
var self = this;
this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);
this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();
if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent("on"+ t, f);
else o["on"+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent("on"+ t, f);
else o["on"+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;
e = e ? e : event;
if (!e.target) e.target = e.srcElement;
if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};
self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);
return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}
self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;
self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);
if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };
if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;
this._yHandle.style.top = y +"px";
this._y = y;
this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};
this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
this._src.swapContent(o, w, h);
this.reset();
};
this.reset();
}; </script> <script type="text/javascript"> //Written by Nathan Faubion: http://n-son.ru //Use this or edit how you want, just give me //some credit! function jsScrollerTween (o, t, s) {
var self = this;
this._tweenTo = function (y) {
if (self._idle) {
var tHeight = self._parent._src ? self._parent._src.totalHeight : self._parent.totalHeight;
var vHeight = self._parent._src ? self._parent._src.viewableHeight : self._parent.viewableHeight;
var scrollY = self._parent._src ? self._parent._src._y : self._parent._y;
if (y < 0) y = 0;
if (y > tHeight - vHeight) y = tHeight - vHeight;
var dist = y - (-scrollY);
self._inc = 0;
self._timer = null;
self._values = [];
self._idle = false;
for (var i = 0; i < self.steps.length; i++) {
self._values[i] = Math.round((-scrollY) + dist * (self.steps[i] / 100));
}
self._timer = window.setInterval(function () {
self._parent.scrollTo(0, self._values[self._inc]);
if (self._inc == self.steps.length-1) {
window.clearTimeout(self._timer);
self._idle = true;
} else self._inc++;
}, self.stepDelay);
}
};
this._tweenBy = function (y) {
var scrollY = self._parent._src ? self._parent._src._y : self._parent._y;
self._tweenTo(-scrollY + y);
};
this._trackTween = function (e) {
e = e ? e : event;
self._parent.canScroll = false;
var curY = e.clientY + document.body.scrollTop;
self._tweenTo((curY - self._parent._trackTop - self._parent._handleHeight/2) * self._parent._ratio);
};
this.stepDelay = 40;
this.steps = s?s:[0,25,50,70,85,95,97,99,100];
this._values = [];
this._parent = o;
this._timer = [];
this._idle = true;
o.tweenTo = this._tweenTo;
o.tweenBy = this._tweenBy;
o.trackTween = this._trackTween;
if (t) o._scrollTrack = function (e) {
this.trackTween(e);
};
}; </script> <script type="text/javascript"> window.onload = function () {
scroller = new jsScroller(document.getElementById("Container"), 270, 330);
scrollbar = new jsScrollbar(document.getElementById("Scrollbar-Container"), scroller, true);
scrollTween = new jsScrollerTween(scrollbar, true);
scrollTween.stepDelay = 30;
scrollbar._moveContentOld = scrollbar._moveContent;
scrollbar._moveContent = function () {
this._moveContentOld();
var percent = this._y/(this._trackHeight - this._handleHeight);
document.getElementById("sbLine").style.top = Math.round((this._handleHeight - 5) * percent) +"px";
};
findTags ("h3", document.getElementById("Container"));
} function findTags (tag, parent) {
var tags = parent.getElementsByTagName(tag);
var cont = document.getElementById("Links");
for (var i = 0; i < tags.length; i++) {
cont.innerHTML += "<a href=\"javascript:scrollbar.tweenTo("+ tags[i].offsetTop +")\">"+ tags[i].innerHTML +"</a>";
}
} </script> </head> <body>
This Script
Finds all the h3 tags and their position within the container. It then generates tweenTo() links so you can make it scroll to the different title. Pretty cool, huh?
Chicken
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque metus in lectus. Sed sed sapien sed eros rhoncus facilisis. Morbi vestibulum, diam non tincidunt imperdiet, ligula quam lacinia enim, molestie venenatis massa ante a erat. Nunc sed justo quis lorem posuere molestie. Nam eget orci sagittis risus imperdiet aliquet. Nullam est ipsum, sagittis id, varius ac, cursus ut, leo. Morbi ultricies ligula eget massa. Ut sagittis dui ac risus. Phasellus facilisis nunc ac sapien luctus ullamcorper. Nulla ullamcorper lacinia turpis. Maecenas varius. Proin volutpat odio quis nisl. Ut vitae nibh. Cras pharetra placerat mauris. Donec consequat pretium wisi. Suspendisse non eros. Donec pulvinar diam vitae velit. Proin aliquam tortor vel pede faucibus interdum.
Alligator Head
Nam mollis rhoncus purus. Aenean venenatis, nunc et rhoncus sodales, lacus mi malesuada metus, id rhoncus massa pede id mauris. Nullam faucibus. Sed sollicitudin massa id felis. Suspendisse leo quam, laoreet nec, eleifend et, convallis vel, lectus. In nonummy bibendum dui. Quisque ultrices wisi sollicitudin neque. Aenean consectetuer tincidunt tortor. Nulla et elit et nunc facilisis tempus. Nullam nisl augue, varius vel, tincidunt at, volutpat sit amet, justo.
Cah-lee-forn-ee-ya
Suspendisse suscipit pretium libero. Quisque nibh. Donec orci erat, semper at, dictum non, pharetra eu, turpis. Vestibulum dui ante, porttitor commodo, ullamcorper et, pellentesque in, mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eget sem eu metus cursus consequat. Cras tincidunt feugiat sem. Nunc quis ligula eget libero tempus elementum. Ut lacinia. Praesent sit amet nisl nec eros porta ultrices. Sed id felis. Duis tellus. Ut vehicula mi eu diam. In lobortis dignissim wisi. Morbi non felis. In consectetuer elit sit amet urna.
Another One
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque metus in lectus. Sed sed sapien sed eros rhoncus facilisis. Morbi vestibulum, diam non tincidunt imperdiet, ligula quam lacinia enim, molestie venenatis massa ante a erat. Nunc sed justo quis lorem posuere molestie. Nam eget orci sagittis risus imperdiet aliquet. Nullam est ipsum, sagittis id, varius ac, cursus ut, leo. Morbi ultricies ligula eget massa. Ut sagittis dui ac risus. Phasellus facilisis nunc ac sapien luctus ullamcorper. Nulla ullamcorper lacinia turpis. Maecenas varius. Proin volutpat odio quis nisl. Ut vitae nibh. Cras pharetra placerat mauris. Donec consequat pretium wisi. Suspendisse non eros. Donec pulvinar diam vitae velit. Proin aliquam tortor vel pede faucibus interdum.
Recent Posts
</body> </html>
</source>
ScrollBar with background image
<source lang="html4strict">
<html> <head> <title>DynAPI Examples - ScrollBar</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.api");
dynapi.library.include("ScrollBar");
dynapi.library.include("ButtonFlatStyle"); // (optional)
dynapi.library.include("ButtonImageStyle"); // (optional)
</script> <script language="Javascript">
//Styles.addStyle("ScrollBarButton",ButtonFlatStyle);
vbar=new ScrollBar("vert",100,100,200,0,50)
vbar.setSmallChange(1);
vbar.setLargeChange(10);
vbar.onscroll=function(e){
status=vbar.getValue()
}
hbar=new ScrollBar("horz",150,100,100,1,50)
hbar.setSmallChange(1);
hbar.setLargeChange(5);
//hbar.setLocalStyleAttribute("backColor","#C0C0C0");
//hbar.btnUp.setStyle("ButtonFlat");
hbar.onscroll=function(e){
status=hbar.getValue();
}
dynapi.document.addChild(hbar)
dynapi.document.addChild(vbar)
var s = ButtonImageStyle();
s.setStyleAttribute("imageOff",dynapi.functions.getImage("./dynapiexamples/images/btn_sbar_off.gif",16,16));
s.setStyleAttribute("imageOn",dynapi.functions.getImage("./dynapiexamples/images/btn_sbar_on.gif",16,16));
Styles.addStyle("GreenButton",s);
var xbar = new ScrollBar("vert",120,100,200,0,150)
xbar.setLocalStyleAttribute("imageTrack",dynapi.functions.getImage("./dynapiexamples/images/sbarbg.gif",16,16));
xbar.btnUp.setStyle("GreenButton");
xbar.btnDown.setStyle("GreenButton");
xbar.knob.setLocalStyleAttribute("backColor","#269A01");
xbar.knob.setLocalStyleAttribute("borderColor","green");
xbar.knob.setLocalStyleAttribute("lightColor","#53CE0F");
xbar.setSmallChange(1);
xbar.setLargeChange(10);
xbar.onscroll=function(e){
status=xbar.getValue()
}
dynapi.document.addChild(xbar)
</script> </head> <body bgcolor="#ffffff"> <a href="#" onclick="hbar.setSize(null,hbar.h+10)">Adjust Vert-bar Height</a> <script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source><A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
