reg:overlay not covering the dynamically increasing body.

reg:overlay not covering the dynamically increasing body.


Hi Everyone,
I don't whether this is right group to post this
question or not? if I am wrong please excuse me.
I am using jquery in a project of mine in which body size grows
dynamically (due to some user interactions, this part is fine).
whenever a user want to add some elements or components he needs to
press a add button and to remove it he needs to press remove button
and these components are fetched dynamically using ajax. all this is
working fine. but while ajax is working, I have created eye candy to
cover the browser with a overlay with the following style properties
#overlay
{
background : black url("../images/ajax-loader.gif") no-repeat
center;
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
z-index : 1000;
opacity : .8;
display:none
}
and the javascript is
$(function(){
$('img').livequery('click',function(){
var id=this.id;
var this1=this;
var src;
if( something)
{
$('<div id="overlay" />').appendTo("body").fadeIn('normal');
this.src=src+"/images/down.png";
$.ajax({
type:'get',
url:'somepage.html',
data: 'ID='+this.id,
success:function(result){
$('#overlay').fadeOut('400',function()
{
$(this).remove();
});
//some code
}
});
}
else
{
//some code
}
});
});
this eye candy is also working fine but when the body size grows more
than the original size then the eye candy is not covering the entire
body(which has increased ) instead its covering the actual body size
and worst is, it is covering the top part of the body which is odd and
I feel I have to change the top value in overlay to accommodate the
size but I don't know how to?
or is there any other way?
Any help is appreciated.
Thanks.
~Sri.