And here's a more fixed version that does handle resize. :)
var myDiv = $('#myDiv');
// Fixes an IE bug where percentages are used to define the height of
the container
if ($.browser.msie)
{
var ieHeight = myDiv.css ('height');
if (ieHeight.match ('%'))
{
var ieFixFactor = parseInt (ieHeight, 10) / 100;
$(window).resize (function ()
{
myDiv.height (Math.round
(document.documentElement.clientHeight *
ieFixFactor));
});
$(window).trigger ('resize');
}
}
I like .trigger :)
Of course if you put the div inside another element that does have an
explicit height it'll all end up being a bit of a disaster but that's
unlikely.
On Aug 10, 4:05 pm, "Brandon Aaron" <[EMAIL PROTECTED]> wrote:
> Ahh nice work. :)
>
> --
> Brandon Aaron
>
> On 8/10/07, Gordon <[EMAIL PROTECTED]> wrote:
>
>
>
> > I gave it a bit more thought and came up with this idea. It's not
> > perfect, the div will be size locked after it executes so some resize
> > event molarky will be necessary, but it does have the advantage that
> > it uses the size specified in the stylesheet if it happens to be a
> > percentage
>
> > if ($.browser.msie)
> > {
> > var ieHeight = self.container.css ('height');
> > if (ieHeight.match ('%'))
> > {
> > $('#myDiv').height (document.documentElement.clientHeight*
> > (parseInt (ieHeight, 10) / 100));
> > }
> > }
>
> > Your idea did put me on the right track, so thanks. :)
>
> > On Aug 10, 3:07 pm, "Brandon Aaron" <[EMAIL PROTECTED]> wrote:
> > > Then you have to go in and change that .7 to .85. :p Actually I'll use
> > a
> > > config file for stuff like this. It is Where all my plugins options, etc
> > are
> > > stored. Makes changes like this as easy as it is with CSS.
>
> > > --
> > > Brandon Aaron
>
> > > On 8/10/07, Gordon <[EMAIL PROTECTED]> wrote:
>
> > > > I had thought of that but I think that it would probably be an option
> > > > of last resort, on the grounds that doing that would be breaking the
> > > > seperation between presentation, content and behaviour. What happens
> > > > if the designer decides he wants the window height to change to 65% or
> > > > 85% six months down the line?
>
> > > > On Aug 10, 1:25 pm, "Brandon Aaron" <[EMAIL PROTECTED]> wrote:
> > > > > If the 70% is relative to the height of the window, you could just
> > get
> > > > the
> > > > > height of the window and multiply it by .7. Just include dimensions
> > and
> > > > run
> > > > > something along the lines of this:
>
> > > > > $(function() {
> > > > > var fixHeight = function() {
> > > > > $('#foo').height( $(window).height()*.7 );
> > > > > };
> > > > > fixHeight();
> > > > > $(window).bind('resize', fixHeight);
>
> > > > > });
>
> > > > > --
> > > > > Brandon Aaron
>
> > > > > On 8/10/07, Gordon <[EMAIL PROTECTED]> wrote:
>
> > > > > > I need some help with a problem with a div and getting its
> > height. I
> > > > > > am wanting to design a layout that will work across across
> > different
> > > > > > browser window sizes, so I want to make my main div into which my
> > AJAX
> > > > > > content is injected defined by percentage widths and heights. For
> > > > > > example,
>
> > > > > > <div id="foo" style="position: relative; overflow: hidden; width:
> > > > > > 70%;" height: 70%;"></div>
>
> > > > > > As jQuery only really works with pixels, I need to find the pixel
> > > > > > width and height of this div with the width () and height ()
> > > > > > functions. I can then calculate how big the content needs to be
> > based
> > > > > > on the results (say I want to put the items in a grid that is four
> > > > > > across and four up, I define the width and height of each element
> > I
> > > > > > insert into the container div as the container's width and height
> > > > > > divided by four).
>
> > > > > > The problem is, at first this div is empty. Its content is
> > generated
> > > > > > dynamically by an AJAX routine that runs when the document
> > loads. The
> > > > > > script determines how many items were in the XML and generates a
> > HTMl
> > > > > > element to represent each item. The width and height of the
> > contained
> > > > > > item is determined based on getting a number of them to fit across
> > and
> > > > > > up inside the container in a grid pattern. This means in internet
> > > > > > explorer 6 the div behaves as if its height is auto, and because
> > it
> > > > > > has no content it collapses down to a height of 0 px. The result
> > iws
> > > > > > all the content elements also get a height of 0px.
>
> > > > > > I tried setting the body height to 100%, and this almost works in
> > IE6,
> > > > > > but as the AJAX content loads and is injected into the container
> > div
> > > > > > its height fluctuates (which looks quite ugly!) and it's finishing
> > > > > > height is ever so slightly different from the start height,
> > leading to
> > > > > > some partial cutoff of the bottom row of elements or partial
> > exposure
> > > > > > of the first row of elements that should be hidden by overslowing
> > the
> > > > > > div.
>
> > > > > > In internet explorer 7 I get a different problem. The div
> > displays
> > > > > > with the correct height regardless of whether or not it has
> > content,
> > > > > > but the height() function seems to return a value that is totally
> > > > > > wrong, underestimating the actual height by more than half. This
> > > > > > makes my content elements a lot shorter than they should be and
> > again
> > > > > > can lead to them being cut off incorrectly.
>
> > > > > > If I specify a hight in an explicit unig (pixels, ems, etc) then
> > both
> > > > > > IE6 and 7 get the correct height and the content displays as
> > > > > > intended. When using the percentage height all my other test
> > browsers
> > > > > > (Firefox 1.5, Opera 8 and 9, Safari 3) behave as intended.
>
> > > > > > The dimensions plugin doesnt' seem to help out here, and to be
> > honest
> > > > > > I'm already using the fxQueue plugin, the interface plugin and the
> > > > > > blockUI plugin and I really don't want to overload the client with
> > a
> > > > > > dozen scripts and mess up the download time for the page.
>
> > > > > > Does anyone know what's going on and what I can do about it? I
> > really
> > > > > > don't want to have to fix explicitly on a size for my content div
