Is there a HTML tag that does the opposite of <noscript>? That is, displays some content only if JavaScript is enabled? For example:
<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>
<ifscript>
Of course <ifscript> doesn't actually exist. I know I could achieve the same result by adding <h1> to the DOM using JavaScript, but if I'd prefer to do this with (X)HTML if possible.
Thanks, Donal
There the <script> is for. Just initially hide the particular piece using CSS and use JavaScript to display it. Here's a basic kickoff example:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643</title>
<script>
window.onload = function() {
document.getElementById("foo").style.display = 'block';
};
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
...or, with little help of jQuery ready() which is a tad sooner with displaying the content:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').show();
});
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
To improve user experience, consider placing the <script> call directly after the particular HTML element which needs to be toggled, so that there's no "flash of content" or "element shuffle". Andrew Moore has given a good example in this topic.
Alternatively, you can do it (hacky) the other way round with <style> in <noscript>. This is syntactically invalid, but allowed by all browsers from IE6 and up, including the W3C-strict Opera:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with CSS in noscript</title>
</head>
<body>
<noscript>
<style>#foo { display: none; }</style>
<p>JavaScript is disabled
</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
I usually do the following in my HTML pages:
<html>
<head>
<!-- head tags here -->
</head>
<body class="js-off">
<script type="text/javascript">
// Polyglot! This is valid MooTools and jQuery!
$(document.body).addClass('js-on').removeClass('js-off');
</script>
<!-- Document markup here -->
</body>
</html>
Using this technique has the following advantages:
You can target both browsers with JavaScript enabled and those without directly in your CSS file.
It's valid XHTML (<style> tags in <noscript> is invalid, <noscript> tags in <head> is invalid).
The style changes first thing even before the rest of the page is rendered. It fires before domReady therefore no styling flashes.
That way, when you have widgets with different style depending if JS is enabled or not, you can define your style at the same place in the CSS file.
<style type="text/css">
#jsWarning {
color: red;
}
#jsConfirm {
color: green;
}
body.js-on #jsWarning,
body.js-off #jsConfirm {
display: none;
}
</style>
<div id="jsWarning">This page requires JavaScript to work properly.</div>
<div id="jsConfirm">Congratulations, JavaScript is enabled!</div>
How about
<script>
document.write("<h1>Click on the big fancy Javascript widget below</h1>");
</script>
? Convert to use DOM tree if you like.
This will work:
<script type="text/javascript">
if (document != undefined)
{
document.write("Woohoo, JavaScript is enabled!");
}
</script>
<noscript>
Sorry mate, we use JavaScript here.
<noscript>
There is an interesting discussion of these issues at Alex Papadimoulis's Blog. It includes an asp.net ScriptOnly control which acts like the ifscript control you asked about.
