scrolling vertical text box javascript code

Vertical scrolling test javascript.

Scrolling Vertical Text Box written in Javascript. Upward scrolling text that can also include a clickable link.

Home Hosting Javascripts HTML Scripts Webtemplates Sitemap PSP Tutorials

Handy Tip : Javascript code can be used to scroll your text upwards on your webpage. When your website visitor hovers their pointer over the text, it automatically stops. This is handy for when your text needs to include a clickable link within the code.

Bookmark This Page

Scrolling Vertical Text Javascript

You can make text scroll upward using the marquee html tag, but the tag is not Netscape compatible. So to get that text scrolling upward in a way that is cross browser compatible you can use this javascript below.

The script is a one step script and was updated on 24/2/04 by a messageboard member so that it is truly crossbrowser compatible. Thanks guys!

A "pause on mouseover" function was added to the script on 26/2/04. Thanks David.

Just copy and paste the script from the text box below, straight into the body of your page where you want the scrolling text seen.

There are comments within the script to indicate where to change the scripts width and height attributes, the scrolling speed and the content you desire. You can add hyperlinks to your content and color the text whatever you need. The script will blend into whatever background you use.

Do not place apostrophes in your message words such as I'm or haven't. They will make the script void and unworkable.

If you want a border around the text place the script inside a table and assign the table border width.

If you have any trouble installing the vertical text javascript, don't hesitate to contact me.

Here is an example of the Upward Scrolling Text Javascript.

Simply copy and paste the javascript code below into your HTML editor

<script language="JavaScript1.2"> 
// Distributed by http://www.hypergurl.com // Scrollers width here (in pixels) 
var scrollerwidth="450px" // Scrollers height here var scrollerheight="100px" 
// Scrollers speed here (larger is faster 1-10) var scrollerspeed=2 // Scrollers 
content goes here! Keep all of the message on the same line! var scrollercontent='<font 
face="Arial" color="green" size="5"><b>Place 
your content here.<br> Script distributed by <a href="http://www.hypergurl.com">Hypergurl.com.</a> 
The scrolling massage will now pause on mouseover.<br>Thanks David for the 
update!</b></font>' var pauseit=1 // Change nothing below! scrollerspeed=(document.all)? 
scrollerspeed : Math.max(1, scrollerspeed-1) //slow speed down by 1 for NS var 
copyspeed=scrollerspeed var iedom=document.all||document.getElementById var actualheight='' 
var cross_scroller, ns_scroller var pausespeed=(pauseit==0)? copyspeed: 0 function 
populate(){ if (iedom){ cross_scroller=document.getElementById? document.getElementById("iescroller") 
: document.all.iescroller cross_scroller.style.top=parseInt(scrollerheight)+8+"px" 
cross_scroller.innerHTML=scrollercontent actualheight=cross_scroller.offsetHeight 
} else if (document.layers){ ns_scroller=document.ns_scroller.document.ns_scroller2 
ns_scroller.top=parseInt(scrollerheight)+8 ns_scroller.document.write(scrollercontent) 
ns_scroller.document.close() actualheight=ns_scroller.document.height } lefttime=setInterval("scrollscroller()",20) 
} window.onload=populate function scrollscroller(){ if (iedom){ if (parseInt(cross_scroller.style.top)>(actualheight*(-1)+8)) 
cross_scroller.style.top=parseInt(cross_scroller.style.top)-copyspeed+"px" 
else cross_scroller.style.top=parseInt(scrollerheight)+8+"px" } else 
if (document.layers){ if (ns_scroller.top>(actualheight*(-1)+8)) ns_scroller.top-=copyspeed 
else ns_scroller.top=parseInt(scrollerheight)+8 } } if (iedom||document.layers){ 
with (document){ if (iedom){ write('<div style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden" 
onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=scrollerspeed">') 
write('<div id="iescroller" style="position:absolute;left:0px;top:0px;width:100%;">') 
write('</div></div>') } else if (document.layers){ write('<ilayer 
width='+scrollerwidth+' height='+scrollerheight+' name="ns_scroller">') 
write('<layer name="ns_scroller2" width='+scrollerwidth+' height='+scrollerheight+' 
left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=scrollerspeed"></layer>') 
write('</ilayer>') } } } </script>

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name

web hosting and domain registration

NEW!
Blog for Webmasters

Website Design

Refer A Friend

Your Email
Your Name
Friends Email
Friends Name

Home

Email Hypergurl

Link To Hypergurl

Site design copyright 2001 - 2008 © hypergurl.com