[Red Cap]

Inspired largely by this article from dustin diaz http://www.dustindiaz.com/top-ten-javascript
I was wondering what little indispensible bits of javascript does everybody have in their core.js / common.js / library.js / base.js ?

heres one I always use:

function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("class") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;

handy little script for those using strict doc types simply adds target="_blank" to all links with class name "external".

[freelancr]

Always the top 3, and sometimes 4 and 5.

- Breakout of Frames
- XHTML 1.0 Strict External Links (rel tag)
- SWFObject
- GoogleMaps
- Lightbox JS 2

Technically you should be using the "rel" tag, as what you are doing is behavioural and not presentational. Also allows you to use the "class" tag properly if required.

[Red Cap]

good spot, I use the class attribute as I can target such links through the css aswell as the js. For example, using a css background-image I normally give each external link a small icon to indicate that it will open in a new window - instead of having to set both the rel and class attributes to "external", i just set the class. Admittedly it's a little lazy, but it saves a bit of time...

however, i'm not convinced the rel attribute is correct either. Somebody pointed this solution in an old post:

http://www.456bereastreet.com/archiv...pt_version_11/

heres another useful little script, for targetting elements via css selectors:

http://simon.incutio.com/archive/200...entsBySelector

[freelancr]

Fair point, just thought id point it out incase one day you got stuck being unable to style a certain link differently, and you may of had more than one of them so you couldnt use ID. Nevermind I think I will use classes for icons on my external links, to make it clear they open in new windows, havent really seen any decent icons that would do it justice as it can look tacky quickly.

In your first post, the link had "event" stuff. What is the add event? is that to replace the need for body onload therefore separating more of the JS from the XHTML?

[Red Cap]

the addEvent() and addLoadEvent() functions simply manage all your functions that are attached to the onload event - very useful if you have multiple functions. As the onload event handler can only hold one function at a time, addEvent() and addLoadEvent() effectively creates a queue of functions to be executed in order when the page loads.

For external links i use the icon suggested in css mastery - its on the cover of the book http://www.cssmastery.com/

[freelancr]

just had yet another brain fart.

Use "rel", then in the script get it to change the class (for the icon) and title (opens in new window text) attributes! That way you only have to set the rel, and hopefully you wont need to use the "class" element, and if they have JS disabled they dont see the open in new window stuff, so it doesnt look silly!

[Luke Redpath]

Originally Posted by freelancr

Technically you should be using the "rel" tag, as what you are doing is behavioural and not presentational. Also allows you to use the "class" tag properly if required.

Class is just as appropriate for behaviour as it is presentation.

[Luke Redpath]

Originally Posted by freelancr

Fair point, just thought id point it out incase one day you got stuck being unable to style a certain link differently,

Dont forget elements can have multiple classes.