TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

What if the user-agent is not JavaScript enabled?

Marja Ribbers has created a nice little Dreamweaver extension to spawn a custom window [a pop up]. What I like the most in Marja's script is that one can use the 'href' attribute of the current link as its target URI.

As you can read on her site, this technique has the following advantages:

  • No more 'null' links (eg. href="javascript:;" or href="#") needed,
  • XHTML Strict mode compatible,
  • Originating link still works with JavaScript disabled,
  • Search engines won't have trouble 'spidering' the original link.

I would add to this that you're not disabling a great feature of the browser: opening the link in a new window (or Tab).

Consider this very basic markup and script:

<a href="/portfolio.asp" onclick="window.open('portfolio.asp');return false;">Portfolio</a>

When the user clicks on "Portfolio", the page either opens in a new window or in the same one, depending on JavaScript support.

The "magic" relies on a single JS statement: "return false;". A JavaScript enabled browser evaluates each statements inside the event [onclick, etc.] and this last one ["return false;"] tells it to stop executing the click event, thus to ignore the "href" value. In a user agent that does not support JavaScript - it is the opposite - it is the event that is simply ignored all together.

But what if the link cannot be served to JavaScript challenged browsers? i,e. Portfolio.asp could be stuffed with client-side scripts and the page could lose all of its functionality without JavaScript support. So this is a reality; there are times where the target URI cannot be set to the "href" attribute value.

Could that be an excuse then to use a null link for once? Nope! A null link is always a bad idea. There is nothing more frustrating for the user than clicking on a link that doesn't trigger anything. To avoid such frustration I use a "requirements.asp" page [you can call it whatever you want] to let the user know why he/she can't reach the intended link. I use this requirements.asp page as the value for the "href" attribute, like this:

<a href="/requirements.asp" onclick="window.open('portfolio.asp');return false;">Portfolio</a>

I redirect users to a site's requirements page, but yours could contain text like "the page you tried to reach needs JavaScript support." or, better, "either your browser doesn't support JavaScript or it encountered a script error". I personally think that the latter is a pretty good solution because it kills two birds at once. This is made possible because most of the browsers quit when they encounter a script error to go straight to the "href" value.

ImportantIn any case, you should never use "javascript:;" for href value; because in Internet Explorer, documents stop loading as soon as a user clicks on such links.

Further reading

Opening Popup Windows with no extra markup.