[Javascript] Handle several window.onload functions

[Roger Roelofs]

Guillaume,

On Jul 5, 2005, at 7:33 PM, Guillaume wrote:

>
>  Hi again,
>
>  I'd like to replace an onclick call in my content page.htm as 
> explained in a previous mail
>  <a href="#" onclick="obj.slideTo(0, -200, 1000, -.6); return false;">
>  The idea is to separate this from the content page.htm, put it in a 
> separate .js file and call this using a class="onclick"
>  Inside the content page the link would then become something like <a 
> href="#" class="onclick">
>  This is the JavaScript i plan to use:
>
> function onClickSlide() {
>   if (!document.getElementsByTagName) return false;
>   var links = document.getElementsByTagName("a");
>   for (var i=0; i < links.length; i++) {
>     if (links[i].className.match("onclick")) {
>       links[i].onclick = function() {
>         obj.slideTo(0, -200, 1000, -.6);
>         return false;
>       }
>     }
>   }
> }
> window.onload = onClickSlide;
>
>  Obviously, this is not working as...
> obj.slideTo
>  ...is not a function at all, but an order: onclick > doSomething ( i 
> know "order" is not the proper term, sorry )... doSomething resulting 
> from 2 other separate scripts...

One good tutorial about all this can be found here 
<http://www.onlinetools.org/articles/unobtrusivejavascript/index.html>, 
although I think you may have already found it based on your reference 
to 'unobtrusive' javascript.  One of the more comprehensive resources 
on events in javascript is 
<http://www.quirksmode.org/js/introevents.html>  The main challenge is 
figuring out which element the handler should operate on.  The standard 
approach I use (based on the quirksmode information) is something like 
this...

function getTarget(e) {
	var targ;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) targ = targ.parentNode;
	return targ;
}

function handleSlide(e)  {
	if (!e) var e = window.event;  // if e doesn't exist we are using ie 
event model
	doSlide(e, getTarget(e), 0, -200, 1000, -.6);
}

function doSlide(e, el, top, left, steps, speed) {  // I don't know 
what the numbers mean,
											//   so I'm guessing
	// do whatever slide you want...
}

I hope this gives you a starting point.


Roger,

Roger Roelofs
Know what you value.