Is there a HTML opposite to <noscript>?

Re0sless_2098 0
Viewed 21197

Is there a tag in HTML that will only display its content if JavaScript is enabled? I know <noscript> works the opposite way around, displaying its HTML content when JavaScript is turned off. But I would like to only display a form on a site if JavaScript is available, telling them why they can't use the form if they don't have it.

The only way I know how to do this is with the document.write(); method in a script tag, and it seems a bit messy for large amounts of HTML.

noscript html javascript
12 Answers

Easiest way I can think of:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

No document.write, no scripts, pure CSS.

Will_537440

You could have an invisible div that gets shown via JavaScript when the page loads.

ceejayoz_19020100

First of all, always separate content, markup and behaviour!

Now, if you're using the jQuery library (you really should, it makes JavaScript a lot easier), the following code should do:

$(document).ready(function() {
    $("body").addClass("js");
});

This will give you an additional class on the body when JS is enabled. Now, in CSS, you can hide the area when the JS class is not available, and show the area when JS is available.

Alternatively, you can add no-js as the the default class to your body tag, and use this code:

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

Remember that it is still displayed if CSS is disabled.

user_1361730

In the decade since this question was asked, the HIDDEN attribute was added to HTML. It allows one to directly hide elements without using CSS. As with CSS-based solutions, the element must be un-hidden by script:

<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>
user_86611440

You could also use Javascript to load content from another source file and output that. That may be a bit more black box-is than you're looking for though.

DannySmurf_19752820

Here's an example for the hidden div way:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>

(You'd probably have to tweak it for poor IE, but you get the idea.)

Shadow2531_16970

Alex's article springs to mind here, however it's only applicable if you're using ASP.NET - it could be emulated in JavaScript however but again you'd have to use document.write();

Ross_20250

You could set the visibility of a paragraph|div to 'hidden'.

Then in the 'onload' function, you could set the visibility to 'visible'.

Something like:

<body onload="javascript:document.getElementById(rec).style.visibility=visible"> <p style="visibility: visible" id="rec">This text to be hidden unless javascript available.</p>

Admin1

There isn't a tag for that. You would need to use javascript to show the text.

Some people already suggested using JS to dynamically set CSS visible. You could also dynamically generate the text with document.getElementById(id).innerHTML = "My Content" or dynamically creating the nodes, but the CSS hack is probably the most straightforward to read.

cpm_36740
Related