My Programming Tricks

Caveman Blogger

I always wonder how the location of the placement of onload event listener will affect the behavior of my Javascript on various browsers. I use the following codes to check out this small doubt of me:

<html>
<head>
<script>
window.onload = function() {
alert("window.onload in the head");
}
</script>
</head>

<body onload="alert('body begins onload')">
<br><br><br><br><br><br>
<script>
alert("body ends onload");
</script>
</body>
</html>

The following are the results of the test on various browser according to the priority of the alert message:
Chrome: "body ends onload", "window.onload in the head", "body begins onload"
Safari/Firefox/IE: "body ends onload", "body begins onload"

I then add an extra onload listener in the body to see if it changes the result. The codes are as follows:

<html>
<head>
<script>
window.onload = function() {
alert("window.onload in the head");
}
</script>
</head>

<body onload="alert('body begins onload')">
<script>
window.onload = function() {
alert("window.onload in the body");
}
</script>
<br><br><br><br><br><br> <script>
alert("body ends onload");
</script>
</body>
</html>

The following are the results of the test on various browser for this new tweak:
Chrome: "body ends onload", "body begins onload", "window.onload in the body"
Safari/Firefox/IE: "body ends onload", "window.onload in the body"

CONCLUSION:
The Chrome browser behave slightly different from the pack. If the window.onload listener is in the head, it will have higher precedence over the onload in the body tag. If the window.onload is in the body, it will have less priority than the one in the body tag with the one in the head ignored.

As for the other browsers, the window.onload in the body will replace the one in the body tag.

One needs to pay special attention to Chrome as it will take all the onload listener in HTML seriously and the programmer needs to make sure the onload script is not running the same script twice or more.

Caveman Blogger

I know this is trivial but also fun at the same time. Just in case you need something fun for your school projects. You need to modify it to suit your need as the codes in the following is very minimal:

<html>
<script>

var x = 10;
var y = 10;
var myTimer;

function startshake() {
setTimeout(function() {moveElemX("shakeObject",x-(Math.floor(Math.random()*6)));},10);
setTimeout(function() {moveElemX("shakeObject",x+(Math.floor(Math.random()*7)));},25);
setTimeout(function() {moveElemX("shakeObject",x-(Math.floor(Math.random()*5)));},40);
setTimeout(function() {moveElemX("shakeObject",x+(Math.floor(Math.random()*6)));},55);
setTimeout(function() {moveElemX("shakeObject",x-(Math.floor(Math.random()*8)));},70);
setTimeout(function() {moveElemX("shakeObject",x);},85);
setTimeout(function() {moveElemY("shakeObject",y-(Math.floor(Math.random()*7)));},15);
setTimeout(function() {moveElemY("shakeObject",y+(Math.floor(Math.random()*3)));},35);
setTimeout(function() {moveElemY("shakeObject",y-(Math.floor(Math.random()*5)));},45);
setTimeout(function() {moveElemY("shakeObject",y+(Math.floor(Math.random()*7)));},65);
setTimeout(function() {moveElemY("shakeObject",y-(Math.floor(Math.random()*5)));},80);
setTimeout(function() {moveElemY("shakeObject",y);},95);
}

function stopshake() {
clearInterval(myTimer);
document.getElementById(elemName).style.top = y+"px";
document.getElementById(elemName).style.left = x+"px";
}

function moveElemX(elemName,X) {
document.getElementById(elemName).style.left = X+"px";
}

function moveElemY(elemName,Y) {
document.getElementById(elemName).style.top = Y+"px";
}

</script>
<body>

<span id="shakeObject" style="position:absolute;top:10px;left:10px">
<table bgcolor="#ffff22" cellpadding=2 cellspacing=2 align=center valign=middle><tr><td>Telephone</td></tr></table>
</span>

<script>
myTimer = setInterval("startshake()",1000);
</script>

<br><br><br>
<a href="javascript:stopshake()">Stop Shaking</a>
</body>

</html>

This is just an example. There are still many other ways to do it. You can also change the timer or offset to other values that suit your need. Hope you like it!

My Programming Tricks

Labels

Tuesday, October 28, 2014

onload Priority for Chrome, Safari, Firefox and Internet Explorer

Monday, October 13, 2014

Javascript to Simulate Shaking an Object

Monday, October 6, 2014

Fixed DIV for Browsers (Including IE and Tablets) using CSS