How to eliminate post-render "flicker"?
How about combining some of these solutions:
<style type="text/javascript"> .only-without-script { display: none; }</style><noscript> <style type="text/javascript"> .only-with-script { display: none; } .only-without-script { display: block; } </style></noscript>or I prefer adding a class to the body (place your <script> tag at the top of the body and don't use the .ready event):
<head> <style type="text/javascript"> body.has-script .something-not-ajaxy { display: none; } input.ajaxy-submit { display: none; } body.has-script input.ajaxy-submit { display: inline; } </style></head><body> <script type="text/javascript"> document.body.className += ' has-script'; </script> <!-- the rest of your page --></body>
For situations identical to yours, I usually put the submit button around a <noscript> tag. No one has suggested it, so I am not sure if it is considered bad practice around these parts, but it is what I use and it works for me.
If you only want a node visible when Javascript is enabled, you could do in the head:
<noscript> <style type="text/css"> .js-enabled { display: none; } </style></noscript>And then give any Javascript-only elements a class of js-enabled.
Just like David said, you can add a Javascript, that adds a style sheet to hide all "unnecessary" html-elements:
<head> ... <script type="text/javascript" language="javascript"> document.write('<style type="text/css"> .disabled-if-javascript { display: none; } </style>'); </script></head>...If Javascript is enabled, it sets all elements of class "disabled-if-javascript" to hidden, before the body is even loaded. Just add this class to all elements that need to be hidden, if javascript is enabled. You might also need a class enabled-if-javascript that does the opposite, to show certain elements that would be hidden for non-javascript. Maybe you need to add "!important" to your style definition there, to override the existing (non-javascript) rules.