Menu
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
312
Definition and Usage The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.
Yes! You can definitely do that.
The Script element is used in the HTML file for using the JavaScript in the code. JavaScript allows us to enhance the functionality of the HTML file. The Noscript element is used to display the alternate text on the browser that does not support scripts.
Anything within < noscript>< /noscript> tags will render only when JavaScript is disabled . Users might disable JavaScript for a number of reasons. A handful of people even install browser extensions like NoScript to prevent the browser from running JavaScript.
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.
8
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
