Free JavaScripts: background, slideshows, animations, generators, scrollers, tickers, image, background, gif-animations, pop-ups, utilities, games, clocks, time and date scripts

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com


One-Line-Scroller This elegant JavaScript One-Line-Scroller scrolls your messages from bottom to top pausing between each message. Each message consists of a linkable title and a short copy text. Configure all elements without programming-knowledge: font-attributes, background-color, width, height, links, speed and much more. Browsers: Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Chrome 3x/4x. Configuration: Step 1: Open your webpage. Paste the following code anywhere between the <body> tag and </body> tag: <script> // CREDITS: // One-Line-Scroller by Peter Gehrig // Copyright (c) 2010 Peter Gehrig. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.fabulant.com. // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a hyperlink to http://www.fabulant.com on the webpage // where this script will be running. var message= new Array() // Configure each message below like this: // message[indexnumber]="text of title\|text of copy\|URL of link\|target of link" // You may add as many messages as you like. message[0]="FREE SCRIPTS\|Download tons of crossbrowser scripts\|http://www.fabulant.com\|_blank" message[1]="FUN SCRIPTS\|Enrich your website with unique visual effects\|http://www.fabulant.com\|_top" message[2]="FAST SCRIPTS\|Configure all scripts fast without programming skills\|http://www.fabulant.com\|_self" // height of the scrollerbox (pixels) var scrollerheight=20 // borderwidth of the scroller (pixels) var scrollerborder=3 // backgroundcolor of the scroller var scrollbg="#AAAAAA" // font attributes of the titlezone (that contains the link) var titlezonefont="Verdana" var titlezonesize=10 var titlezonecolor="yellow" var titlezonerollovercolor="#ffffff" var titlezoneweight="bold" var titlezonestyle="normal" var titlezonebackgroundcolor="red" var titlezonewidth=140 var titlezonealign="left" // font attributes of the copyzone var copyzonefont="Verdana" var copyzonesize=10 var copyzonecolor="red" var copyzoneweight="normal" var copyzonestyle="normal" var copyzonebackgroundcolor="yellow" var copyzonewidth=360 var copyzonealign="left" // standstill between the messages (milliseconds) var standstill=4000 // Do not edit below this line var scrollertop=0 var scrollerleft=0 var cliptop=0 var clipbottom=0 var clipleft=0 var clipright=titlezonewidth+copyzonewidth var i_message=0 var mes_joined var mes_split var contenttext var contentbg="" var step=1 var pause=20 function initiate() { mes_joined=message[i_message] mes_split=mes_joined.split("\|") contenttext="<table cellpadding=4 cellspacing=0 border=0>" contenttext+="<tr valign=top>" contenttext+="<td class='titlezone'>" contenttext+="<a href='"+mes_split[2]+"' class='titlezone' target='"+mes_split[3]+"'>" contenttext+=mes_split[0] contenttext+="</a></td>" contenttext+="<td class='copyzone'>" contenttext+=mes_split[1] contenttext+="</td></tr>" contenttext+="</table>" scrollertext.innerHTML=contenttext document.getElementById('scrollertext').style.top=scrollertop+scrollerheight document.getElementById('scrollertext').style.left=scrollerleft document.getElementById('scrollertext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollin() } function scrollin(){ if (parseInt(document.getElementById('scrollertext').style.top)>scrollertop) { clipbottom+=step document.getElementById('scrollertext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.getElementById('scrollertext').style.top=parseInt(document.getElementById('scrollertext').style.top)-step var timer=setTimeout("scrollin()",pause) } else { clearTimeout(timer) var timer=setTimeout("scrollout()",standstill) } } function scrollout(){ if (parseInt(document.getElementById('scrollertext').style.top)>(scrollertop-scrollerheight)) { cliptop+=step document.getElementById('scrollertext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.getElementById('scrollertext').style.top=parseInt(document.getElementById('scrollertext').style.top)-step var timer=setTimeout("scrollout()",pause) } else { clearTimeout(timer) changemessage() } } function changemessage(){ i_message++ if (i_message>message.length-1) {i_message=0} mes_joined=message[i_message] mes_split=mes_joined.split("\|") cliptop=0 clipbottom=0 contenttext="<table cellpadding=4 cellspacing=0 border=0>" contenttext+="<tr valign=top>" contenttext+="<td class='titlezone'>" contenttext+="<a href='"+mes_split[2]+"' class='titlezone' target='"+mes_split[3]+"'>" contenttext+=mes_split[0] contenttext+="</a></td>" contenttext+="<td class='copyzone'>" contenttext+=mes_split[1] contenttext+="</td></tr>" contenttext+="</table>" scrollertext.innerHTML=contenttext document.getElementById('scrollertext').style.top=scrollertop+scrollerheight document.getElementById('scrollertext').style.left=scrollerleft document.getElementById('scrollertext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollin() } document.write('<style>') document.write('.titlezone {') document.write('font-family:'+titlezonefont+';') document.write('font-size:'+titlezonesize+';') document.write('color:'+titlezonecolor+';') document.write('font-weight:'+titlezoneweight+';') document.write('font-style:'+titlezonestyle+';') document.write('background-color:'+titlezonebackgroundcolor+';') document.write('width:'+titlezonewidth+';') document.write('height:'+scrollerheight+';') document.write('text-align:'+titlezonealign+';') document.write('}') document.write('A.titlezone {') document.write('text-decoration:none;') document.write('color:'+titlezonecolor+';') document.write('}') document.write('A.titlezone:visited {') document.write('color:'+titlezonecolor+';') document.write('}') document.write('A.titlezone:hover {') document.write('text-decoration:none;') document.write('color:'+titlezonerollovercolor+';') document.write('}') document.write('.copyzone {') document.write('font-family:'+copyzonefont+';') document.write('font-size:'+copyzonesize+';') document.write('color:'+copyzonecolor+';') document.write('font-weight:'+copyzoneweight+';') document.write('font-style:'+copyzonestyle+';') document.write('background-color:'+copyzonebackgroundcolor+';') document.write('width:'+copyzonewidth+';') document.write('height:'+scrollerheight+';') document.write('text-align:'+copyzonealign+';') document.write('}') document.write('</style>') if (document.all) { document.write('<div id="roof" style="position:relative;width:'+(titlezonewidth+copyzonewidth+2scrollerborder)+'px;height:'+(scrollerheight+2scrollerborder)+'px;border-style:solid; border-width:'+scrollerborder+';background-color:'+scrollbg+';">') } else { document.write('<div id="roof" style="position:relative;width:'+(titlezonewidth+copyzonewidth)+'px;height:'+(scrollerheight)+'px;border-style:solid; border-width:'+scrollerborder+';background-color:'+scrollbg+';">') } document.write('<div id="scrollertext" style="position:absolute;width:'+(titlezonewidth+copyzonewidth)+'px;height:'+scrollerheight+'px;top:-1000px"></div>') document.write('</div>') window.onload=initiate </script> Step 2: Go to the top of the script and configure font-attributes, background-color, width, height, links, speed and much more.