How to Show One <div> if Javascript Enabled and a Different <div> if It's Not?

Question

I'm using some Javascript to display a "photo fade rotator" in a <div>. If JS is not enabled, however, I've got an animated gif I want to display instead. I actually have it working with this code:

<div id="slideshow" class="show pics float-left">
    <img src="images/banner-photos/new-01.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-02.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-03.png" width="343" height="228" alt="photo" />
</div>

<noscript>
    <link href="css/hide-slideshow.css" rel="stylesheet" type="text/css" />
    <p class="adjust"><img src="images/banner-photos/animation.gif" alt="slideshow" /></p>
</noscript>

External JS files do their magic on the <div>. The classes on id="slideshow" set dimensions, padding, margin, positioning, etc. The "hide-slideshow" css file does a "display:none" on #slideshow, and the "adjust" class around the animated gif does some pushing and pulling to get it where it needs to be (which is where the slideshow would be if it wasn't hidden).

I've tested this in FF3, IE7, IE8, Chrome, and Safari (Win). The good news is that it works like a charm. The bad news is that it doesn't pass the W3C validator. I get an error that says, "document type does not allow element "link" here".

Even though my method works, is it too kludgey? Is there a better way to show one <div> if JS is enabled and a different <div> if it's not, in a way that works cross-browser and passes the validation?

Thanks!

Answer 1

Just give the no-Javascript div its own class and put its style definition in your stylesheet. Include it in a <noscript> block. You can dynamically insert the other div with your script.

Answer 2

I've <link...> element belongs in the <head...> hence the error.

The simple solution is to place the "no javascript" css into a main css file that is loaded in the <head...>

Answer 3

Try something like this. It degrades gracefully and doesn't require a <noscript /> tag.

<div id="hasJavaScript" style="display: none">
    <!-- Contents hidden when JavaScript is disabled -->
</div>

<div id="noscript">
    <!-- Contents shown only when JavaScript is disabled -->
</div>

<script type="text/javascript">

    document.getElementById('hasJavaScript').style.display = 'block';
    document.getElementById('noscript').style.display = 'none';

</script>

Another option is to add the link to the CSS document in the head by default and remove it using JavaScript. (DISCLAIMER) I haven't tested this, but it should also work across all browsers.

<script type="text/javascript">
    var cssDocs = document.getElementsByTagName('LINK');
    for (css in cssDocs) {
        if (css.href === 'css/hide-slideshow.css') {
            var parent = css.parentNode;
            parent.removeChild(css);
        }
    }
</script>

This script could also be shortened if you're using jQuery.

$("link[href='css/hide-slideshow.css']").remove();