Cut & Paste Highlighter Scroller II

Home / Free JavaScripts / Scrollers / Here

Cut & Paste Highlighter Scroller II

Credit: JavaScript Kit

Description: Highlighter Scroller II is a visually appealing, multi-line scroller. It gradually reveals each message into view from bottom to top, and is configurable in many aspects. Works in all modern DHTML browsers- IE4+, NS6+, and Opera 7+. Be sure to check out Highlighter Scroller I for a single lined scroller.

Example:

Directions: Simply add the below where you want the scroller to appear on your page:

<script type="text/javascript"> // Highlighter Scroller II script- By JavaScript Kit (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit http://www.javascriptkit.com/ // This notice must stay intact //CONFIGURE MESSAGES AND VARIABLES var tickercontents=new Array() tickercontents[0]='Looking for tutorials on PHP, JavaScript, XML, or CSS? Visit <a href="http://www.codetricks.com">Code Tricks</a>!' tickercontents[1]='Hop on over to <a href="http://www.codingforums.com">Coding Forums</a> to get help on web coding!' tickercontents[2]='This scroller\'s brought to you by <a href="http://www.javascriptkit.com">JavaScript Kit</a>- Free scripts and tutorials!' var tickerwidth="200px" var tickerheight="70px" var fontcss="font: bold 14px Verdana; color:black" var tickdelay=3000 //delay btw messages var highlightspeed=2 //2 pixels at a time. var highlightcolor="lightyellow" var backdroptextcolor="#E1E1E1" ////Do not edit pass this line//////////////// document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>') document.write('<div style="position:relative;left:0px;top:0px; width:'+tickerwidth+'; height:'+tickerheight+';'+fontcss+'">') document.write('<span id="highlighterbg" style="position:absolute;left:0;top:0;color:'+backdroptextcolor+'; width:'+tickerwidth+'; height:'+tickerheight+';padding: 4px"></span><span id="highlighter" style="position:absolute;left:0;top:0;clip:rect(auto auto auto 0px); background-color:'+highlightcolor+'; width:'+tickerwidth+';height:'+tickerheight+';padding: 4px"></span>') document.write('</div>') var currentmessage=0 var clipbottom=1 function changetickercontent(){ msgheight=clipbottom=crosstick.offsetHeight crosstick.style.clip="rect("+msgheight+"px auto auto 0px)" crosstickbg.innerHTML=tickercontents[currentmessage] crosstick.innerHTML=tickercontents[currentmessage] highlightmsg() } function highlightmsg(){ //var msgheight=crosstick.offsetHeight if (clipbottom>0){ clipbottom-=highlightspeed crosstick.style.clip="rect("+clipbottom+"px auto auto 0px)" beginclip=setTimeout("highlightmsg()",20) } else{ clipbottom=msgheight clearTimeout(beginclip) if (currentmessage==tickercontents.length-1) currentmessage=0 else currentmessage++ setTimeout("changetickercontent()",tickdelay) } } function start_ticking(){ crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement if (parseInt(crosstick.offsetHeight)>0) crosstickParent.style.height=crosstick.offsetHeight+'px' else setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake changetickercontent() } if (document.all || document.getElementById) window.onload=start_ticking </script> <p align="left">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></p>

Just refer the variables inside to configure scroller. For each of the scroller's contents, be sure they all exist on one line, and if apostrophes are used, that they are back slashed (ie: "We\'ll be back").

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info