unobtrusive javascript

**namtax** · May 24, 2007, 08:56

i have just started using prototype and scriptalicous to add some cool effects to my web pages.

However, I am aware that it is useful to provide support to people who do not have javascript enabled.

Therefore I wanted to know the best way to cater for non-javascript users.

I am aware that you can add a message between <noscript> tags,

And i am also aware that you can also create a version of the page which functions without javascript, and then do something like this, in the page

<script language="javascript">
window.location ="Javascript.html";
</script>

to redirect those with javascript enabled to the page with javascript functions.

However my ideal solution would be to have an if function on the page, which would say

<cfif javascipt is enabled>
link with javascript functions
<cfelse>
link without javascript functions
</cfif>

cheers

**gnarly** · May 24, 2007, 09:16

The technique I use is to add any functions that require javascript, using javascript, if that makes sense.

For example, you have a div that contains buttons that only work when javascript is enabled. I would use javascript to add that box to the DOM when the page loads. That way non-js users don't end up with a useless box of buttons on their page.

Progressive enhancement is what you should aim for, as opposed to graceful degradation. Steve Marshall wrote a great piece on the subject: http://nascentguruism.com/journal/grace

**namtax** · May 24, 2007, 09:26

thanks gnarly,

the thing is, for example...i have a "show help on this feature" function on my site, which currently works using javascript show/hide....all i would want for the non js users, is the for the "show help on this featute" link to direct them to anoter html help page, instead of triggering the javascript show/hide feature.

so

<if javascript enabled>
<a href ="#" onclick="show_help()">click here for help</a>
<if javascript not enabled>
<a href ="show_help.html">click here for help</a>

ill check that link out as well

thanks

**gnarly** · May 24, 2007, 09:35

You could code it like this:

HTML Code:

<a id="help_link" href="help.html">help me please</a>

Then onload, fire a function that finds the link using it's ID and adds the onclick event to it (I think prototype makes that pretty easy). If you show_help(); return:false; the link's original href won't be followed.

Does that make sense?

**namtax** · May 24, 2007, 09:51

yes i think that makes sense..in this respect, couldnt you just have

<a id="help_link" href="help.html" onclick="show_help();">help me please</a>

**gnarly** · May 24, 2007, 09:59

You could, but inline javascript doesn't fit my definition of unobtrusive

The idea is that you keep your content, presentation and behaviour in separate layers, i.e. keep your HTML, CSS and Javascript code separate.

It'd also need to be onclick="show_help(); return false;" to avoid the browser wandering off to help.html.

**namtax** · May 24, 2007, 10:07

yeah, i understand what you mean, but for a quick fix whilst i get more confident with creating pages without inline javascript my suggestion would be ok?

thanks