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

Reply via email to