Scroll Object [Source Code]
// Scroll Object
// Copyright 1998 Dan Steinman
// Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/)
// June 7, 1998. Last Updated Oct. 18, 1998.
// In order to use this code you must keep this disclaimer
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function Scroll(name,nestref,x,y,width,height) {
this.name = name
this.nestref = nestref
this.nest = (nestref)? nestref+'.document.' : ''
this.x = x
this.y = y
this.w = width
this.h = height
this.url = null
this.active = false
this.bar = new Object()
this.arrow = new Object()
this.arrow.active = false
this.box = new Object()
this.border = new Object()
this.setH = false
this.history = new Array()
this.historyLoc = -1
this.historyLen = -1
this.visibility = null
this.zIndex = null
this.contentRef = null
this.slideInc = 7
this.slideSpeed = 20
this.clipImages = true
this.usebuffer = true
this.obj = name+"Object"
eval(this.obj+"=this")
this.setMargins = ScrollSetMargins
this.setMargins(10,10,10,10)
this.setDimensions = ScrollSetDimensions
this.setDimensions(0,0,15,this.h,15,15,30,1)
this.setColors = ScrollSetColors
this.setColors(null,"#000000","#C5C5C5","#555555","#898989")
this.preload = ScrollPreload
this.setImages = ScrollSetImages
this.setImages()
this.setHeight = ScrollSetHeight
this.build = ScrollBuild
this.load = ScrollLoad
this.writeContent = ScrollWriteContent
this.back = ScrollBack
this.forward = ScrollForward
this.reload = ScrollReload
this.activate = ScrollActivate
this.jumpTo = ScrollJumpTo
this.mouseDown = ScrollMouseDown
this.mouseMove = ScrollMouseMove
this.mouseUp = ScrollMouseUp
this.arrowDown = ScrollArrowDown
this.arrowUp = ScrollArrowUp
this.arrowSlide = ScrollArrowSlide
}
function ScrollSetDimensions(barX,barY,barW,barH,arrowuH,arrowdH,boxH,border) {
this.arrow.uy = barY
this.arrow.dy = barY+barH-arrowdH
this.arrow.uh = arrowuH
this.arrow.dh = arrowdH
this.bar.x = barX+this.w
this.bar.y = barY+this.arrow.uh
this.bar.w = barW
this.bar.h = barH-this.arrow.uh-this.arrow.dh
this.box.h = boxH
this.border.v = border
}
function ScrollSetColors(bg,border,bar,arrow,box) {
this.bgcolor = bg
this.border.color = border
this.bar.color = bar
this.arrow.color = arrow
this.box.color = box
}
function ScrollSetMargins(l,r,t,b) {
this.marginL = l
this.marginR = r
this.marginT = t
this.marginB = b
}
function ScrollPreload(imgObj,imgSrc) {
if (imgSrc) {
eval(imgObj+' = new Image()')
eval(imgObj+'.src = "'+imgSrc+'"')
eval(imgObj+'s = true')
}
else eval(imgObj+'s = false')
}
function ScrollSetImages(box0,box1,up0,up1,dn0,dn1,bar) {
this.preload(this.obj+'.box.image0',box0)
this.preload(this.obj+'.box.image1',box1)
this.preload(this.obj+'.arrow.upimage0',up0)
this.preload(this.obj+'.arrow.upimage1',up1)
this.preload(this.obj+'.arrow.dnimage0',dn0)
this.preload(this.obj+'.arrow.dnimage1',dn1)
this.preload(this.obj+'.bar.image',bar)
this.bar.imageW = this.bar.w
this.bar.imageH = this.bar.h
}
function ScrollBuild() {
var nm = this.name
var b = this.border.v
var bw = this.bar.w
var ml = this.marginL
var mr = this.marginR
var mt = this.marginT
var bc = this.border.color
this.css = '<STYLE TYPE="text/css"<\n'+
css(nm+'Scroll',this.x,this.y,null,null,null,this.visibility,this.zIndex)+
css(nm+'BG',0,0,this.w,this.h,this.bgcolor)+
css(nm+'BorderT',0,0,this.w,b,bc)+
css(nm+'BorderB',0,this.h-b,this.w,b,bc)+
css(nm+'BorderL',0,0,b,this.h,bc)+
css(nm+'BorderR',this.w-b,0,b,this.h,bc)+
css(nm+'ArrowU',this.bar.x,this.arrow.uy,bw,((this.clipImages)?this.arrow.uh:null),this.arrow.color)+
css(nm+'ArrowD',this.bar.x,this.arrow.dy,bw,((this.clipImages)?this.arrow.dh:null),this.arrow.color)+
css(nm+'ArrowUC',this.bar.x,this.arrow.uy,bw,this.arrow.uh)+
css(nm+'ArrowDC',this.bar.x,this.arrow.dy,bw,this.arrow.dh)+
css(nm+'Bar',this.bar.x,this.bar.y,bw,((this.clipImages)?this.bar.h:null),this.bar.color)+
css(nm+'BarC',this.bar.x,this.bar.y,bw,this.bar.h)+
css(nm+'Box',0,0,bw,((this.clipImages)?this.box.h:null),this.box.color,'hidden')+
css(nm+'TextC',b+ml,b,this.w-2*b-ml-mr,this.h-2*b)+
css(nm+'TextT',0,mt,this.w-2*b-ml-mr)+
'</STYLE<'
this.divStart = ''
if (ie4 && this.usebuffer) this.divStart += '<IFRAME NAME="'+nm+'Frame" WIDTH=0 HEIGHT=0 STYLE="display:none"<</IFRAME<\n'
this.divStart += '<DIV ID="'+nm+'Scroll"<\n'+
'<DIV ID="'+nm+'BG"<</DIV<\n'+
'<DIV ID="'+nm+'BorderT"<</DIV<\n'+
'<DIV ID="'+nm+'BorderB"<</DIV<\n'+
'<DIV ID="'+nm+'BorderL"<</DIV<\n'+
'<DIV ID="'+nm+'BorderR"<</DIV<\n'+
'<DIV ID="'+nm+'TextC"<\n'
if (ie4 && !this.usebuffer) this.divStart += '<IFRAME NAME="'+nm+'Frame" WIDTH='+(this.w-2*b-ml-mr)+' HEIGHT='+(this.h-2*b)+' MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING="NO" FRAMEBORDER="NO"<</IFRAME<\n'
else this.divStart += '<DIV ID="'+nm+'TextT"<\n'
this.divEnd = '</DIV<\n'
if (ns4 || this.usebuffer) this.divEnd += '</DIV<\n'
this.divEnd += '<DIV ID="'+nm+'Bar"<\n'
if (this.bar.images) this.divEnd += '<IMG SRC="'+this.bar.image.src+'" WIDTH="'+this.bar.imageW+'" HEIGHT="'+this.bar.imageH+'"<\n'
this.divEnd += '<DIV ID="'+nm+'Box"<'
if (this.box.image0s) this.divEnd += '<IMG NAME="'+nm+'BoxImg" SRC="'+this.box.image0.src+'"<'
this.divEnd += '</DIV<</DIV<\n<DIV ID="'+nm+'ArrowU"<'
if (this.arrow.upimage0s) this.divEnd += '<IMG NAME="'+nm+'UpImg" SRC="'+this.arrow.upimage0.src+'"<'
this.divEnd += '</DIV<<DIV ID="'+nm+'ArrowD"<'
if (this.arrow.dnimage0s) this.divEnd += '<IMG NAME="'+nm+'DnImg" SRC="'+this.arrow.dnimage0.src+'"<'
this.divEnd += '</DIV<\n'+
'<DIV ID="'+nm+'BarC"<</DIV<\n'+
'<DIV ID="'+nm+'ArrowUC"<</DIV<\n'+
'<DIV ID="'+nm+'ArrowDC"<</DIV<\n'+
'</DIV<'
this.div = this.divStart+this.divEnd
document.write(this.css)
}
function ScrollActivate() {
if (ie4 && this.usebuffer && parent.frames[this.name+'Frame'].document.body.innerHTML) document.all[this.name+'TextT'].innerHTML = parent.frames[this.name+'Frame'].document.body.innerHTML
this.lyr = new ScrollDynLayer(this.name+'Scroll',((this.nestref)?this.nestref:null))
if (ie4 && !this.usebuffer) {this.textlyr = new ScrollDynLayer('content',null,this.name+'Frame'); this.contentRef = this.name+'content'}
else {this.textlyr = new DynLayer(this.name+'TextT',this.nest+this.name+'Scroll.document.'+this.name+'TextC');
this.contentRef = ((this.nestref)?this.nestref+'.document.':'')+this.name+'Scroll.document.'+this.name+'TextC.document.'+this.name+'TextT'}
if (ns4) {this.textlyr.clipInit(); this.textlyr.clipTo(null,this.w-2*this.border.v)}
this.boxlyr = new DynLayer(this.name+'Box',this.nest+this.name+'Scroll.document.'+this.name+'Bar')
this.arrowur = new DynLayer(this.name+'ArrowU',this.nest+this.name+'Scroll')
this.arrowu = new DynLayer(this.name+'ArrowUC',this.nest+this.name+'Scroll')
this.arrowu.event.obj = this.name
this.arrowu.event.dir = 1
this.arrowu.event.onmousedown = ScrollArrowDownStart
this.arrowu.event.onmouseup = ScrollArrowUpStart
this.arrowu.event.onmouseout = ScrollArrowUpStart
if (ns4) this.arrowu.event.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
this.arrowdr = new DynLayer(this.name+'ArrowD',this.nest+this.name+'Scroll')
this.arrowd = new DynLayer(this.name+'ArrowDC',this.nest+this.name+'Scroll')
this.arrowd.event.obj = this.name
this.arrowd.event.dir = -1
this.arrowd.event.onmousedown = ScrollArrowDownStart
this.arrowd.event.onmouseup = ScrollArrowUpStart
this.arrowd.event.onmouseout = ScrollArrowUpStart
if (ns4) this.arrowd.event.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
this.barlyr = new DynLayer(this.name+'BarC',this.nest+this.name+'Scroll')
this.barlyr.event.obj = this.name
this.barlyr.event.onmousedown = ScrollMouseDownStart
this.barlyr.event.onmousemove = ScrollMouseMoveStart
this.barlyr.event.onmouseup = ScrollMouseUpStart
this.barlyr.event.onmouseout = ScrollArrowUpStart
if (ns4) this.barlyr.event.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE)
if (!this.setH) this.textHeight = (ns4)? this.textlyr.doc.height : this.textlyr.event.scrollHeight
this.setH = false
if (ns4) this.textlyr.css.clip.bottom = Math.max(this.textHeight,this.h-2*this.border.v-this.marginT)
this.ratio = (this.textHeight+this.marginT+this.marginB-this.h+2*this.border.v)/(this.bar.h-this.box.h)
this.jumpTo('top')
if (this.ratio<0) this.boxlyr.css.visibility = 'inherit'
else this.boxlyr.hide()
}
function ScrollLoad(url) {
if (url != this.url) {
this.historyLoc += 1
this.historyLen = this.historyLoc
this.history[this.historyLen] = url
this.reload()
}
}
function ScrollBack() {
if (this.historyLoc < 0) {
this.historyLoc -= 1
this.reload()
}
}
function ScrollForward() {
if (this.historyLoc < this.historyLen) {
this.historyLoc += 1
this.reload()
}
}
function ScrollReload() {
this.url = this.history[this.historyLoc]
this.refresh = true
if (ns4) eval('document.'+this.nest+this.name+'Scroll.document.'+this.name+'TextC.document.'+this.name+'TextT.src = "'+this.url+'"')
else if (ie4) parent.frames[this.name+'Frame'].document.location = this.url
}
function ScrollJumpTo(y) {
var by,ty
if (y == "top") {
by = 0
ty = this.marginT
}
else if (y=="bottom" && this.ratio<0) {
by = this.bar.h-this.box.h
ty = -this.ratio*by+this.marginT
}
else if (y<this.textHeight) {
ty = -y
by = (ty-this.marginT)/-this.ratio
}
this.textlyr.moveTo(0,ty)
this.boxlyr.moveTo(0,by)
}
function ScrollSetHeight(h) {
this.textHeight = h
this.setH = true
this.activate()
}
function ScrollMouseDownStart(e) {
if (ie4 && event.button==2) return false
var y = (ns4)? e.layerY : event.offsetY
eval(this.obj+'.mouseDown('+y+')')
return false
}
function ScrollMouseDown(y) {
if (this.ratio<=0) return
var boxh = this.box.h
var boxy = this.boxlyr.y
if (y<=boxy && y<boxy+boxh) {
if (this.box.image1s) this.boxlyr.doc.images[this.name+"BoxImg"].src = this.box.image1.src
this.clickYnew = y-boxy
this.clickYold = y
this.active = true
}
else {
if (y<=boxh/2) this.boxlyr.moveTo(0,0)
else if (y<=this.bar.h-boxh/2) this.boxlyr.moveTo(0,this.bar.h-boxh)
else this.boxlyr.moveTo(0,y-boxh/2)
if (this.box.image1s) this.boxlyr.doc.images[this.name+"BoxImg"].src = this.box.image1.src
this.textlyr.moveTo(0,-this.ratio*(this.boxlyr.y)+this.marginT)
this.clickYnew = y-this.boxlyr.y
this.clickYold = y
this.active = true
}
}
function ScrollMouseUpStart() {
eval(this.obj+'.mouseUp()')
}
function ScrollMouseUp() {
this.active = false
if (this.box.image1s) this.boxlyr.doc.images[this.name+"BoxImg"].src = this.box.image0.src
}
function ScrollMouseMoveStart(e) {
var y = (ns4)? e.layerY : event.offsetY
eval(this.obj+'.mouseMove('+y+')')
return false
}
function ScrollMouseMove(y) {
if (!this.active) return false
var diff = y-this.clickYold
var boxy = this.boxlyr.y
var barh = this.bar.h-this.box.h
if (boxy+diff<0 || boxy+diff<barh) {
if (boxy+diff<0) this.boxlyr.moveTo(0,0)
else this.boxlyr.moveTo(0,barh)
this.clickYold = boxy+this.clickYnew
}
else {
this.boxlyr.moveTo(0,y-this.clickYnew)
this.clickYold = y
}
this.textlyr.moveTo(0,-this.ratio*(this.boxlyr.y)+this.marginT)
return false
}
function ScrollArrowDownStart() {
if (eval(this.obj+'.ratio<0')) eval(this.obj+'.arrowDown('+this.dir+')')
return false
}
function ScrollArrowDown(dir) {
this.arrow.active = true
if (dir==1 && this.arrow.upimage1s) this.arrowur.doc.images[this.name+"UpImg"].src = this.arrow.upimage1.src
if (dir==-1 && this.arrow.dnimage1s) this.arrowdr.doc.images[this.name+"DnImg"].src = this.arrow.dnimage1.src
this.arrowSlide(dir)
}
function ScrollArrowMove() {
return false
}
function ScrollArrowUpStart() {
if (eval(this.obj+'.ratio<0')) eval(this.obj+'.arrowUp()')
return true
}
function ScrollArrowUp() {
this.arrow.active = false
this.active = false
if (this.arrow.upimage1s) this.arrowur.doc.images[this.name+"UpImg"].src = this.arrow.upimage0.src
if (this.arrow.dnimage1s) this.arrowdr.doc.images[this.name+"DnImg"].src = this.arrow.dnimage0.src
if (this.box.image1s) this.boxlyr.doc.images[this.name+"BoxImg"].src = this.box.image0.src
}
function ScrollArrowSlide(dir) {
if (this.arrow.active) {
if ((dir==1 && this.textlyr.y<this.marginT-this.slideInc) || (dir==-1 && this.textlyr.y<-(this.textHeight+2*this.border.v+this.marginB-this.h-this.slideInc))) {
this.textlyr.moveBy(0,dir*this.slideInc)
this.boxlyr.moveTo(0,(this.textlyr.y-this.marginT)/-this.ratio)
setTimeout(this.name+'.arrowSlide('+dir+')',this.slideSpeed)
}
else {
if (dir==1) this.textlyr.moveTo(0,this.marginT)
else if (dir==-1) this.textlyr.moveTo(0,-(this.textHeight+2*this.border.v+this.marginB-this.h))
this.boxlyr.moveTo(0,(this.textlyr.y-this.marginT)/-this.ratio)
}
}
}
function ScrollWriteContent(doc) {
if (!this.usebuffer && ie4) {
var str = '<STYLE TYPE="text/css"<'+
css('content',0,this.marginT,this.w-2*this.border.v-this.marginL-this.marginR)
str += '</STYLE<'
doc.write(str)
}
}
// Scroll DynLayer Object
// can control a layer in an IFRAME for IE 4 and does not have an event property
function ScrollDynLayer(id,nestref,iframe) {
if (ns4) {
this.css = (nestref)? eval("document."+nestref+".document."+id) : document.layers[id]
this.x = this.css.left
this.y = this.css.top
}
else if (ie4) {
this.css = (iframe)? parent.frames[iframe].document.all[id].style : document.all[id].style
this.x = this.css.pixelLeft
this.y = this.css.pixelTop
}
this.moveTo = DynLayerMoveTo
this.moveBy = DynLayerMoveBy
this.show = DynLayerShow
this.hide = DynLayerHide
this.addon = ScrollDynLayerAddon
this.addon(id,nestref,iframe)
}
function ScrollDynLayerAddon(id,nestref,iframe) {
this.id = id
this.nestref = nestref
this.w = (ns4)? this.css.clip.width : this.css.pixelWidth
this.h = (ns4)? this.css.clip.height : this.css.pixelHeight
this.doc = (ns4)? this.css.document : document
// event only for ie (caused problems in ns)
if (ie4) this.event = (iframe)? parent.frames[iframe].document.all[id] : document.all[id]
this.obj = id + "DynLayer"
eval(this.obj + "=this")
this.slideInit = DynLayerSlideInit
this.clipInit = DynLayerClipInit
this.wipeInit = DynLayerWipeInit
}
// Generic CSS function to return CSS syntax with the given parameters
function css(id,left,top,width,height,color,vis,z) {
var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'; top:'+top+'; ' : '#'+id+' {position:relative; '
if (width!=null) str += 'width:'+width+'; '
if (height!=null) str += 'height:'+height+'; clip:rect(0,'+width+','+height+',0); '
if (color!=null) str += 'background-color:'+color+'; layer-background-color:'+color+'; '
if (vis!=null) str += 'visibility: '+vis+'; '
if (z!=null) str += 'z-index: '+z+'; '
str += '}\n'
return str
}
Scroll Object: