Javascript Scroller: an exercise in OOP

OOld javascript for a newsscroller

This code generator is provided for visitors searching for my old website on http://n.one.port5.com. At this point this scroller is no longer supported. I added the page just for completeness, not hiding any mistakes from the past. I created this script just for showing to my colleageus I could handle this. That way I've learned a lot about javascript and the way javascript objects are handled.

Using the script

Just fill out the form below and specify the parameters you which to change. Allways use the activate button to make sure all the changes you 've made are available to the generator

provide a name: No numbers and maximum 5 characters long

edit the content of your scroller in this textbox: content in here: no line breaks.HTML tags are allowed something like this: <a href="http://n.one.port5.com">Home page</a> or an image <img src="img/id_blue_88x31.gif" title="your image path in the src attribute" /> or a <h1 style="font-size:14px">HEADER</h1>. Please check your code
Use only valid HTML/CSS so make sure you check your markup.

height of the newsbox:

width of the newsbox:

background color: Specify the color in hex format without the #

border type: Note that not all border-types are supported.

border size:

border color: Specify the color in hex format without the #

width of the contentbox This value defaults to the width of the scrolling area

padding: Maximum 9 pixels

background color: Specify the color in hex format without the #

border: Note that not all border-types are supported.

top and bottom border size: Maximum 9 pixels

border color: Specify the color in hex format without the #

Please enter a value for the scrollingspeed: Maximum 9 but 1 or 2 will do the job

First activate the code with this button:

The code for the object: //** created: 11/02/03 by len dierickx //** http://n.one.port5.com //** contact: webmaster@n.one.port5.com //** Supported: Win/Mac: NN6+, IE4+, Op6+, Mozilla //** v1.3 added possibility to change the border through the object function scrollerObj(name,initH,initW,paddingB,widthB,content,initBg,Bg,speed,initBr,Br){ //**data**// this.name=name; this.initH=initH; this.initW=initW; this.paddingB=paddingB; this.widthB=widthB; this.content=content; this.initBg=initBg; this.Bg=Bg; this.speed=parseInt(speed); this.initBr=initBr; this.Br=Br; this.timer = name + "Timer"; this.elem; //**methods**// this.getElement = getElement; this.createLayer=createLayer; this.scrollLayer = scrollLayer; this.scrollLoop=scrollLoop; //**initiate methods**// this.createLayer(); this.getElement(); this.scrollLayer(); } //**call this method to stop scrolling**// function scrollLoop(s){ this.speed = s; } //**pretty obvious**// function scrollLayer(){ if(parseInt(this.elem.style.top)>(this.elem.offsetHeight*(-1))){ this.elem.style.top = parseInt(this.elem.style.top)-this.speed; //alert(parseInt(this.elem.style.top)+"\n"+this.elem.id); } else {this.elem.style.top = this.initH;} } //**get the specific dom-expression**// function getElement(){ if(document.getElementById){ this.elem = document.getElementById(this.name); } else if (document.all){ this.elem = document.all[name]; } else if (document.layers){ this.elem = document.layers[name]; } } //**pretty obvious - if NS4 - please upgrade to a standard compliant browser**// function createLayer(){ if(document.getElementById || document.all){ document.write('<div id="layer'+this.name+'" style="position:relative;overflow:hidden;background-color:#'+this.initBg+';border:'+this.initBr[0]+'px '+this.initBr[1]+' '+this.initBr[2]+';width:'+this.initW+'px;height:'+this.initH+'px;" onMouseover="'+this.name+'.scrollLoop(0)" onMouseout="'+this.name+'.scrollLoop('+this.speed+')">'); document.write('<div id="'+this.name+'" style="position:absolute;top:'+this.initH+'px;left:0px;border-bottom:'+this.Br[0]+'px '+this.Br[1]+' '+this.Br[2]+';border-top:'+this.Br[0]+'px '+this.Br[1]+' '+this.Br[2]+';width:'+this.widthB+'px;padding:'+this.paddingB+'px;background-color:#'+this.Bg+'">'); document.write(this.content); document.write('<\/div><\/div>'); } else if(document.layers){ document.write('<ilayer name="'+this.name+'" bgcolor="#'+this.Bg+'" width="'+this.widthB+'" height="'+this.heightB+'">'+this.content+'<\/ilayer'); return; } if(this.scrollLayer){ this.timer = setInterval(this.name+'.scrollLayer()','30'); } }

Working code to see the scroller Use the activate button.

This will open a new window wtih the scroller