JavaScript may be coded in inline or “DOM zero” style, like this:
<a href="#" onclick="window.open(foo,bar,baz);">Link text here</a>
The entire function is inline within the HTML, and so your page head does not need to be extended.
A much nicer way to do this is to use the “rel” attribute of the href tag to signal to a head function that the link should be handled a certain way. This means that visitors who have disabled JavaScript (or ignore it – like Google) JavaScript will still be able to use the link.
In your page head, you would set up an unobtrusive “listener” function to find all links and extend them as required by their rel (relation) attribute. (This example uses Prototype, the easiest way to add that to your page is with my Protaculous Action, available at ActionsForge. If you’re using Protaculous on your page, you can leave off the outer document.observe… function as the Action will create it for you.)
document.observe('dom:loaded',function(){
var external = function(element){
var element = $(element);
var href = element.href;
var rel = element.rel.split('-') || [];
rel.shift(); //get rid of the ext
var name = rel.shift(); //get the name
var args = rel.join(','); //moosh the rest to a string
//listen for clicks on this element
element.observe('click',function(evt){
evt.stop(); //stops the normal link behavior
window.open(href,name,args);
});
return element;
}
$$('a[rel^="ext"]').each(function(elm){
external(elm);
});
});
Now back in HTML, you would create your links like this:
<a href="foo" rel="ext-bar-baz">Link text here</a>
(In Freeway, use the Extended dialog to add a “rel” attribute.) The listener function goes through your whole page when the window is loaded, finds any links that contain the string ext in their rel attribute and attaches an event observer function to them. This observer listens in turn for a click on that link, and if it “hears” one, suppresses the normal behavior, and substitutes the pop new window code, using the values of the rel attribute as the configuration values. So for your real example, the link would look like this:
<a href="http://msn.com" rel="ext-linkname-height=380-width=300-scrollbars=no">Open MiniMSN</a>
Now you have the best of all possible worlds: links that work without script and are decorated when script is available; one function in the head of the page instead of a lot of inline onclick handlers that all have to be changed separately; clean separation of presentation from content.
Walter
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options