PDA

View Full Version : Browser Earthquake!



jscheuer1
05-21-2005, 05:22 PM
This delightful little script, Browser Earthquake! (http://www.dynamicdrive.com/dynamicindex12/earthquake.htm), 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:


<!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>