CODEWITHSUNDEEP
javascriptjquerycss
jaynp
jaynp

Reputation: 3325

How to make sure div in background isn't visible until hidden?

For my mobile website I have two full screen divs, e.g.:

<div id="splash-page"> ... </div>
<div id="content"> ... </div>

I have set up the z-indexs so that #splash-page is on top of #content. This is because I would like it so that #content is not visible until I call $("#splash-page").hide().

Here's my CSS:

#landing {
    z-index: 9999;
}

However, when this page loads on a slow connection, sometimes #content is visible and then #splash-page covers it.

What is the best way to achieve the desired effect without doing an AJAX load or something else complicated with #content?

Upvotes: 0

Views: 79

Answers (2)

Sylver
Sylver

Reputation: 8967

use css and set display to none by default:

#content
{
display:none;
}

Upvotes: 3

TGH
TGH

Reputation: 39258

What about just hiding #content initially, instead of doing it through z-index? Then you can call $("#spalsh-page").hide(); and $("#content").show(); in tandem.

I would put a display:none; style on #content initially

Upvotes: 3

Related Questions