However, due to the nature of Templates certain simple tasks can become painfully troublesome. I have documented one of those here which involves the use of the onLoad call in <body> tags and the ways I found to be useful in overcoming them.
If you are new to Templates and want to learn more about it please consult the Help material (accessible by pressing F1 in Dreamweaver) before continuing with this tutorial.
By default, all regions on a template are marked as locked when you save it; to make the template useful, you must make some parts of it editable. This is how a page derived from a simple template named "primary" would look like:
Very often I would need to call my JavaScripts in the form of:
<body onLoad="runscript()">
Looking at the screenshot above, the <body> is within a locked region and I would have no option but to detach the affected page from the template before I can safely place the onLoad call. Doing this would lead to version control nightmares if you are modfiying your template regularly or you have a large site with many of these "detached" pages.
Example 1
Let me give an example here. Below is a script that gives an alert message that I want to display onLoad.
<script language="javascript1.1">
function popMessage() {
message = "I am bored!";
alert(message);
}
</script>
</head>
<body onLoad="popMessage()">
Due to the reason discussed above naturally I would have to detach my page from the Template to make the onLoad call, but no more.
The solution:
Instead of in the <body> you can call your JavaScript onLoad this way:
<body>
<script language="javascript1.1">
window.onload = popMessage;
</script>
</body>
Note that you don't need to add the () when calling the function inside the document body.
To call more than one function, for example:
<body onLoad="popMessage();popMessage2()">
you would need to set up a separate function to run all of this code, as shown in the example below:
<script language="javascript1.1">
function popMessage() {
message = "I am bored!";
alert(message);
}
function popMessage2() {
message = "I am so so bored!";
alert(message);
}
function combined() {
popMessage();
popMessage2();
}
</script>
</head>
<body bgcolor="#FFFFFF">
<script language="javascript1.1">
window.onload = combined;
</script>
</body>
In our example, a new function called "combined()" is created which calls in sequence the two functions popMessage() and popMessage2(). This new function is then called onLoad within the <body> tags.
Example 2
One more example before I bring this tutorial to a close. There is no avoiding of using forms when making a website. Very often I would want to focus the cursor on the first field of my form so visitors can fill in the form right away instead of clicking on that field first. This is the obvious way to code it:
<body onLoad="document.formname.fieldname.focus();">
The solution:
<script language="JavaScript">
document.formname.fieldname.focus();
</script>
The script must be placed AFTER the form field has been created. Beware if there are other forms with the same form name on the same page. IE will throw an error whereas Netscape will not.
| Demo | Back |
Copyright © 2001, Swee Hoe Ong
All rights reserved.