Airport Departure Board Text Effect :: RV's free DHTML and JavaScript text and graphic scripts ::

THE AIRPORT DEPARTURE BOARD TEXT EFFECT

This script has been tested on and shown to work with the following browsers: Internet Explorer version 7 and above Google Chrome version 4 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 9 and above (including Opera mobile) Android Browser version 3 and above

09-Jun-2013: Minor improvements. 22-Mar-2013: First release.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var text=new Array("Brought to you by RV's FREE Scripts", "Your flight is now departing...", "BA 329 AMSTERDAM Boarding GATE 3", "BA 057 JOHANNESBURG Boarding GATE 9"); //change the above array to include the text you want animated (any text on the page will be added to this) var size=28; // how tall in pixels var speed=125; // lower is faster var link="http://www.mf2fm.com/rv/"; // where to link to if the text is clicked, set to ="" if you don't want the text to be a link /*****************************\ Airport Departure Board Script* * (c)2013 on mf2fm web-design * * http://www.mf2fm.com/rv * * DO NOT EDIT BELOW THIS BOX * \*****************************/ function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(boarding); var divvy, ditsy, crount; var maxilength=0; var taunty=0; var stext=new Array(); function boarding() { var i, j, w; divvy=document.getElementById("board"); divvy.style.fontSize=(size-4)+"px"; divvy.style.position="relative"; if (divvy.firstChild.nodeValue) { text.unshift(divvy.firstChild.nodeValue.toString()); divvy.firstChild.nodeValue=String.fromCharCode(160); } else divvy.appendChild(document.createTextNode(String.fromCharCode(160))); stext['text']=new Array(); for (i=0; i<text.length; i++) if (text[i].length>maxilength) maxilength=text[i].length; w=Math.floor((size-4)/1.414); for (i=0; i<4; i++) { stext[i]=new Array(); for (j=0; j<maxilength; j++) { stext[i][j]=document.createElement('div'); stext[i][j].appendChild(document.createTextNode(String.fromCharCode(160))); stext[i][j].style.position="absolute"; stext[i][j].style.top="0px"; stext[i][j].style.backgroundColor="transparent"; stext[i][j].style.textAlign="center"; stext[i][j].style.left=Math.floor(wj)+"px"; stext[i][j].style.width=w+"px"; if (i<2) stext[i][j].style.clip="rect(0px, "+w+"px, "+Math.floor((size/2)-3)+"px, 0px)"; else stext[i][j].style.clip="rect("+Math.floor((size/2)-2)+"px, "+w+"px, "+size+"px, 0px)"; if (link) stext[i][j].onclick=function(){window.location.href=link}; divvy.appendChild(stext[i][j]); } } take_off(); } function take_off() { var j; crount=0; for (j=0; j<text[taunty].length; j++) stext['text'][j]=text[taunty].charCodeAt(j)-32; for (; j<maxilength; j++) stext['text'][j]=0; taunty=++taunty%text.length; ditzy=setInterval(flicker, speed); } function flicker() { var j, geendetet; geendetet=maxilength; for (j=0; j<maxilength; j++) { if (stext['text'][j] && stext['text'][j]>=crount-j && j-crount<32) swap_a_doodle (crount%2, j, String.fromCharCode(32+(crount-j)%95)); else if (stext['text'][j] && Math.random()<0.002 && stext['text'][j]<161 && crount<3text.length) stext['text'][j]=stext['text'][j]+95; else geendetet--; } if (!geendetet) { clearInterval(ditzy); setTimeout('ditzy=setInterval("landing()", speed.7)', speed50); } crount++; } function landing() { var j, geendetet; geendetet=maxilength; for (j=0; j<maxilength; j++) { if (stext['text'][j]%95) swap_a_doodle (crount%2, j, String.fromCharCode(++stext['text'][j]%95+32)); else geendetet--; } if (!geendetet) { clearInterval(ditzy); take_off(); } crount++; } function swap_a_doodle(i, j, l) { stext[i][j].firstChild.nodeValue=l; stext[i][j].style.visibility="visible"; stext[i+2][j].firstChild.nodeValue=l; setTimeout ('stext['+(i+2)+']['+j+'].style.visibility="visible"', speed.2); setTimeout ('stext['+(1-i)+']['+j+'].style.visibility="hidden"', speed.3) setTimeout ('stext['+(3-i)+']['+j+'].style.visibility="hidden"', speed.5); } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Place a <div> element with 'id="board"' on your web-page. If this contains text, it will be used in the animation, but it can be left empty. For example: or just... Don't put anything other than text between the <div> tags.
STEP 3: You can add extra text by changing the values at the start of the script, and you change the speed of operation. You can also change the height of the font. If you wish to apply any style (CSS), do this on the <div> tag. A monospace font works best but is not essential.
THAT'S IT When your page loads, the text you have used will be animated as if it was an airport or railway arrival or departure board just like that at the top of this web-page.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlairport.php.

This page has been viewed 55 times. It was last viewed on Fri 22 Nov, 2024 at 22:28