How to Show One <div> if Javascript Enabled and a Different <div> if It's Not?
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
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>
To keep the example short, I used IDs. It would be more appropriate to use classes. Also, most decent starter frameworks such as HTML5 Boilerplate and Modernizr will do this using CSS classes on the HTML tag so you have a global way to hide/show content from your CSS file instead of using JS. The <html /> tag starts with a no-js CSS class and it gets replaced by a js class in JS. This allows you to just prefix any CSS rules that are dependent on the existence of JS with the appropriate class. This is more semantic since it separates presentational things (what should be visually hidden/shown) from logical things (whether the page is running JS or not).
Another option for answering the original question 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 (var i = 0; i < cssDocs.length; i++) {
var css = cssDocs[i];
if (css.href === 'css/hide-slideshow.css') {
var parent = css.parentNode;
parent.removeChild(css);
break;
}
}
</script>
This script could also be shortened if you're using jQuery.
$("link[href='css/hide-slideshow.css']").remove();