Joy of JavaScript: free text-shaker

» 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

JavaScript Text-Shaker
Make your text shake in order to draw more attention to your main message. This free script is crossbrowser: Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x.

As you can see, this is your shaking text.

Installation

Step 1: Open your webpage. Paste the following code anywhere into the <body>-section of your webpage:

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you have to insert a link to http://www.fabulant.com 
// right into the webpage where the script will be displayed.

var ie=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
var ns4=document.layers?1:0
var posleft=1
var idoftrembleobject="trembletext"
var trembleobject

function starttremble() {
    if (ie || ns4 || ns6) {
        if (ie) {
            trembleobject=eval("document.all."+idoftrembleobject+".style")
        }
        if (ns6) {
            trembleobject=idoftrembleobject
        }
        
	    dotremble()
    }
}
function dotremble() {
    posleft*=-1
    if (ie) {
	    trembleobject.posLeft+=posleft  
    }
    if (ns6) {
	    var newpos=parseInt(document.getElementById(trembleobject).style.left)+posleft
        document.getElementById(trembleobject).style.left=newpos
    }
    var timer=setTimeout("dotremble()",50)
}
onload=starttremble
</script>

<div id="tremblebox" style="position:relative">
<span id="trembletext" style="position:absolute;left:1px;top:0px;"><font size=1 color=black face=Verdana>This is your shaking text</font>
</span>
</div>
<br>

Take care that the shaking text is placed on a separate line!

Step 2: Open your webpage. Go to <div>-container with the id "tremblebox" and edit the shaking text (red code only!):

<div id="tremblebox" style="position:relative">
<span id="trembletext" style="position:absolute;left:1px;top:0px;">
This is your shaking text
</span>
</div>