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

StackOverflow https://stackoverflow.com/questions/1006798

Question

I have a simple form for shipping options and I am using javascript to auto submit the form when someone selects a new option from the drop down list.

In order to support browsers without javascript there is also a button to submit the form. This button is hidden using javascript.

However, this means my button is visible for a brief period of time and can cause a flicker as the rest of the content is reformatted.

Can anyone suggest a way of creating the button so it starts off hidden, but is made visible only if javascript is not available? eg, start out with display:none; and magically change to display:block; if and only if there is no javascript.

Was it helpful?

Solution

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

OTHER TIPS

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.

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/

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top