Accessible way of hiding an element until jQuery's $(document).ready()?

Question

I have a large survey that I have made more usable with jQuery by arranging it into sections and using an accordian menu to flip through each section.

The trouble is, there is a noticable snap when $(document).ready() fires and condenses everything into an accordian menu. That is to say that before $(document).ready(), you can see the whole survey.

I did consider setting #surveyForm to display: none; in css and #surveyForm.active to display: block; but that creates a new problem:

Browsers without javascript enabled will never get to see #surveyForm.active and so they won't be able to use the survey.

Any ideas?

Cheers

-Iain

Answer 1

It's not clean and unobtrusive like good Javascript should be, but you can just add a Javascript snippet directly after your accordian content to initialize the accordian and hide the pieces that need hiding. The net effect should completely eliminate the "snap" and keep the form accessable to non-JS clients.

Answer 2

If you want to easily manage non-javascript browsers/users without the snap when JS is enabled, try the following snippet inside the head node of your page:

document.documentElement.className = 'has-js'
// or any other class name, use += and append it if you already have a class on your *html* tag

In your CSS write for the non-js scenario first and then set display to none or hide it any other way that fits you by prefixing your js-relevant css selector with .has-js.

I'll probably get downvoted for putting javascript in the head but keep in mind that from a performance standpoint (Yahoo et al) only javascript files (external) need to be loaded as late as possible.

A javascript tag itself will not make your page load longer except for the fact that it will block render while it is being parsed and executed, but in this case we want that, since you need the .has-js class before rendering starts to avoid flickering.

Answer 3

I haven't tried this, but perhaps you could wrap the content in <noscript> tags. Those with Javascript disabled will always see the content. Those with Javascript will not see the content. Then use JQuery to remove the <noscript> tags, thus making the content visible to those with Javascript.

EDIT:

The following example almost works. What I intended was to delete the <noscript> tags, whilst keeping their content. However, the code ends up escaping the HTML. The idea works, but I'm not sure how to implement it properly—perhaps someone else can shed some light on it:

<noscript>
    <p>Display me!</p>
</noscript>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('noscript').contents().unwrap();
    });
</script>

Here's what I wanted to get:

<p>Display me!</p>

Here's what I actually get:

<p>Display me!</p>

EDIT 2:

After a little more investigation, the unwrap() method works correctly for non <noscript> tags: it works, for example, for the contents of a <div>. I'm not sure what the solution is here. It is presumably something to do with the way browsers interpret <noscript>.

Answer 4

This is the progressive enhancement solution I use for situations like this.