ansaurus

Question

How do I show content when Javascript isn't available, hide it when javascript is available and not flicker in either case?

Answer 1

+12 A:

Just put anything inside <noscript> ... </noscript> tags and then it will only appear if JavaScript is not enabled/available.

Dave Anderson 2009-06-17 12:49:05

This would mean that everyone needs to download the HTML for each element twice. Once for the noscript-tag, and once for the hidden content to be shown by javascript.

Magnar 2009-06-17 12:54:32

Doh! I can't believe I didn't think of that! Since you were first to answer I've accepted your answer. Thank you all.

rikh 2009-06-17 12:58:29

NOSCRIPT tags suck! They are ineffective on some mobile devices and don't work when scripts are blocked by a corporate firewall. -1

J-P 2009-06-17 13:22:33

Magnar, can you put your answer back up again. I wanted to try that as well, but it seems to have gone...

rikh 2009-06-17 13:59:47

JP, in that case I think the corporate firewall is certainly more to blame. I don't think web designers should *care* about bugs caused by something that's actively mangling their code as a security "feature".

Nicholas Flynt 2009-06-17 16:12:11

Magnar - yes badly used the noscript tag can rapidly increase the page weight but used judicously can be very affective. Like any 'tool' that is used poorly the costs can outweight the benefits. I think in this situation there is only one button required if there is no JavaScript. If the client-side detection realises it needs the button is it not better for it to already be on the page rather than require another request to get it?

Dave Anderson 2009-06-17 18:57:29

Answer 2

+4 A:

It depends on how you are hiding it, are you using a DOM ready or a window ready? Window ready waits for all images to download, which is generally far too long.

For accessibility, reasons, I'd hide it on DOM loaded. But to ensure it won't show up, you could put it in a noscript element

<noscript>
    <input type="submit" />
</noscript>

As for your last paragraph, nothing like that can happen in the absence of JavaScript.

alex 2009-06-17 12:50:13

Answer 3

A:

You could use script before and after the submit button to write hidden div element start and end tags.

Stephen Denne 2009-06-17 12:56:53

Answer 4

+1 A:

Just write unobtrusive javascript: http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/.

What you do is write your page as a normal page, but, then use the code at the bottom to start the javascript, and start editing the page to make it more interactive. The beauty of this is that if they have javascript turned off the page is normal, but, if they have it on, then you can gracefully add more features.

I am not a big fan of the option as that may mean lots of extra code to be downloaded that isn't needed.

On this page look at comment 5 for a good solution to be able to make changes before anything is actually displayed: http://dean.edwards.name/weblog/2006/06/again/

James Black 2009-06-17 13:15:59

Answer 5

A:

One option would be to start with your button shown, and then modify its CSS from JavaScript:

<head>
    ...
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
    <script>
        document.styleSheets[0].addRule(".hideMe", "display:none");
    </script>
    ...
</head>

Modifying the stylesheet instead of the button (and putting this code outside of an onload) ensures that it'll be hidden before the button is drawn.

Sidnicious 2009-06-17 22:43:27

ansaurus

tags:

views:

answers:

How do I show content when Javascript isn't available, hide it when javascript is available and not flicker in either case?

related questions