JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Browser Earthquake!

Real life earthquakes may induce sheer terror, but browser ones are a whole different story. Using DHTML, we've created an earthquake script that shakes the browser, simulating a quake effect. Use it to grab your visitor's attention, if nothing else.
Hit Reload or Refresh button to see an example again.

Insert into <HEAD>
<style> #quakenotice_ie{ font:normal 14px Arial; position:absolute; width:300px; height:55px; border:2px solid black; background-color:lightyellow; visibility:hidden; } </style>

Insert into <BODY>
<body onLoad="earthquake()"> <layer id="quakenotice_ns" width=300 height=55 bgColor=lightyellow visibility=hide></layer> <script> //configure the likelihood that an earthquake will occur (100% means always) var chance_of_occurence="50%" /////do NOT edit below this line///////////// //variable used to store the equivalency of the 10 rector scales (in the form of 1, 3, 6...etc) var rectorscale=new Array(1,3,6,9,12,15,18,21,24,27) chance_of_occurence=parseInt(chance_of_occurence) function earthquake(){ //randomly assign a number from 1 to 10 to variable rectorindex rectorindex=Math.floor(Math.random()10) //randomly assign one of element rectorscale into variable rector rector=rectorscale[rectorindex] if ((document.all\|\|document.layers)&&Math.floor(Math.random()100)<=chance_of_occurence) { //shake the browser's screen according to the random rector scale! for (i=0;i,i<20;i++){ window.moveBy(0,rector) window.moveBy(rector,0) window.moveBy(0,-rector) window.moveBy(-rector,0) } // show quake message quakealert() } } if (document.all) document.write('<div id="quakenotice_ie"></div>') function quakealert(){ var quakemessage='An earthquake of magnitude <b>'+eval(rectorindex+1)+'</b> has just occured! Please stay calm...everything\'s fine now.' if (document.all){ quakemsg_ie=document.all.quakenotice_ie quakemsg_ie.innerHTML=quakemessage //position quake message in center of screen quakemsg_ie.style.left=document.body.scrollLeft+document.body.clientWidth/2-quakemsg_ie.offsetWidth/2 quakemsg_ie.style.top=document.body.scrollTop+document.body.clientHeight/2-quakemsg_ie.offsetHeight/2 quakemsg_ie.style.visibility="visible" setTimeout("quakemsg_ie.style.visibility='hidden'",5000) } else if (document.layers){ quakemsg_ns=document.quakenotice_ns quakemsg_ns.document.write(quakemessage) quakemsg_ns.document.close() quakemsg_ns.left=pageXOffset+window.innerWidth/2-quakemsg_ns.document.width/2 quakemsg_ns.top=pageYOffset+window.innerHeight/2-quakemsg_ns.document.height/2 quakemsg_ns.visibility="show" setTimeout("quakemsg_ns.visibility='hide'",5000) } } </script>

Other Options
Step 3: Finally, define the below event handler inside the <body> tag itself, like so: <body onLoad="earthquake()"> Be sure to configure variable "chance_of_occurence" inside script to set how often the earthquake should occur. Now, let's ready to rumble!