CODEWITHSUNDEEP
jqueryhtmlcss
sb0k
sb0k

Reputation: 47

completely hide a DIV during the page loading

After the header, I have a hidden div with a height transition that is activatable by a button, but while the page is loading, the browser shows the content of that div and afterwards hides it.

This is the script that I used:

$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
    });
});

Is there's a way to avoid it?

I hope I was clear, thank you!

Upvotes: 1

Views: 84

Answers (4)

Samuel
Samuel

Reputation: 2156

The problem is you're hiding the div at DOMready, wich occurs AFTER all content of the page has been loaded (and displayed)...

You must hide your div before that event. You're be better off using CSS hiding (display: none) rather than JS.

Upvotes: -1

Armel Larcier
Armel Larcier

Reputation: 16027

This will work. Hide the div in css in the head tag (loaded first) then show it via javascript. If javascript isn't active, the noscript tag will override the display property and show the div.

In the head :

<style type="text/css">
    .slidingDiv{display: none;}
</style>
<noscript>
    <style type="text/css">
        .slidingDiv{display: block;}
    </style>
</noscript>
<script type="text/javascript">
    $(document).ready(function(){
        $(".slidingDiv").css({"display":"block"});
    }
</script>

Upvotes: 2

Deryck
Deryck

Reputation: 7658

HTML:

<div class="slidingDiv" style="display: none;">Sliding Div</div>
<button class="show_hide">Show/Hide</button>

jQuery:

$(document).ready(function() {
    $('.show_hide').click(function() {
        $('.slidingDiv').slideToggle('fast');
    });
});

JSFiddle Demo

Upvotes: 0

Andrea Riva
Andrea Riva

Reputation: 166

Try adding style="display: none;" to <div class="slidingDiv">...

Upvotes: 0

Related Questions