SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    unobtrusive javascript

    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
    discover song meanings and more http://www.music-explained.com

  2. #2
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Olly Hodgson
    thinkdrastic.net

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    discover song meanings and more http://www.music-explained.com

  4. #4
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Olly Hodgson
    thinkdrastic.net

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    discover song meanings and more http://www.music-explained.com

  6. #6
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Olly Hodgson
    thinkdrastic.net

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    discover song meanings and more http://www.music-explained.com

  8. #8
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, should be fine.
    Olly Hodgson
    thinkdrastic.net

  9. #9
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your help mr/ms gnarl..ha ha
    discover song meanings and more http://www.music-explained.com

  10. #10
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No probs.
    Olly Hodgson
    thinkdrastic.net


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •