10

Possible Duplicate:
Is there a html opposite to noscript

<noscript> makes it easy to have HTML code as a fallback if JS is disabled... but what if I want to have HTML code which is only shown when scripts are enabled? I can have a JS block which dynamically writes HTML, but is there a nicer way to do it using some regular HTML?

let's say I have a link:

<a href="test.com">This should only appear if Javascript is enabed</a>
Community
  • 1
  • 1
Mr. Boy
  • 57,008
  • 88
  • 294
  • 540
  • 2
    duplicate of this question: http://stackoverflow.com/questions/30319/is-there-a-html-opposite-to-noscript – codecraft Mar 03 '11 at 13:33

5 Answers5

13

Use a HTML element with style="display:none", set that to display:block from JavaScript.

Sample code (ugly as hell, but just to give you the idea)

<div id="hideThisFromNonJs" style="display:none">
Bla bla bla
</div>

<script type="text/javascript">
document.getElementById('hideThisFromNonJs').style.display='block';
</script>
Sean Patrick Floyd
  • 284,665
  • 62
  • 456
  • 576
  • In general I'm against [mixing CSS in your HTML](http://phrogz.net/CSS/HowToDevelopWithCSS.html#separatestyle). I can't decide if this is appropriate in this case or not, though. – Phrogz Mar 03 '11 at 13:35
  • 4
    @Phrogz Very valid remark. How about ` – Sean Patrick Floyd Mar 03 '11 at 13:37
  • 1
    Yup, that'd be good, and more general than your or my current (simpler to implement) answers involving ID only. I do find [this answer](http://stackoverflow.com/questions/30319/is-there-a-html-opposite-to-noscript/431554#431554) interesting, though. – Phrogz Mar 03 '11 at 13:40
3

I can have a JS block which dynamically writes HTML, but is there a nicer way to do it using some regular HTML?

Unfortunately, no, there isn't. You have to use some form of JavaScript.

I guess you could set up a class or something that is hidden by CSS:

<span class="jsonly">etc</span>

And then you could run something like:

$('.jsonly').show();
Matt
  • 42,312
  • 6
  • 93
  • 99
  • @Pointy The reason I quoted was because I was specifically talking about "using some regular HTML" - I've expanded the answer to avoid confusion – Matt Mar 03 '11 at 13:36
  • OK, well now that you've modified the answer, it looks like what everybody else is saying :-) - I didn't downvote but now I'll upvote – Pointy Mar 03 '11 at 13:38
  • I'll downvote because this is jQuery, not Javascript. If edited to be Javascript, it would be identical to other answers. – TheThirdMan Aug 29 '17 at 10:02
3
<style type="text/css" media="all">
  #test { display:none }
</style>
...
<a id="test" href="test.com">...</a>
...
<script type="text/javascript">
  document.getElementById('test').style.display = 'inline'; // or 'block', or whatever.
</script>
Phrogz
  • 284,740
  • 104
  • 634
  • 722
0

We appoached this by giving the elements a css class that styles them as display:none and showing it with JS.

spender
  • 112,247
  • 30
  • 221
  • 334
0

Not sure if this is what you are looking for, but if you give the element a style, say "hasjs"

.hasjs{
    display: none;
}

Then remove this with some jQuery.

$('.hasjs').removeClass('hasjs');
Tim B James
  • 19,853
  • 4
  • 73
  • 99