 |
 |
|
|
||
Your visitor's browser knows when it has finished loading a page. Using JavaScript, you can make things happen at that point. The browser also knows when it unloads the page as it prepares to load another. It knows when the page is in focus (in the top window and active) and when the page goes out of focus. You can make things happen at those points, too. Many different things can happen, probably limited only by your imagination. Here are a few:
Although you may have experienced one or more of the above used inappropriately and possibly even used to bully; clueless, insecure, and greedy folks do not dictate whether or not features are useful to the rest of us. Loading, unloading, gaining focus, losing focus -- these are called "events". When a program is instructed to do something during the timing of an event, it is "capturing" the event. In JavaScript, events are captured with special event handlers. Event handlers are used by using their name. There are other related events that can be captured. Here is a short list with the JavaScript event handler names used to capture them:
Use event handlers by putting them within the <body...> tag of your page. Like this:
<body EventHandlerName="_________">
with the underscore being the instructions what to do. The
instructions could be "self.focus" if you want the window
to gain focus, for example. Or, the instructions could be
"myfunction()" if you want a function to be called and
executed.
Here are a few examples of things you can do with the browser window:
onBlur="self.focus"
makes the browser window gain focus every time it loses
focus. In other words, the window remains the top window.
onLoad="self.focus"
makes sure the browser window is in focus when the page
finishes loading.
onLoad="self.status='Thank you for visiting us'"
puts the message between the apostrophes into the browser's
status message area when the page completes loading. (The
message will disappear as soon as another status message
is displayed.)
onUnload="resizeTo(400,200)"
resizes the browser window to 400 pixels wide and 200
pixels deep when your visitor leaves the page.
onError="window.location = 'http://willmaster.com/'"
sends the visitor to willmaster.com if there was an error
while loading the page.
onLoad="if(self != top) top.location=self.location"
pops your page out of any frame it might be in. (The "!="
means "not equal".)
onLoad="if(self == top) window.location = 'frameset.htm'"
displays the page within the frame defined in frameset.htm
-- if it is initially loaded into the browser without a
frame. (The "==" means "does equal".)
onLoad="self.scrollTo(0,70)"
scrolls the page all the way to the left side and 70 pixels
down from the top when your page finishes loading. (Can be
useful if you have a banner or other stuff at the top that
you don't want seen right away.)
onMove="self.moveTo(25,50)"
puts the browser window 25 pixels from the top of the
screen and 50 pixels from the left side of the screen
whenever the browser window is moved. In other words,
the window can't be moved to stay anywhere else. If you
want to move the browser window into that position from
the first, put this into the body tag, too:
onLoad="self.moveTo(25,50)"
Body tags can contain several different event handlers and their instructions. However, any specific event handler should appear only once. For example, do not use the onLoad handler more than once in the body tag.
If you want more than one thing to happen onLoad (or other specific event), or if what you want to do takes more than one line of JavaScript code, have the instructions call a function you write for that purpose. Example:
onLoad="stufftodo()"
(The two perenthesis "()" are necessary to tell the browser
"stufftodo" is a function.)
Here is a function called "stufftodo()" that first makes sure the browser window is in the top-left corner of the screen. Then it creates a popup box and fills it with the contents from URL "mywebpage.htm"
<script name="JavaScript"><!--
function stufftodo() {
self.moveTo(0,0);
window.open("mywebpage.htm","","height=200,width=300");
} //-->
</script>
Place all JavaScript functions having to do with event handlers between the <head> and </head> tags of your web page. This ensures the functions get loaded into memory before they are called from the <body...> tag. The above can open a lot of possibilities for you. Try whatever your imagination says might be possible. Who knows, you may be the person to invent something new to do with event handlers, something that has never been done before. Happy onLoad-ing! Copyright 2000 by William and Mari Bontrager
William Bontrager, Programmer and Publisher
| ||