newsscroller

[Total: 0    Average: 0/5]

This script will allow you to create several newssboxes on your site.

Head Code:

<script type="text/javascript"> 
<!-- 
function scrollerObj(name,initH,initW,height,width,content,initBg,Bg,speed,float){ 
//**data**// 
this.name=name; 
this.initH=initH; 
this.initW=initW; 
this.height=height; 
this.width=width; 
this.content=content; 
this.initBg=initBg; 
this.Bg=Bg; 
this.float=float; 
this.speed=parseInt(speed); 
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.initH){ 
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.elem.offsetHeight*(-1));} 
} 

//**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;float:'+this.float+';background-color:#'+this.initBg+';border:1px solid black;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:0px;left:0px;border:0px solid black;width:'+this.initW+'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.width+'" height="'+this.height+'">'+this.content+'</ilayer>'); 
return; 
} 
if(this.scrollLayer){ 
this.timer = setInterval(this.name+'.scrollLayer()','30'); 
} 
} 

//--> 


</script> 
<style media="screen" type="text/css"> 
/*<![CDATA[*/ 
<!-- 
BODY{ background-color:#99CCCC;} 
P{color:#465d5c;margin:3px;} 
A{color:#e86500} 
H1{color:#465d5c;font-size:11px;font-weight:normal;font-weight:bold;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;margin:3px; padding:0px} 
H2{color:#465d5c;font-size:11px;font-weight:bold;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;margin:3px; padding:0px} 
.art{font-weight:normal;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;width:100%;border-top:1px solid #FFFFFF;border-bottom:1px solid #FF7F00; padding:3px;margin-bottom:10px;text-align: justify;} 
.state{color:#e86500;margin-left:5px;margin-right:5px;} 
#art1{background-color:#FFBB00;} 
#art2{background-color:#FFCC00;} 
#art3{background-color:#FFDD00;} 
#art4{background-color:#FFEE00;} 
#main{background-image: url(img/bg_px_3.gif);background-color: #cc6600;width:600px;padding-bottom:75px;border:1px solid white} 
#logo{margin-left:10px; margin-top:3px; margin-bottom:10px; font-weight:bold;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;width:100%;} 
#date{font-size:9px; font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;color:#545454} 

--> 
/*]]>*/ 
</style> 

Body Code:

<div id="main"> 
<div id="logo"> 
n.one 
</div> 
<div class="art" id="art1"> 
<h1>newssscroller</h1><p>This scroller code will allow you to put several newsboxes on your site. You can put any valid html in the box, including images.</p><p>Please note that when you put the newsscroller in a table, this will not work in Mozilla. When you hover your mouse over the box when running Mozilla: not working either. If anybody knows whats going on please contact the author.</p></div> 
<div class="art" id="art2"> 
<h1>cut-n-paste instructions</h1> 
<p>There are two ways to adjust the scroller. The first and easiest one is by changing the attributes of the object. These are explained on the author's website in an article about the script. The other way is by changing and adding some css declarations in the inline style declaration created by te script. This requires for you to know some css.</div> 
<div class="art" id="art3"> 
<script type="text/javascript"> 
<!-- 
var c = new scrollerObj('c','300','100','50','100','<h1>newssscroller</h1><p>This scroller code will allow you to put several newsboxes on your site. You can put any valid html in the box, including images.</p><p>Please note that when you put the ooscroller in a table, this will not work in Mozilla. When you hover your mouse over the box when running Mozilla: not working either. If anybody knows whats going on please contact the author.</p>','FFDD00','cccccc','2','left'); 
//--> 
</script> 
<h1>Example with a header</h1> 
<p>A paragraph next to the scroller. Not to use table for lay-out, cause this can create some strange effects in Mozilla.</p> 
<table border="1"><tr><td><p>this table will do fine</p></td><td><p>cell: some data</p></td></tr><tr><td><p>cell: some data</p></td><td><p>cell: some data</p></td></tr></table> 
</div> 
<div class="art" id="art4"> 
<table><tr><td> 
<h1>Another example with a header</h1> 
<p>A paragraph next to the scroller. Not to use table for lay-out, cause this can create some strange effects in Mozilla.</p> 
<p>This is a layout with one scroller in a table.</p> 
</td><td><script type="text/javascript"> 
<!-- 
var b = new scrollerObj('b','200','100','50','100','b some more blabla','FFFFFF','FFBB00','3','right'); 
//--> 
</script></td></tr></table> 
</div> 

</div> 

Times Viewed: 5

Leave a Reply

Your email address will not be published. Required fields are marked *