Question

I have done a bit of a web development faux pas by not starting with a functioning page and then building js functionality on top. The site I am redeveloping is an old site which has lots of pretty jquery animations.

I have gone to great trouble to ensure all page loads can be handled with or without ajax but I have just realised this is entirely pointless since the initial page load produces several elements which load with properties of display:none; or opacity:0; and are animated to be visible on doc ready

I would very much like to rectify this but there are several reasons I did it in the first place:

1: to hide a flash of unstyled menu before a jquery plugin kicks in. (I will replace this with a non js menu and animate into the jquery menu to solve this)

2: The other reason is that I like the initial animation on page load and would ideally like to keep it. But this presents a problem since I would like to have the bulk of the page invisible for js users and visible for non js users on load but how can I ensure that my elements css properties are changed BEFORE the page is rendered – I have tried doing this with jquery but by the time the jquery library has loaded (without caching) my page has already rendered so the content is flashed up before being hidden and animated back in?

Answer 1

This block will be visible only for users with JS turned off.

<noscript>html code here</noscript>

You can add some styles like this:

<noscript>
    <style>
        #content{
            background: red;
        }
    </style>
</noscript>