|
Tips & Tricks for the Web
JavaScript Scrolling Info Box
This JavaScript is free at The JavaScript Source!!
MediaZeal will gladly help you with JavaScript problems. Learn more about our JavaScript Solutions.
|
Here's How to Use It
This is a nifty little scroller I found at The JavaScript Source. It's currently my favorite since it works cross-browser, stalls the scroll on mouseover and will include links.
There are 3 main elements is adapting this code for use on any site:
The main code to include in the head section
The code you use to place it in your page
The code to call the function when a page loads
Below you will find the necessary code, with comments on adapting it.
Here's the code to copy and place in the head section of your page:
<script language="JavaScript">
<!--//hide script
<!-- This script and many more are available free online at --->
<!-- The JavaScript Source!! http://javascript.internet.com --->
<!--Begin
//scroller width
var swidth=200
//scroller height
var sheight=70
//scroller's speed;
var sspeed=2
var mymessage=''
//text: change to your own
mymessage='<div align="left"><font style="color: #330000;">Your message goes here. You can use html, including links.</font></DIV>'
function start(){
if (document.all) return
if (document.getElementById){
document.getElementById("slider").style.visibility="show"
ns6marquee(document.getElementById('slider'))
}
else if(document.layers){
document.slider1.visibility="show"
ns4marquee(document.slider1.document.slider2)
}
}
function ns4marquee(whichlayer){
ns4layer=eval(whichlayer)
ns4layer.document.write(mymessage)
ns4layer.document.close()
sizeup=ns4layer.document.height
ns4layer.top-=sizeup
ns4slide()
}
function ns4slide(){
if (ns4layer.top>=sizeup*(-1)){
ns4layer.top-=sspeed
setTimeout("ns4slide()",100)
}
else{
ns4layer.top=sheight
ns4slide()
}
}
function ns6marquee(whichdiv){
ns6div=eval(whichdiv)
ns6div.innerHTML=mymessage
ns6div.style.top=sheight
sizeup=sheight
ns6slide()
}
function ns6slide(){
if (parseInt(ns6div.style.top)>=sizeup*(-1)){
ns6div.style.top=parseInt(ns6div.style.top)-sspeed
setTimeout("ns6slide()",100)
}
else{
ns6div.style.top=sheight
ns6slide()
}
}
// End --->
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//stop hiding script --->
</script>
|
|
|
|
JavaScript Scroller
Features: The scroll box above runs in both Netscape and IE. You can include links in the scrolling copy, and when you mouseover the scrolling text, it stops, allowing you to click on the links. Scroll speed, height and width are also adjustable.
|
|
This JavaScript automatically loads in IE, but you must call the function on page load in Netscape for it to work cross-browser. So be sure to include the following code.
Here's the code to paste into the body tag to call the function:
If you are calling more than one function onLoad, just stack them up (for example):
|
onLoad="preloadImages();start();"
|
|
Here's the code to paste into the page where you want the scroller:
<table cellpadding="5" cellspacing="0" border="0" align="center" width="210">
<tr>
<td bgcolor="#ffffff">
<span style="borderWidth:0; borderColor:#ffffff; width:200; height:70;">
<ilayer width=200 height=70 name="slider1" bgcolor="#ffffff" visibility=hide>
<layer name="slider2" onMouseOver="sspeed=0;" onMouseOut="sspeed=2"></layer>
</ilayer>
<script language="JavaScript">
if (document.all){
document.writeln('<marquee id="ieslider" scrollAmount=2 width=200 height=70 direction=up style="border:0 solid grey;background-color:#ffffff">')
document.writeln(mymessage)
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=2")
document.write('</marquee>')
}
if (document.getElementById&&!document.all){
document.write('<div style="position:relative;overflow:hidden;width:200;height:70;clip:rect(0 302 102 0); background-color:#ffffff;border:0px solid white;" onMouseover="sspeed=0;" onMouseout="sspeed=2">')
document.write('<div id="slider" style="position:relative;width:&{swidth};">')
document.write('</div></div>')
}
</script>
</span>
</td>
</tr>
</table>
|
|
Troubleshooting Tips
JavaScript is very sensitive. If you are having trouble, it may be that there is a space in the code from cutting & pasting it. Turn off wordwrap and take out spaces in your code. Lines end with a semi-colon; or the end of a statement >') like onMouseout="sspeed=2">')
To change the width of your scroll box: change the 200 in this variable var swidth=200 in the head section and the width in the 4 places it is mentioned in the section of code you paste into your page.
To change the height of your scroll box: change the 70 in this variable var sheight=70 in the head section and the height in the 4 places it is mentioned in the section of code you paste into your page.
To change the speed of the scroll: change the sspeed in the head section in the var sspeed=2
3 will make it scroll faster, 1 slower. Then change the sspeed to match in the section you have pasted into the page where it restarts after the mouseover
onMouseout="sspeed=2".
If it's not working in Netscape: check to be sure you pasted
onLoad="start();" in the body tag.
|
|
|
