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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Optimal method of applying css with javascript

    I'm designing a page that uses javascript+css for enhanced interaction. However, if javascript is disabled, I'd still like the page to be functional, albeit less fancy. Likewise, if css is disabled, it still needs to be functional. Finally, if both js+css are disabled, the page will be quite bare but still usable.

    For example, I use javascript to set a css style that hides certain panels of content. JS is used to toggle these and all is fine. If JS is disabled, then the css isn't applied, and all the content is visible (though not too pretty). If CSS is disabled, the inline CSS applied by the JS works fine. Finally, if both are disabled, all the content is visible.

    I'm wondering what's the best way to do this. Currently, I set the styles like this in the js file:

    Code:
    function initialize() {
        // set styles, for example:
        document.getElementById("panel").style.display = "none";
    }
    
    var onloadFlag = false;
    document.onreadystatechange = function() {
        if (!onloadFlag) {
            onloadFlag = true;
            initialize();
        }
    };
    
    // for older browsers
    window.onload = function() {
        if (!onloadFlag) {
            onloadFlag = true;
            initialize();
        }
    };
    The problem that sometimes comes up is I see the "fallback" styles briefly, before the JS kicks in and applies the enhanced css. How can I avoid this?
    Running Windows 7 x64

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,350
    Thanks
    11
    Thanked 589 Times in 570 Posts
    define all your styles in css linked in <head> to prevent flashing from late-executing scripts.

    add a nojs tag to your body, and remove the class with javasci[pt right away.
    that way, you can place all the rules in css along with your regular styles.
    this keeps everything in onl place and in the same language.




    Code:
    <body class="nojs">
    <script>document.body.className=document.body.className.replace(/\]bnojs\b/,"");</script>


    then in css for example,

    Code:
    h1 { color: red; }
    .nojs h1 { display: none; }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Thanks rnd_me, I like this technique. By the way, is the way I'm initializing (onload & onreadystatechange) the fastest way to modify the body's class?

    And just to clarify, the flash was not of unstyled content, it was of the default css if JS isn't enabled. When the JS finally loads, it overrides the default styles with enhanced ones.
    Running Windows 7 x64

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,350
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Quote Originally Posted by qwertyuiop View Post
    Thanks rnd_me, I like this technique. By the way, is the way I'm initializing (onload & onreadystatechange) the fastest way to modify the body's class?
    no, it's the slowest. i already posted the fastest...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Ah sorry I didn't catch the context of that line. I'd rather not have inline code though... I guess it's a tradeoff I'll have to consider. Thanks again.
    Running Windows 7 x64

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    You can as well add that class to the <html> element so you could have that line of JS in the document header like all the other scripts. But it doesn’t matter, really.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,350
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Quote Originally Posted by VIPStephan View Post
    You can as well add that class to the <html> element so you could have that line of JS in the document header like all the other scripts. But it doesn’t matter, really.
    i don't think <html> is valid with a class...

    you could do it opt-in. i was thinking that would result in a lot of extra css selector text, but i guess you would only need it on the few elements affected by scripting...
    in that case, set the default css to hide non-js stuff, and add ".js " in front of any rule that should apply only when javascript is enabled.

    then, you can use:
    Code:
    <script>document.documentElement.className+=" js";</script>
    as far as the inline is concerned, i agree philosophically, but every major page has a lot of this going on these days, so you won't be judged very harshly.
    i mean, look at the source of huffington post or nyt for pete's sake!!!

    i think it would be a bigger crime to load that one line of text from an external file, and all the overhead that brings with it... if you are already linking some js from the head, place the line above atop that external files's code.
    Last edited by rnd me; 01-05-2012 at 06:15 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Quote Originally Posted by rnd me View Post
    i don't think <html> is valid with a class...
    OK, you’re right with that. I usually take the opposite approach and add a class to the document with JS to use as selector, and had no problems adding it to the <html> element and using it that way (the validator doesn’t check DHTML).


  •  

    Posting Permissions

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