untitled

(John Hannent) #1
function changehead()
h.style.color = “slateblue”
h.style.fontSize = “36”
end function

</script>

</head>

<body onload=”startTimer()”onunload=”stopTimer()”>

<h1 ID=”h”>Some headlines can change, all on their
own...</h1>

</body>
</html>

In this example, you first create a script with three functions. The first function,
which I named startTimer, sets the timer. It runs the function changehead:
three seconds after this timer is started. The timing can be highly precise if
you wish because it’s specified in milliseconds (a millisecond is a thousandth
of a second, so 3000 milliseconds equals three seconds):


function startTimer()
timerhandle = setTimeout(“changehead”,3000)

This startTimerfunction is triggered when the page is loaded, by this
onloadevent in the element:


<body onload=”startTimer()”onunload=”stopTimer()”>

After the page is unloaded, the timer is discarded, usually a good practice
because it’s no longer needed. The onunloadevent does that cleanup job.


The changeheadfunction, when triggered by the timer, modifies the color
and font size of the head with an IDof h:


function changehead()
h.style.color = “slateblue”
h.style.fontSize = “36”
end function

Cool, no? Now you can delay an effect, a filter, a transition or any other fea-
ture you want to make happen some time after the page loads. You can also
delay events for a certain amount of time after the user clicks or some other
event occurs.


Chapter 16: Programmatic CSS 291

Free download pdf