Hide element only if javascript is enabled

Question

I have a view that displays a textbox as follows:

@Html.TextBoxFor(m => m.CodeGuest, new {style = "display: none"})

it is displayed via javascript (so the user clicks a checkbox).

If javascript is not enabled, I must remove this line (style = "display: none") so that the textbox is displayed by default.

Pointy · Accepted Answer · 2011-09-22 23:37:03Z

5

I typed this as a comment because it seemed so obvious I figured somebody else could grab some upvotes, but:

<noscript>
  <div>
    Hello YOU HAVE JAVASCRIPT TURNED OFF YOU BIG SILLY
  </div>
</noscript>

The content of a <noscript> tag is shown only when JavaScript is disabled.

answered Sep 22, 2011 at 23:37

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ampersand Over a year ago

That msg will not be applicable to UAs that are not JS-capable. Furthermore, UAs w/ poor JS implementations may not reliably display the <noscript> contents. A catch-all solution would be to use JS that runs immediately to remove DOM elements that are not applicable to JS-capable/enabled UAs, as some of the other answers have shown.

Pointy Over a year ago

So how common are UAs without understanding of the <noscript> tag in 2011?

Simon M · Accepted Answer · 2013-07-13 06:06:45Z

4

You can use client side logic for this, have it visible as default and hide it with javascript on page load.

If you use jQuery it will be something like this:

$(function() {
    $('[name="CodeGuest"]').hide();
});

And remove the display: none from the Razor logic.

Another solution is to wrap the textbox element in <noscript>-tags.

For example:

<noscript>
     @Html.TextBoxFor(m => m.CodeGuest)
</noscript>

edited Jul 13, 2013 at 6:06

Simon M

2,9412 gold badges24 silver badges37 bronze badges

answered Sep 22, 2011 at 23:29

Robin Andersson

5,4483 gold badges28 silver badges47 bronze badges

2 Comments

Pointy Over a year ago

There's this tag, called <noscript>, whose content is only shown if JavaScript is disabled.

Robin Andersson Over a year ago

That is actually superior since it won't risk that the element will flicker on page load, added it to my answer.

jondavidjohn · Accepted Answer · 2011-09-22 23:29:29Z

3

The way I generally handle this is by hiding the elements initially WITH javascript when the Dom loads... This way, no javascript = no hiding...

answered Sep 22, 2011 at 23:29

jondavidjohn

62.5k21 gold badges120 silver badges159 bronze badges

3 Comments

Martin Jespersen Over a year ago

seriously? run js instead of using noscript tag for this seems like shooting birds with canons

GNi33 Over a year ago

@Martin Jespersen: I think, that he still needs the element in the DOM, because he is going to display the text-box after a checkbox is clicked. So I think hiding it via JS would be a perfectly acceptable way for doing this

Jerod Venema Over a year ago

There's at least some indication that this is dynamic manipulation, and not so simple as dumping the element inside a noscript block; otherwise, there'd be no point in ever hiding the element. Seems to me like a JS solution could be just as good as a noscript.

Anatoli Papirovski · Accepted Answer · 2011-09-22 23:47:54Z

3

The way I generally prefer to do this, to avoid the flashing of the content on long pages when using the JS hiding solution, is to add something like this to the CSS:

html.jsEnabled #CodeGuest {display: none;}

and then in the JS, just add this:

document.getElementsByTagName('html')[0].className += ' jsEnabled';

The advantage is that you can run that bit of code even before the DOM is Ready, since the HTML tag will already be available. Plus I can use that class for any other progressive enhancements I might have in mind.

answered Sep 22, 2011 at 23:47

Anatoli Papirovski

3582 silver badges6 bronze badges

Comments

RobG · Accepted Answer · 2011-09-22 23:35:59Z

1

I like Pointy's answer, but here's a simple script option:

<script type="text/javascript">
  document.write('<style type="text/css">#hideMe {display:none;}<\/style>');
</script>

While a noscript element is elegant, it is not consistent with the principles of feature and capability detection and graceful degredation. A better strategy is to decide whether to show the element or not only if the browser is capable of running the associated script.

The above suggestion has the same drawback.

answered Sep 22, 2011 at 23:35

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

GNi33 · Accepted Answer · 2011-09-22 23:36:36Z

1

You can just hide the element with JavaScript, so the element is displayed by default. Only if JavaScript is executed, the element is hidden.

I don't know what markup your given code generates, but with JavaScript you could do something like this (for a simple-case example, when the element gets an id):

elem = document.getElementById(id);
elem.style.display = 'none';

So it will get hidden, when JavaScript is enabled. Be sure to wait, until the DOM is fully loaded, before you execute your script, otherwise this could end up doing nothing.

For DOM-Manipulation, I tend to use jQuery, it has a good DOM-ready Listener and easy element-selection.

answered Sep 22, 2011 at 23:36

GNi33

4,5092 gold badges33 silver badges45 bronze badges

Collectives™ on Stack Overflow

Hide element only if javascript is enabled

6 Answers 6

2 Comments

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related