Full version: jsB@nk » Form » Simple Newsscroller with highly configurable dissolving effect
URL: https://www.javascriptbank.com/simple-newsscroller-with-highly-configurable-dissolving-effect.html
Newsscroller with highly configurable dissolving effect. Allows as many messages as you like. Easy change of messages. Each message can be linked to a different URL. The full dissolving effect can be viewed with IE4, IE5 or higher. Netscape-users will see a more simple message-rotation instead of it.
Full version: jsB@nk » Form » Simple Newsscroller with highly configurable dissolving effect
URL: https://www.javascriptbank.com/simple-newsscroller-with-highly-configurable-dissolving-effect.html
<STYLE>A {COLOR: white; TEXT-DECORATION: none}A:hover {COLOR: red; TEXT-DECORATION: none}.messagebox {BACKGROUND-COLOR: black; BORDER-BOTTOM: white 5px solid; BORDER-LEFT: white 5px solid; BORDER-RIGHT: white 5px solid; BORDER-TOP: white 5px solid; COLOR: white; FONT-FAMILY: Verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold; HEIGHT: 50px; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; POSITION: absolute; TEXT-ALIGN: center; WIDTH: 240px}.messageboxNN {BORDER-BOTTOM-COLOR: white; BORDER-LEFT-COLOR: white; BORDER-RIGHT-COLOR: white; BORDER-TOP-COLOR: white; COLOR: white; FONT-FAMILY: Verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold; POSITION: relative}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT><!-- Beginning of JavaScript -// Newsscroller with highly configurable dissolving effect// CONFIGURATION:// 1. Copy the two script-blocks:// Paste the first script-block inside the head-section of your HTML-file.//Insert the second script-block into the body-section.// 2. Copy the style-block and paste it into the head-section of your HTML-file//Configure the style-block by trial and error.// 3. Insert 'onLoad="checkbrowser()"' into the body-tag.// 4. Configure the variables below:// The width of your messagebox (pixels)// Be sure that the width-value inside the style-block (below the script-block )// is a few pixels smaller.var textwidth=260// The height of your messagebox (pixels)// Be sure that the height-value inside the style-block (below the script-block) // is a few pixels smaller.var textheight=60// Your messages. You may add as many messages as you like.var message=new Array()message[0]="WELCOME TO OUR DHTML FUNZONE"message[1]="ENJOY OUR SCRIPT-PRESENTATION"message[2]="DOWNLOAD OUR SCRIPTS RIGHT NOW"message[3]="AND ADD THEM TO YOUR WEBSITE"// Where should the messages above be linked to? // Add an URL for each message.// If you don't want to add an URL just write '#' instead of // the URL, see sample messageurl[2].var messageurl=new Array()messageurl[0]="http://javascriptbank.com"messageurl[1]="http://javascriptbank.com"messageurl[2]="#"messageurl[3]="http://javascriptbank.com"// The background-color for each message.var messagebg=new Array()messagebg[0]="880000"messagebg[1]="008800"messagebg[2]="000088"messagebg[3]="660066"// Final horizontal position of the messagebox: distance to the left margin of the windowvar x_finalpos=20// Final vertical position of the messagebox: distance to the top margin of the windowvar y_finalpos=20// Configure the number of vertical slices.// A high value will slow down the visual effect.var x_slices=30// Configure the number of horizontal slices.// A high value will slow down the visual effect.var y_slices=1// Standstill between the messages (microseconds)var pause=2500// Do not change the variables belowvar xy_slices=x_slices*y_slicesvar randomorder=new Array()for (i=0;i<=xy_slices-1;i++) {randomorder[i]=i}var speed=10var i_messages=0var width_slice=Math.floor(textwidth/x_slices)var height_slice=Math.floor(textheight/y_slices)var cliptop=0var clipbottom=height_slicevar clipleft=0var clipright=width_slicevar spancounter=0var x_random=new Array()var y_random=new Array()function checkbrowser() {if (document.all) { initiate() } if (document.layers) { rotatenetscape() }}function initiate() { if (document.all) { spancounter=0 for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) {var thisspan=eval("document.all.span"+spancounter+".style")thisspan.posLeft=x_finalposthisspan.posTop=y_finalpos thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"clipleft+=width_slice clipright+=width_slice spancounter++} clipleft=0 clipright=width_slice cliptop+=height_slice clipbottom+=height_slice}for (i=0;i<=xy_slices-1;i++) {var thisspan=eval("span"+i)thisspan.innerHTML="<a href='"+messageurl[i_messages]+"' target='_blank'>"+message[i_messages]+"</a>"}var timer=setTimeout("changemessage()",pause) }}function dissolvemessage() {if (i_loop<=xy_slices-1) {var thisspan=eval("span"+randomorder[i_loop])thisspan.innerHTML="<a href='"+messageurl[i_messages]+"' target='_blank'>"+message[i_messages]+"</a>"thisspan.style.backgroundColor=messagebg[i_messages]i_loop++var timer=setTimeout("dissolvemessage()",speed)}else {clearTimeout(timer)var timer=setTimeout("changemessage()",pause)}}function changemessage() {getrandomorder(xy_slices)i_loop=0i_messages++if (i_messages>=message.length) {i_messages=0} dissolvemessage()}function getrandomorder(range) {for (i=0;i<=range;i++) {var firstvalue= Math.floor(range*Math.random())var secondvalue= Math.floor(range*Math.random())var cachevalue=randomorder[firstvalue]randomorder[firstvalue]=randomorder[secondvalue]randomorder[secondvalue]=cachevalue}}function rotatenetscape() {document.imgcontainer1.document.write("<table width="+textwidth+" height="+textheight+"><tr><td bgcolor="+messagebg[i_messages]+" cellpadding=2 cellspacing=2 align=center><span id='imgcontainer2' class='messageboxNN'><a href='"+messageurl[i_messages]+"' target='_blank'>"+message[i_messages]+"</a></span></td></tr></table>")document.imgcontainer1.document.close()i_messages++if (i_messages>message.length-1) {i_messages=0} var timer=setTimeout("rotatenetscape()",pause)}// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=checkbrowser()><SCRIPT><!-- Beginning of JavaScript -if (document.all) {for (i=0;i<=y_slices-1;i++) {for (ii=0;ii<=x_slices-1;ii++) { document.write("<div id='span"+spancounter+"' class='messagebox'>") document.write("</div>")spancounter++}}}if (document.layers) {document.write("<div id='imgcontainer1' class='messagebox'>")document.write("</div>")document.close()document.imgcontainer1.left=x_finalposdocument.imgcontainer1.top=y_finalpos}// - End of JavaScript - --></SCRIPT></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->