Also, while it's convenient to insert javascript event handlers into HTML
markup when demonstrating an example, in practice it's probably best to
leave the script out of the markup and apply it from a separate
script file
at window.onload.
I'm curious as to how you do that, because to my mind it's a great idea.
Keeping it out of the markup would make sure that the code of the page
itself remains nice and lean and would also make it easier to remove the
popups altogether if such a feat was necessary.
If you could elaborate on that, either on or off list, I'd really appreciate
it. :)
Here's a place you can start:
http://www.sitepoint.com/article/standards-compliant-world
One beef I have with this code, and most code of this nature, is that it uses this to trigger it:
window.onload = externalLinks;
This is fine, if it's the only code you are assigning to onload, but it overwrites any previous onloads and is overwritten by subsequent onloads. But it should use the DOM (a standard! woohoo!) when possible to add a handler to an event. Unfortunately, IE on Windows doesn't use this, and IE on Mac won't use what IE Win uses. So I've written this code, that you are free to use (beware of line wrap, and send support questions offlist):
/*
the ondocload "event" is triggered by this code you place before the closing body tag:
<script type="text/javascript">window.ondocload();</script>
</body>it is the event before onload that indicates the document is done downloading;
after the func declaration we set two handlers to make sure events assigned to
docload are triggered onload if the author forgets to put the call in the doc.
*/
function bv_addListener(el, evt, fn) {
if (typeof el == "string") el = document.getElementById(el);
if (!el) return;
if (window.addEventListener && evt != 'docload') { // DOM
el.addEventListener(evt, fn, false); // false, because IE can't handle the truth
} else if (window.attachEvent && evt != 'docload') { // MS, incl Opera
el.attachEvent('on'+ evt, fn);
} else { // Mac IE and the ondocload event
var prevHandler = (typeof el['on'+ evt] == 'function') ? el['on'+ evt] : function () {};
el['on'+ evt] = function() { prevHandler(); fn(); }
}
}
bv_addListener(window, 'docload', function () { window.bv_docInited = true; });
bv_addListener(window, 'load', function () { if (!window.bv_docInited) window.ondocload(); });
/* END bv_addListener */
Now, if you want a script to run when the HTML has finished downloading (e.g., initialization scripts), use this:
bv_addListener(window, 'docload', someFuncName);
If you want something to run onload:
bv_addListener(window, 'load', someFuncName);
If you want to add any handler (e.g., someClickHandler) to any event (e.g., onclick) on any element (e.g., el), use this:
bv_addListener(el, 'click', someClickHandler);
If you don't have an element object to pass, it also accepts an ID as a string (and a future version will accept classes -- let me know if this interests you); this is handy when you want to attach an event to an element that doesn't exist yet:
bv_addListener(window, 'docload', function () { bv_addListener('someID', 'click', someClickHandler); });
The testpage for this is here:
http://www.bivia.com/sandbox/crossfade_slideshow/ test_bv_addListener.html
(tests will report as failed until the event is triggered -- until you click or mouseover)
I tested it a bunch, but would appreciate reports of other platforms success/failure. Once I get out from under some deadlines, I'll write this technique up and give it to the community.
--
Ben Curtis
WebSciences International
http://www.websciences.org/
v: (310) 478-6648
f: (310) 235-2067
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
