Custom scroll bar 2
<!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.com</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>
<!-- dom-drag.js -->
<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>
<!-- ypSimpleScrollC.js -->
<script type="text/javascript" >
/* =======================================================
* ypSimpleScroll
* 3/11/2001
*
* http://www.youngpup.net/
* ======================================================= */
// Modified by Sergi Meseguer (www.zigotica.com) 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>
<!-- scroller.js -->
<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.com/), 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 = '<div class="up" id="up'+count+'">'+
'<a href="#" onmouseover="theScroll['+count+'].scrollNorth(\''+count+'\')" '+
'onmouseout="theScroll['+count+'].endScroll()" onclick="return false;">'+
'<img src="textScrollUp.gif" width="15" height="15"></a></div>'+
'<div class="dn" id="dn'+count+'"">'+
'<a href="#" onmouseover="theScroll['+count+'].scrollSouth(\''+count+'\')" '+
'onmouseout="theScroll['+count+'].endScroll()" onclick="return false;">'+
'<img src="textScrollDown.gif" width="15" height="15"></a></div>'+
'<div class="thumb" id="'+thumb+'" style="left: 135px; top: 15px;">'+
'<img src="brownThumb.gif" width="15" height="15"></div>';
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.com/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>
<div class="root" id="root0">
<div class="scrollContainer" id="scroll0Container">
<div class="scrollContent" id="scroll0Content">
<h4>Example one</h4>
<p>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?</p>
<ol>
<li><strong>Mix with structure</strong>: 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.</li>
<li><strong>Initialization</strong>: the ideal solution is the script being initialized
automatically on page load</li>
<li><strong>Assign actions with an event handler</strong>: 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. </li>
<li><strong>Compatibility</strong>: browsers that dont understand the code must do without
it throwing no error messages. </li>
<li><strong>Capacities detection</strong>: to allow the previous point be true we will use
object detection instead of browser detection.</li>
</ol>
<p>Ending example one.</p>
</div>
</div>
</div>
<div class="root" id="root1">
<div class="scrollContainer" id="scroll1Container">
<div class="scrollContent" id="scroll1Content">
<h4>Example two</h4>
<h5>Table of Contents from titles (TOC)</h5>
<p>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).</p>
<h5>Form validator</h5>
<p>This script reads all text fields of a form making all "<em>required</em>" classes
having to be filled before sent to server, otherwise warning visually and through an alert.
If the field is named <em>email</em> it forces (with a regular expression) to use a
valid email.</p>
<p>Ending example two.</p>
</div>
</div>
</div>
</body>
</html>
TextScrollWith.zip( 8 k)Related examples in the same category