Browser Earthquake!

**jscheuer1** · 05-21-2005, 05:22 PM

This delightful little script, Browser Earthquake!, is so old that it no longer works even on the demo page using IE6. You guessed it, it is the doctype on the demo page that's causing the trouble. I took the liberty of updating this script to function with its current demo page's doctype (or none) and Mozilla including a style section update (yes, the original was not so old so as not to have had a style section) to make the message displayed a little more professional looking:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Earthquake</title>
<style>
#quakenotice{
font:normal .9em Arial;
position:absolute;
width:22em;
height:2.5em;
border:2px solid black;
background-color:lightyellow;
visibility:hidden;
padding: 1ex 1em 1ex 1em;
}
</style>
</head>
<body onLoad="earthquake()">
<layer id="quakenotice_ns" width=300 height=55 bgColor=lightyellow visibility=hide></layer>
<script>

/*
EarthQuake script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, 
Visit http://dynamicdrive.com
*/

//configure the likelihood that an earthquake will occur (100% means always)
var chance_of_occurence="100%"

/////do NOT edit below this line/////////////
var rector, svWth=0, svHgt=0, hrec
var dom=document.getElementById&&!document.all
//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 iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

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]
hrec=Math.floor(rector/2+.5)
if ((document.all||document.layers||dom)&&Math.floor(Math.random()*100)<=chance_of_occurence)
quake()
}

function quake(){
if ((dom)&&(top.window.outerHeight > screen.availHeight-rector||top.window.outerWidth > screen.availWidth-rector)){
svHgt=top.window.outerHeight
svWth=top.window.outerWidth
if (top.window.outerHeight > screen.availHeight-rector)
top.window.outerHeight = screen.availHeight-rector;
if (top.window.outerWidth > screen.availWidth-rector)
top.window.outerWidth = screen.availWidth-rector;
top.window.moveTo(hrec,hrec)
setTimeout("quake()",500)
return;
}
//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)
}
if (dom){
if (svHgt!==0){
top.window.moveTo(0,0);
top.window.outerHeight=svHgt
}
if (svWth!==0){
top.window.outerWidth=svWth
top.window.moveTo(0,0);
}
}
// show quake message
quakealert()
}


if (document.all||dom)
document.write('<div id="quakenotice"></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||dom){
qkmsg=(dom)? document.getElementById('quakenotice') : document.all.quakenotice
qkmsg.innerHTML=quakemessage
//position quake message in center of screen
qkmsg.style.left=(dom)? window.pageXOffset+window.innerWidth/2-qkmsg.offsetWidth/2+'px' : iecompattest().scrollLeft+iecompattest().clientWidth/2-qkmsg.offsetWidth/2+'px'
qkmsg.style.top=(dom)? window.pageYOffset+window.innerHeight/2-qkmsg.offsetHeight/2+'px' : iecompattest().scrollTop+iecompattest().clientHeight/2-qkmsg.offsetHeight/2+'px'
qkmsg.style.visibility="visible"
setTimeout("qkmsg.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>

</body>
</html>

Thread: Browser Earthquake!

Thread Tools

Search Thread

Browser Earthquake!

Bookmarks

Bookmarks

Posting Permissions