3edb30fb31
Monotone-Revision: be6f53a63508a39bc22a09d7c9f9b0cd33845b11 Monotone-Author: flachapelle@inverse.ca Monotone-Date: 2007-05-28T16:12:06 Monotone-Branch: ca.inverse.sogo
55 lines
1.9 KiB
HTML
55 lines
1.9 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
<head>
|
|
<title>DOMContentLoaded Sample Page</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
|
<script type="text/javascript" src="js/events.js"></script>
|
|
<script type="text/javascript">
|
|
function leadingZero(nr)
|
|
{
|
|
if (nr < 10) nr = "0" + nr;
|
|
return nr;
|
|
}
|
|
|
|
function showEvents(s) {
|
|
var el = document.getElementById("alerts");
|
|
var d = new Date();
|
|
el.innerHTML = el.innerHTML + leadingZero(d.getHours()) + ":" + leadingZero(d.getMinutes()) + ":" + leadingZero(d.getSeconds()) + " - " + s + "<br>";
|
|
}
|
|
|
|
function myFunction(){
|
|
showEvents("addEvent | DOMContentLoaded | myFunction: The DOM is ready");
|
|
var els = document.getElementsByTagName("h1");
|
|
if(els)
|
|
els[0].className = "red";
|
|
showEvents("addEvent | DOMContentLoaded | myFunction: Changed heading color");
|
|
document.body.className = "body";
|
|
showEvents("addEvent | DOMContentLoaded | myFunction: Changed font");
|
|
};
|
|
|
|
addEvent(window, 'DOMContentLoaded', myFunction);
|
|
addEvent(window, 'DOMContentLoaded', function() {
|
|
showEvents("addEvent | DOMContentLoaded | anonymous function: Hello");
|
|
});
|
|
addEvent(window, 'load', function() {
|
|
showEvents("addEvent | load | anonymous function: The whole page is loaded.");
|
|
});
|
|
</script>
|
|
<style type="text/css">
|
|
.body { font: x-small/1.5 arial, sans-serif; }
|
|
.red { color: red; }
|
|
</style>
|
|
</head>
|
|
<body onload="showEvents('body | onload: First alert.');showEvents('body | onload: Second alert.');">
|
|
<h1>DOMContentLoaded Sample Page</h1>
|
|
<h2>alert log</h2>
|
|
<div id="alerts"></div>
|
|
<h2>large image</h2>
|
|
<!-- Because it doesn't work with IE Mac
|
|
<p id="poster"><img src="domfunction_iotbs.bmp" alt="Invasion of the Body Snatchers poster (1956)" /></p>
|
|
-->
|
|
<p id="poster"><img src="bodyswitchers.jpg" alt="Invasion of the Body Snatchers poster (1956)" /></p>
|
|
<p>Footer</p>
|
|
</body>
|
|
</html>
|