is it possible to prevent jquery dialog box from showing when the page loads?

Question

Hey guys I was not really sure how to word the title to make it short, but my question is when my page loads, it includes a jquery dialog box is supposed to start off closed. It does but when the page first loads, the contents of that box briefly show before disappearing when the page is finished loading. It looks a little awkward so I was wondering if anyone knew of some sort of solution to fix this problem or smooth it over. Any help appreciated.

Answer 1

When you call .dialog() make sure to pass the autoOpen option as false, like this:

$("#myDiv").dialog({
  autoOpen: false
});

This prevents the dialog from opening immediately, you open it later by calling the open method:

$("#myDiv").dialog("open");

---

As @redsquare points you should have it style="display: none;" to start with, whether in-line or in external CSS, so it's not showing before the JavaScript runs, that's a separate issue than dialog() displaying it initially, like this:

<div id="myDiv" style="display: none;">Stuff</div>

Or in CSS:

#myDiv { display: none; }

The dialog opening will reverse this none style.

Answer 2

Add a class to the div which sets display:none.

For an app wide solution read about FOUC here from Paul Irish

FOUC is an unwelcome guest to your soirée of intertube funtimes. He comes in and distracts users eyes with things they shouldn't be seeing, and then departs ever so quickly. We don't like him.....

Answer 3

Set this in your css file.

#myDiv { display: none }

and

$("#myDiv").dialog({
  autoOpen: false
});

in your JS.