Grow your CSS skills. Land your dream job.

JS Failed After DOM Update?

  • # March 20, 2013 at 11:13 am

    Hi there,

    I’m trying to do some JS for when you turn off Javascript in your browser. I managed to get it working, but there are some AJAX calls that are making things that should be showing up only if JS is turned off, but JS isn’t turned off.

    Here’s what I have:

    $(‘#javascript-on’).show();
    $(‘.javascript-on’).show();
    $(‘#javascript-off’).hide();
    $(‘.javascript-off’).hide();

    I’ve never done anything like this before so I don’t even know what to type in Google, hence, why I’m here :) Help?

    # March 20, 2013 at 11:35 am

    >I’m trying to do some JS for when you turn off Javascript in your browser

    Wait…if JS is turned **off** how can you use AJAX/JS?

    Am I missing something?

    I confess I am a complete JS/AJAX noob!

    # March 20, 2013 at 11:53 am

    I’m guessing you’re using CSS to hide `#javascript-on` and `.javascript-on`, and then you want to use jQuery to show them and hide `#javascript-off` and `.javascript-off` instead? That should work. Make a codepen if it doesn’t, hard to debug with just that information.

    And yeah, this really sounds wtf weird:

    > I’m trying to do some JS for when you turn off Javascript in your browser.

    # March 20, 2013 at 12:44 pm

    If you’re using Modernizr, you should be starting your templates with `.no-js` class on your `` element. Then Modernizr will remove that class via JS (or if you aren’t using Modernizr you can simply write a tiny script yourself with jQuery: `$(‘html’).removeClass(‘no-js’)`).

    That means that you can change how the page looks via CSS with the `.no-js` hook if required. Example:

    .no-js .twitter {
    display: none;
    /* hide the twitter box for users with JS turned off since we won’t be able to make our AJAX call */
    }

    # March 20, 2013 at 7:31 pm

    Sorry, that one sentence doesn’t make sense.

    What I’m trying to do is show a certain div when JS is on and a certain div when JS is turned off. It works, but… when a user adds a product to their cart, the DOM refreshes, and the “javascript-off” div is being displayed which I don’t want.

    So that’s why I was wondering if there was a different way…

    # March 20, 2013 at 7:48 pm

    Go with what TheDoc said and you won’t have this problem anymore :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".