Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts

    Better than NOSCRIPT

    Just one line of JavaScript and a single CSS command will give you a far more powerful alternative to the noscript tag. The noscript tag is a block level tag while this alternative works simply by adding a class to any tag at all.

    The CSS: .js .nojs {display:hidden;}

    The JavaScript:
    document.getElementsByTagName('html')[0].class += ' js';

    Note that this is one of the extremely rare exceptions where the JavaScript needs to go in the head of the page rather than at the bottom of the body. In fact it is best embedded directly in the HTML above the link tag that attaches the CSS.

    Now all you do is to add class="nojs" to ANY tag in your page that you want removed if JavaScript is enabled.

    Apart from being able to use this on inline tags as well as block level tags this also has other benefits over using noscript.
    • You can add JavaScript tests for specific parts of JavaScript being supported and hide parts of the content only if that specific JavaScript is supported.
    • You can apply other styling to the page based on whether JavaScript is or isn't available, not just hide content.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Although it should be pretty much the standard solution many people don’t even think about this approach, and therefore I appreciate you posting this. This is the approach to progressive enhancement as I always promote it.

    One minor comment, though: You don’t even need to add a class “nojs” to all elements you want hidden if JS is enabled, just address the elements with CSS directly using the “base class” at the HTML element. Given the above pre-condition you could do, for example:
    Code:
    #someelement {
      [styles here]
    }
    .js #someelement {display: none;}
    It’s only hidden if JS is enabled since the “js” class is added with JS so if JS was disabled the class wouldn’t exist in the first place.

    By the way: Paul Irish has a different approach where he adds a static “nojs” class into the HTML and removes that class with JS. This is more of a “graceful degradation” approach rather than “progressive enhancement”, though, because it assumes JS to be present by default and non-JS users will only be given minor consideration (if the developer is lazy or ignorant).

    I prefer the “add class” method but either way, it’s good that you have mentioned this.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by VIPStephan View Post
    One minor comment, though: You don’t even need to add a class “nojs” to all elements you want hidden if JS is enabled, just address the elements with CSS directly using the “base class” at the HTML element.
    I agree. I mentioned adding a class as it is the most direct replacement for noscript.

    This approach allows all sorts of distinctions to be made when JavaScript is/isn't available.

    For example blue text for those without JavaScript and red text for those where any CSS can be substituted for text colour).

    Code:
    p {color:#00f;}
    .js p {color:#f00;}
    Another possibility:

    Code:
    supportsAjax = function() {
    if (typeof XMLHttpRequest != 'undefined') return true;
    else if (window.ActiveXObject) {
    var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp"];
    for (var i = avers.length -1; i >= 0; i--) {
    try {
    httpObj = new ActiveXObject(avers[i]);
    return true;
    } catch(e) {}
    }
    }
    else return false;
    }
    if (supportsAjax) document.getElementsByTagName('html')[0].class += ' ajax';
    which then allows you to do the same thing based on whether or not the browser supports XMLHttpRequest calls (or the IE4-6 equivalents) in JavaScript to decide what to display or how the page should look.

    You could even use both of these (and other feature sensing tests) together in the one page.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by felgall View Post
    which then allows you to do the same thing based on whether or not the browser supports XMLHttpRequest calls (or the IE4-6 equivalents) in JavaScript to decide what to display or how the page should look.

    You could even use both of these (and other feature sensing tests) together in the one page.
    well, don't get too ambitious; modernizr add dozens of feature classes to the HTML element for stuff like Audio, CSS3, and more, just like you describe. And of course, any of those classes imply JS is available. But thanks for the post, good info all around...
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by rnd me View Post
    modernizr add dozens of feature classes to the HTML element for stuff like Audio, CSS3, and more, just like you describe.
    Why bother with a huge script that adds all of those classes when you can add a much smaller piece of JavaScript that just adds the classes that you actually intend to use - unless you either don't really know how to write JavaScript properly or you actually do intend using a significant fraction of what the script provides.

    If you are only going to need two or three classes for specific things then using a script that adds dozens of classes you don't need is inefficient.

    Also for those who do decide to use a script such as modernizr (that basically provides lots of classes similar to the two examples I gave) this thread will help to show how it works and how it can be used.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Actually I've used something like this to show a default list type menu instead of a dropdown menu when JS is disabled.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

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