Arc90 New Window Link and My Big Welcome

Hello World!

LOL, for some reason that simple phrase reminds me of what seems a million years of trial and error programming. Through my limited years of college, I can remember writing Assembler programs for dinosaur IBM P390 servers for hours. In my first assignments, just so the screen can produce those words.

In any case, my name is Jason Fisch and this is my blog. I never thought myself as a blogger, but in my job field I have found it to be critical to run one in order to network and figure out those big roadblocks. Although I went to school for programming big IBM servers, I have traveled a different path of web design. An interest and hobby since I was 14 and now my own business.

Now that’s out of the way, I am currently working on my companies site. While I am at it, let me put you on a great Java script I am currently using and have modified. I know Java script right, who needs AJAXs when you have some good old java script. To stay on track now and to make a long story short, I really believe in valid code and accessible websites. So while setting up my company’s website I found a good problem. What accessible way can I make links open in a new window???

With some internet research and my own thinking, I came to two conclusions. Since the website is done in PHP, I could make a PHP Style Switcher that a user could select if they want links to open in a window or not (of course the not being a default - standards, standards, standards). Or I could set up two side-by-side links one that opens in the same and the other that opens in a new window.

Then I found it! The perfect solution to my problem. A java script that places a small image next to a link that if clicked will open that link in a new window. Even better is, if the user does not have java script enabled on their browser, then the image does not show at all causing any confusion. This great script was written by Arc90 (www.arc90.com) and they even had the courtesy to source it out with a pretty much open license! It is so pretty I have decided to even use the script in this blog. So every time you see a: , don’t forget to click it to open it in a new window.

While using the script I came up with what I felt were three issues, so here are some modifications that Arc90 and myself have made to the code.

Issue #1: I decided to remove the a.href and :// qualifier in the code. The code uses a qualifier to select a link that should be using the code. Arc90’s version requires the HTML link to include an a.href and :// somewhere in the link as well as the class name of “extlink”. I feel that the class name in its self is enough to qualify a link, especially if you set up your links via the site root which would not include a ://. So I just removed the bold section of Arc90’s code:

if (((b != ” && a.href.indexOf(b) < 0) || b == ”) && a.href.indexOf(’://’) > 0 && ((arc90_extLinkUseClassName && a.className.indexOf(’extlink’) >= 0) || !arc90_extLinkUseClassName)) { show the image }

and bang, its all set:

if (((arc90_extLinkUseClassName && a.className.indexOf('extlink') >= 0) || !arc90_extLinkUseClassName)) {show the image}

Issue #2: The code would work without any script errors, however the link icon would not display in Opera. In addition the link would move when the script ran as to allow the icon, however the icon would not display. I know that Opera has CSS issues with the positioning of background images via CSS, so advise Arc90. They were very perceptive to my concern and quickly had their CSS guy change the icon from a background image to a regular image allowing it to work in Opera. In addition I feel this was a good change because of the issue if images were disabled, the script would not work. Now the script will work with a display of its “Alt” text if images are disabled. An important accessibility issue. So in any case here are the two mods for the icon display:

CSS Edit:
.arc90_extlinkIMG {
margin-left: .3em; < - Less Reliance on CSS positioning, a plus!
cursor: pointer;
}

JavaScript Edit:
var m = arc90_newNode('img', '', 'arc90_extlinkIMG'); < - changed to an IMG from a Span w/ a background image
m.src = “/tools/c/images/extLink_img.gif”; < - Linked to image in Javascript, instead of CSS
m.title = ‘[External Link]’;
m.alt = ‘External Link Icon’;
eval(’arc90_addEvent(m, “click”, function() { window.open(”‘+ a.href +’”); });’);
a.parentNode.insertBefore(m, a.nextSibling);

Issue #3: Is a working progress that I will hopefully get some free time to fix. Nothing is new with IE’s ever growing list of compatibility issues and of course this is the case with this great tool. Unlike any other browser in the market today, IE will not pass the HTTP header field. So you have to manually define this in the java script with the http.header. This creates an issue with say W3C’s link on your site that it meets valid code. Since it uses the HTTP header to pass your URL, the link will not display in a new window if done in IE. I hope to have some free time soon to correct this one.

In any case, this is a GREAT tool and I would like to give a special thanks to the guys at Arc90 for being so kind to put it out to the web development community!

Tags: css, external-link, java-script, new-window

This entry was posted on Friday, December 8th, 2006 at 7:54 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.