Best way to hide a button on an HTML page with Javascript

Question

A simple page, with the button:

<button id="MyButton">Hello</button>

The problem is:

I need the button to show if Javascript is disabled
I need the button to be hidden if Javascript is enabled

A simple Jquery:

$('#MyButton').hide();

Isn't sufficient as the button 'flickers', it loads and then hides itself and it's very noticeable.

The one way I've found to make this work is by using JS to hide it immediately after:

<button id="MyButton">Hello</button>
<script>
    document.getElementById('MyButton').style.visibility = 'hidden';
</script>

This seems a bit ugly and breaking a couple of good standards rules, is this the only way to hide the button without a flickering effect?

@gdoron DOH! Missing the obvious! That's amazing thank you, please put it in an answer if you want some points! — Tom Gullen
– Tom Gullen, Commented May 2, 2012 at 15:11
@andreapier if JS is disabled how do you get it to then show? — Tom Gullen
– Tom Gullen, Commented May 2, 2012 at 15:12

Jared · Accepted Answer · 2012-05-02 15:11:19Z

14

Sounds like a job for the noscript tag!

<noscript>
    <button id="MyButton">Hello</button>
</noscript>

answered May 2, 2012 at 15:11

Jared

12.5k1 gold badge37 silver badges39 bronze badges

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

Comments

gdoron · Accepted Answer · 2012-05-02 15:11:36Z

10

<noscript>
    <button id="MyButton">Hello</button>
</noscript>

The HTML NoScript Element () defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

MDN

answered May 2, 2012 at 15:11

gdoron

151k59 gold badges302 silver badges376 bronze badges

Comments

Madara's Ghost · Accepted Answer · 2012-05-02 15:11:55Z

3

Use <noscript> element which holds a <style> element. <noscript> won't be parsed by browsers with active JavaScript. So that's:

<style>#MyButton { display: none; }</style>
<noscript><style> button#MyButton { display: inline; }</style></noscript>

Or better yet:

<noscript><button id="MyButton">Button</button></noscript>

Note I'm using button#MyButton to have a higher specificity value so that it will override the first method.

answered May 2, 2012 at 15:11

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Comments

kinakuta · Accepted Answer · 2012-05-02 15:11:21Z

2

use a no-js class:

<button id="MyButton" class="no-js">Hello</button>

define that class to hide the element:

.no-js { display: none; }

Then, in your ready handler, remove the no-js class - it will stay there if javascript is not enabled.

answered May 2, 2012 at 15:11

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

6 Comments

Madara's Ghost Over a year ago

Again, will cause flicker. The button won't appear and then suddenly it will.

gdoron Over a year ago

@Truth. If the js doesn't wait for DOM ready there won't be flickering. but <noscript> does it all for you out of the box, so why bother?

Madara's Ghost Over a year ago

Which is the exact reason for my downvote. Apparently, 4 other people don't think the same.

kinakuta Over a year ago

I'll have to keep my eye open looking for that, but I haven't encountered that behavior yet. If you wait for document ready, probably a little more likely, but DOM ready? Haven't seen it yet.

gdoron Over a year ago

@kinakuta. DOM ready == document ready. Did you mean document load? anyway it happens and happens a lot.

|

Collectives™ on Stack Overflow

Best way to hide a button on an HTML page with Javascript

4 Answers 4

Comments

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related