RV's free DHTML and JavaScript text and graphic scripts

SHUFFLING TEXT EFFECT
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+.
6-Oct-2005: Re-written to use 'relative' positioning to simplify coding and improve performance. Also added ability for text to be a link. 5-Oct-2005: Internet Explorer 4 support removed, updated for XML compatibility, and fixed a window resizing bug.
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 speed=200; // speed, lower is faster var alink="http://www.mf2fm.com/rv"; // place to link to // set to alink="" if not required /**************************\ Shuffle Text Effect * (c) 2003-6 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var shuffl, shftxt, c1, c2; var shfpos=new Array(); window.onload=function() { if (document.getElementById) { var sorpos=new Array(); var shft1, shft2; shuffl=document.getElementById("shuffle"); if (!document.all) shuffl.style.position="relative"; // ie bug fix shftxt=shuffl.firstChild.nodeValue; shftxt=shftxt.replace(/ /g, String.fromCharCode(160)); while (shuffl.childNodes.length) shuffl.removeChild(shuffl.childNodes[0]); for (var i=0; i<shftxt.length; i++) { shft1=document.createElement("span"); shft1.setAttribute("id", "shuf"+i); shft1.style.position="relative"; shft1.appendChild(document.createTextNode(shftxt.charAt(i))); if (alink) { shft1.onclick=function() { top.location.href=alink }; shft1.style.cursor="pointer"; } shuffl.appendChild(shft1); } sorpos[-1]=0; for (i=0; i<shftxt.length; i++) { shfpos[i]=i; sorpos[i]=sorpos[i-1]+getElWidth(document.getElementById("shuf"+i)); } for (i=0; i<shftxt.length; i++) { shft2=Math.floor(Math.random()(shftxt.length)); shft1=shfpos[i]; shfpos[i]=shfpos[shft2]; shfpos[shft2]=shft1; } shft1=0; for (i=0; i<shftxt.length; i++) { shft2=document.getElementById("shuf"+shfpos[i]); shft2.style.left=shft1-sorpos[shfpos[i]-1]+"px"; shft1+=getElWidth(shft2); } unshuffle(); }} function unshuffle() { var shft1, shft2, rpos, go=0; for (var i=0; i<shftxt.length; i++) if (shfpos[i]!=i) go++; if (go) { do { rpos=Math.floor(Math.random()(shftxt.length-1)); shft1=shfpos[rpos]; shft2=shfpos[rpos+1]; } while (shft1<shft2); shfpos[rpos+1]=shft1; shfpos[rpos]=shft2; c1=document.getElementById("shuf"+shft1); shft1=getElWidth(c1); c2=document.getElementById("shuf"+shft2); shft2=getElWidth(c2); for (i=0; i<shft2; i++) setTimeout('c1.style.left=(parseInt(c1.style.left)+1)+"px"', speed/shft2i); for (i=0; i<shft1; i++) setTimeout('c2.style.left=(parseInt(c2.style.left)-1)+"px"', speed/shft1*i); setTimeout('unshuffle()', speed); } } function getElWidth(el) { if (el.style.width) return parseInt(el.style.width); else if (el.offsetWidth) return el.offsetWidth; else if (el.clientWidth) return el.clientWidth; else return false; } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Place a <span> element with ' id="flirt" ' on your web-page containing the text you wish to have shuffled. For example: Don't include anything other than text between the <span> tags.
THAT'S IT When your page loads, the text between your <span> tags should be scrambled and then shuffled back into the right order, like the text at the top of this 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/dhtmlshuffle.php.

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