I have multiple divs as follows -

<div id='1' class='divs_nav'>My Dynamic Content</div>
<div id='2' class='divs_nav'>My Dynamic Content</div>
...
<div id='149' class='divs_nav'>My Dynamic Content</div>
<div id='150' class='divs_nav'>My Dynamic Content</div>

The content of divs is loaded through MySQL. I want to display only one div at a time, rest are hidden. There are Navigation buttons to update the display of the Next/Previous div. So far I am hiding all the div in $(document).ready as follows -

<script>    
$(document).ready(
function() {
var a = 2, max = 150;
while (a <= max)
{
$('#' + a).hide();
a++;
}
});
</script>

But, the problem in using this is, until the page is loaded pletely, all divs are shown. The page appears perfectly fine once everything is loaded.

How can I delay the display or something like that to avoid this? Also, if possible, how to show the custom wait message, "Loading. Please wait" until the page is loaded 100%, for the awareness of the viewer.

(p.s. I am tagging html, jquery, javascript, and PHP because honestly, I don't know which one these would be the best to correct my problem)

Thanks.

I have multiple divs as follows -

<div id='1' class='divs_nav'>My Dynamic Content</div>
<div id='2' class='divs_nav'>My Dynamic Content</div>
...
<div id='149' class='divs_nav'>My Dynamic Content</div>
<div id='150' class='divs_nav'>My Dynamic Content</div>

The content of divs is loaded through MySQL. I want to display only one div at a time, rest are hidden. There are Navigation buttons to update the display of the Next/Previous div. So far I am hiding all the div in $(document).ready as follows -

<script>    
$(document).ready(
function() {
var a = 2, max = 150;
while (a <= max)
{
$('#' + a).hide();
a++;
}
});
</script>

But, the problem in using this is, until the page is loaded pletely, all divs are shown. The page appears perfectly fine once everything is loaded.

How can I delay the display or something like that to avoid this? Also, if possible, how to show the custom wait message, "Loading. Please wait" until the page is loaded 100%, for the awareness of the viewer.

(p.s. I am tagging html, jquery, javascript, and PHP because honestly, I don't know which one these would be the best to correct my problem)

Thanks.

• javascript
• jquery
• html

1 Answer 1

You could hide the elements via CSS, and then, after the whole page is loaded, display the first one.

Regarding the loading message, add an element containing it, which you can hide (or remove) as soon as the page is fully loaded.

HTML:

<div id="loading">Loading, please wait...</div>
<div id='1' class='divs_nav'>My Dynamic Content</div>
<div id='2' class='divs_nav'>My Dynamic Content</div>
<div id='149' class='divs_nav'>My Dynamic Content</div>
<div id='150' class='divs_nav'>My Dynamic Content</div>

CSS:

.divs_nav {
    display: none;
}

JavaScript:

$(document).ready(function(){
    $('#loading').hide();
    $('.divs_nav').first().css('display', 'block'); //or whatever display value you want
});

DEMO: http://jsfiddle/Zzg5M/