jQuery + Modernizer - Do not display a div if javascript is disabled? (See Code)

Question

I am trying to enhance the menu of my website a bit by making use of the jQuery accordion plugin:

This works perfectly fine and i think that it is a great plugin to make use of... However, i have noticed that it requires a specific layout in order to achieve these results:

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <p>
            ETC...
        </p>
    </div>
    NB: repeated for every result
</div>

Now this is a bit of a problem in that when javascript is disabled, the entire output of this menu is displayed (all categories and containing information).

This is simply too much information to be output all at once and this is the reason that it has been broken up with PHP in the first place. In essence it would look like this:

// No category selected
* Fruits
* Vegetables

// Category selected
o Fruits
 - Apples
 - Oranges
* Vegetables

// Javascript Disabled
o Fruits
 - Apples
 - Oranges
* Vegetables
 - Potatoes
 - Onions

So what i would like to do, is provide an alternate means of navigation for users that have disabled javascript (the old menu that is fully functional and works regardless).

I currently make use of a few options in modernizer:

http://modernizr.com/

To increase browser support on some CSS properties i have used. I am aware that it can be used to detect if javascript is enabled by appending a class "js" to the body tag.

So with that, i decided to try and wrap the old menu within a containing div, and the new menu within a containing div. My idea is that i can then these divs with display: none;.

Before i carry on, i am really just guessing here so if i am going about this the wrong way... I would appreciate it if someone could point me in the right direction. With that out of the way, i found an article on stackoverflow that relates to this:

PHP & <noscript> combination to detect enabled JavaScript in browser

And with my very limited knowledge of jQuery have adapted it slightly to fit what i hope to achieve:

<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
    // Remove the no-js and add the js (because JS is enabled (were using it!!)
    $("body").removeClass("no-js").addClass("js");
})
// Put it in a var so you dont traverse the DOM unnecessarily.
var useJS = $("body").hasClass("js");
if(useJS){ // true or false if <body> has class JS.
    // JS Enabled
    $("#oldMenu").css("display", "none");
    $("#newMenu").css("display", "inline");
} else {
    // JS NOT enabled
    $("#newMenu").css("display", "none");
    $("#oldMenu").css("display", "inline");
}
</script>

Now the problem I am facing is that i cannot seem to get this script to register or make any visible difference. When i look at the body tag in the source there is no class on the body tag. The menu is not triggering as i thought it would and i am now after quite some time... Very confused.

If anyone could offer me some assistance, advice, information or indication that would help me to solve this current issue, i would really, REALLY appreciate that!

Thank you for taking the time to read through my line story! :)

EDIT:

@RomainPaulus suggested this and it works:

<script type="text/javascript">
$(document).ready(function(){ // Use jQuery!
    // Remove the no-js and add the js (because JS is enabled (were using it!!)
    $("body").removeClass("no-js").addClass("js");
    // Put it in a var so you dont traverse the DOM unnecessarily.
    var useJS = $("body").hasClass("js");
    if(useJS){ // true or false if <body> has class JS.
        // JS Enabled
        $("#oldMenu").css("display", "none");
        $("#newMenu").css("display", "inline");
    } else {
        // JS NOT enabled
        $("#newMenu").css("display", "none");
        $("#oldMenu").css("display", "inline");
    }
})
</script>

score 2 · Accepted Answer · answered Aug 20 '13 at 23:13

2

Kenneth's response explains a lot, but I have noticed something else. Your code

var useJS = $("body").hasClass("js");

is executed before

$(document).ready(function(){ // Use jQuery!
    // Remove the no-js and add the js (because JS is enabled (were using it!!)
     $("body").removeClass("no-js").addClass("js");
})

You should put everything inside the $(document).ready(function(){ ... }) So I guess that explains why your code doesn't work.

answered Aug 20 '13 at 23:13

Romain Paulus

2,306
1
20
20

I will give that a try, the amount of jQuery i understand is shocking :) Thank you so much for the suggestion! – Craig van Tonder Aug 20 '13 at 23:16

score 1 · Answer 2 · answered Aug 20 '13 at 23:11

1

The problem you face here is that, obviously when Javascript is not enabled, you're Javascript is not executing.

What you need to is hide the DIV by default with CSS. Then, when your page loads, show it through JS.

Javascript disabled => Div stays hidden, because no code is executed
Javascript enabled => div is hidden on load, but the script shows it

Also, if Javascript is disabled, Modernizr won't help, since it's a JavaScript library.

answered Aug 20 '13 at 23:11

Kenneth

28,294
6
61
84

Hey, thank you for the response. I have javascript enabled though and the menu in my mind should disappear (i've taken out the code for new menu). I appreciate the input about the CSS addition as this did not cross my mind, i had intended to use the noscript tag as a 'failsafe' – Craig van Tonder Aug 20 '13 at 23:15
I really appreciate the suggestion relating to the CSS at this is something that i think would make a good addition indeed and definitely worthy of a few up votes as it is not something i saw covered in my night of sifting through google. Thank you!! – Craig van Tonder Aug 20 '13 at 23:22

jQuery + Modernizer - Do not display a div if javascript is disabled? (See Code)

2 Answers2