Hi all
I've been playing about trying to get an effect similar to Google
Calendar, where a div starts at a fixed point on the screen and then
expands to take up the rest of the viewport. I think my calculations are
off though, as I can get it to expand, but it always grows to about 20px
larger than the viewport. I'm doing this without any margins/padding on
any elements, and I've tried both relative and absolute positioning of
the div.
Here's what I've got so far:
jQuery.fn.expando = function(minwidth, minheight)
{
function doExpando(el)
{
var
windowHeight = jQuery(window).height(),
windowWidth = jQuery(window).width(),
offset = el.offset({ scroll: false }),
newHeight = windowHeight - offset.top,
newWidth = 'auto';
if( minheight && newHeight < minheight )
newHeight = minheight;
if( minwidth && el.width() < minwidth )
newWidth = minwidth;
el.height(newHeight);
el.width(newWidth);
}
var minwidth = minwidth || false,
minheight = minheight || false,
el = this;
doExpando(el);
jQuery(window).resize(function(){
doExpando(el);
});
return this;
}
I'm loading the dimensions plugin before this one, to help with the
calculations.
If I take 50px off the height it works ok:
newHeight = (windowHeight - offset.top) - 50;
At the moment I've left it like that, but if some one had an idea why
it's over-sizing that would be great.
--
*Phillip B Oldham*
begin:vcard
fn:Phillip Oldham
n:Oldham;Phillip
org:The Activity People;Systems Development
email;internet:[EMAIL PROTECTED]
title:Chief Programmer
tel;work:0870 162 4847
x-mozilla-html:TRUE
url:http://theactivitypeople.co.uk/
version:2.1
end:vcard