How to hide parts of HTML when JavaScript is disabled?

T

8

19

I'm trying to accommodate users without JavaScript. (By the way, is it worth the effort nowadays?)

In one HTML file I'd like part of it execute if scripts are on, and another part if scripts are OFF.

The <noscript> tag lets me do the former, but how to achieve the latter? How can I mark a part of HTML so that it is not parsed by browser if scripts are off?

Theona answered 16/10, 2009 at 11:47 Comment(0)

S

6

~~here's a video tutorial on how this can be done with jQuery: http://screenr.com/ya7~~

Code:

<body class="noscript">
<script>
$('body').removeClass('noscript');
</script>
</body>

And then just hide the relevant elements under body.noscript accordingly.

edit However, JQuery might be bloated for a small fix like this one, so I suggest Zauber Paracelsus' answer since it does not require JQuery.

Sunnisunnite answered 16/10, 2009 at 11:56 Comment(1)

please use the solution of @Zauber Paracelsus since it does no require jQuery. – Sunnisunnite 27/4, 2018 at 8:50

A

58

I had been looking around for a way to do this so that I could hide a navigation dropdown menu that gets rendered nonfunctional when javascript is enabled. However, all of the solutions for changing the display property did not work.

So, what I did first was assigned an ID (ddown) to the div element surrounding the dropdown menu.

Then, within the head section of the HTML document, I added this in:

<noscript>
    <style>
        #ddown {display:none;}
    </style>
</noscript>

And that just worked. No dependency on javascript, jquery, or any other scripting: just pure HTML and CSS.

Actinic answered 13/12, 2012 at 10:25 Comment(3)

This should be the default answer - simple, and does not require JQuery – Prediction 16/9, 2016 at 7:7

For some reason this isn't working correctly in my page. Even if JS is enabled, it still hides the selector in <noscript><style>... {display:none;}</style></noscript>. My page is XHTML by the way. – Cullet 29/12, 2016 at 9:42

@Cullet the noscript tag is not supported in XHTML. – Fruitage 30/8, 2018 at 8:54

R

10

Default the bits you want to hide as styled as display:none and switch them on with jQuery or JavaScript.

Reposit answered 16/10, 2009 at 11:50 Comment(0)

S

6

~~here's a video tutorial on how this can be done with jQuery: http://screenr.com/ya7~~

Code:

<body class="noscript">
<script>
$('body').removeClass('noscript');
</script>
</body>

And then just hide the relevant elements under body.noscript accordingly.

edit However, JQuery might be bloated for a small fix like this one, so I suggest Zauber Paracelsus' answer since it does not require JQuery.

Sunnisunnite answered 16/10, 2009 at 11:56 Comment(1)

please use the solution of @Zauber Paracelsus since it does no require jQuery. – Sunnisunnite 27/4, 2018 at 8:50

E

3

By the way, is it worth the effort nowadays?

Yes, it's worth worrying about accessibility. You should use progressive enhancement where possible, i.e. make a basic version that works without scripting and then add the scripting functionality on top of it.

A simple example would be a pop-up link. You could make one like this:

<a href="javascript:window.open('http://example.com/');">link</a>

However, this link wouldn't work if someone, say, middle-clicked or tried to bookmark it, or had scripts disabled etc. Instead, you could do the same thing like this:

<a href="http://example.com/" 
   onclick="window.open(this.href); return false;">link</a>

It's still not perfect, because you should separate the behavior and structure layers and avoid inline event handlers, but it's better, because it's more accessible and doesn't require scripting.

Elisavetgrad answered 16/10, 2009 at 12:2 Comment(2)

You don't even need JavaScript for that. Just name your target (or use 'target="_blank"') – Send 16/10, 2009 at 14:11

What if you want a popup window? Then use window.open(). – Pavlish 14/5, 2020 at 22:11

H

1

The jQuery way:

$(document).ready(function(){
    $("body").removeClass("noJS");
});

Pseudo CSS

body
    .no-js-content
        display: none;
body.noJS
    .main
        display: none;
    .no-js-content
        display: block;

HTML

<body class="noJS">
    <div class="main">
        This will show if JavaScript is activated
    </div>
    <div class='no-js-content'>
        This will show when JavaScript is disabled
    </div>
</body>

Herron answered 16/10, 2009 at 11:56 Comment(0)

R

1

If the content only makes sense when JavaScript is enabled, then it should be inserted by the JavaScript code directly rather than being rendered. This could either be done by simply having HTML templates as strings within your JavaScript code, or using Ajax if the HTML is more complex.

As mentioned by Reinis I. this is the idea of Progressive Enhancement.

Regarding the CSS techniques of using a class name on the body tag, I would advise doing this the other way around and adding a 'js-enabled' class to the body tag with JavaScript that would alter the page CSS. This fits in with my above comment about keeping all initial HTML 'non-JavaScript friendly'.

Rawls answered 16/10, 2009 at 12:14 Comment(0)

P

0

You could edit the HTML of the page with Javascript

document.querySelector('div').style.display = 'block';

div {
  display: none;
}

<div>Div</div>

Try it with JS and the without JS.

Pavlish answered 14/5, 2020 at 22:28 Comment(0)

P

0

This makes the content inside the div inaccessible without JS but with JS it adds the content into the div with JS and you can also do that with the CSS. To change the CSS add:

document.querySelector('style').innerHTML = 'div{}';

document.querySelector('div, #div').innerHTML = 'Div';

<div id='div'></div>

Pavlish answered 14/5, 2020 at 22:37 Comment(0)

Recommended topics

Hot tags