strange js/css behaviour

[kobo1d]

hey guys!

i ran into a confusing problem, which i couldnt solve by myself.
i have a jquery page transition effect, which looks like that:


$(window).load(function() {

$("body").fadeIn(750);

$(".menu a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(750, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}

});


then i add into my css:


body {
display: none;
}

this thing is working well as it is, but then i noticed, after i activate this script, my shoutbox isnt working anymore.
its also using jquery parts, but i couldnt find any problems in the development-tools/debugger of chrome.

this is the part of the shutbox which wont display right: (it kinda shrinks to a pixel)


<div id="myshouts_shouts" class="theshouts" rel="1376130975" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; height: 5px;">
<ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; height: 5px; top: 0px;">
<li style="overflow: hidden; float: none; width: 0px;">
<div class="outershout">
<dl>
<dt>Daniel</dt>
<!-- <dd class="icons"><a href="mailto:xxxxxx@xxxxxxxxxxxx" rel="nofollow"><img src="email.png" alt="email" /></a></dd> -->
<dd class="shout">
<div class="bottom">
blah blah blahhh :-) </div>
</dd>
<dd class="date" style="">9 August 2013</dd>
</dl>
</div>
</li>
</ul>
</div>

and the mysterious thing is, that if i remove the "display: none;" from the body style in the css, this part above gets displayed right.
(but i need that for the jquery fade-effect to work)

so anybody might have a clue why this happens?


please share some thoughts, thanks! :-)

[jscheuer1]

Many scripts, jQuery or other libraries, or just plain javascript, will not initialize properly if the page elements they are creating and/or using are display none or within an element with display none. That's because elements like that have no dimensions or offsets. So they cannot be measured, sized or positioned accurately.

So instead of:



body {
display: none;
}

Use:


body {
visibility: hidden;
}

But then you will have to hide it and make it visible right before fading it in here:



$(window).load(function() {

$("body").fadeIn(750);

$(".menu a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(750, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}

});

Which should become (the red part should now be):


$("body").hide().css({visibility: 'visible'}).fadeIn(750);

The browser cache may need to be cleared and/or the page refreshed to see changes.

There could also be other problems.