[jQuery] Re: Getting the height of a hidden div in Firefox
I know its probably not the best solution, but what if you showed the
div just long enough to get the height, hid it again and then slid it
down. You could prevent the div from actually showing by giving it
something like .css(left,-1px) before using .show(). Just a
thought.
Tommy
On Jan 30, 2:00 pm, rob303 rob.cub...@googlemail.com wrote:
Oh, one other thing. If I call .css('display', 'block') on the
element before using height() FF gives me the correct value of 240px.
Obviously, that breaks the accordion because I want the element
hidden!
/me scratches head ...
Rob.
On Jan 30, 7:57 pm, rob303 rob.cub...@googlemail.com wrote:
Thanks for the reply Eric. But what have different box models got to
do with it? I'm not setting any border or padding properties on my
hidden div that would effect the height. And the difference between
the two browsers is huge. IE says 240px and FF says 160px. I
certainly don't have 80px worth of padding on that element ...
Rob.
On Jan 30, 7:45 pm, Eric Garside gars...@gmail.com wrote:
Different box models. I'd read up more on the difference between the
IE/FF box models to point you in the right direction. I'd give you a
quick tutorial, but I get out at 3 on Fridays! :D
On Jan 30, 1:52 pm, rob303 rob.cub...@googlemail.com wrote:
Hi,
I've been working on this for days. The chaps on IRC couldn't find an
answer so I thought I'd post it here just in case anyone knows what's
going on.
I have a basic accordion type feature. The designer wants to be able
to open more than one of hidden the sections at once ...
So, here is my code:
$(.accordion .accordion_header).click(function() {
if($(this).hasClass('accordion_selected')) {
$(this).removeClass('accordion_selected').next().slideUp
({duration: 'slow', easing: 'easeInOutQuad'});
} else {
$(this).addClass('accordion_selected').next().slideDown
({duration: 'slow', easing: 'easeInOutQuad'});
}
}).next().hide();
.accordion {
width: 97%;
list-style-type: none;
}
.accordion_header {
display: block;
height: 20px;
background: url(../images/bgd_accordion_off.gif) repeat-x;
padding: 5px 10px 0 10px;
}
.accordion_header:hover {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_selected {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_section {
display: block;
line-height: 20px;
padding: 0 10px 0 10px;
}
ul class=accordion
li
a href=javascript:; class=accordion_headerheading/a
div class=accordion_section
A bunch of text
/div
/li
/ul
The problem I face is that the content within the hidden div
(accordion_section) is db driven so I have no idea what content to put
in there. This means I cannot fix the height of those divs. This in
turn breaks the animate on the slideDown function. If I set the
height of the div the animate is perfect. Without it everythings all
jumpy and broken looking. So I figured that all I needed to do was to
get the height of the hidden div and then apply it using a css()
call. This works fine in IE but Firefox doesn't seem able to give me
the correct height for the div. For example if I use this code:
var h = $(this).next().height();
alert(h);
IE gives me 240 - which correct for that particular div. But firefox
gives 160 for the same div! Anyone know why?
Many thanks in advance for any help.
Rob.
[jQuery] Re: Getting the height of a hidden div in Firefox
Hi Tommy,
Many thanks. That's exactly what I came up with over night.
$(this).next().css('display', 'block');
var h = $(this).next().height();
$(this).next().hide();
$(this).addClass('accordion_selected').next().height(h).slideDown
({duration: 700, easing: 'easeInOutQuad'});
Gives me the correct height in FF and it happens so fast that the div
isn't shown. The slideDown is now perfectly smooth in both browsers.
Cheers,
Rob.
On Jan 31, 3:04 pm, omtay38 omta...@gmail.com wrote:
I know its probably not the best solution, but what if you showed the
div just long enough to get the height, hid it again and then slid it
down. You could prevent the div from actually showing by giving it
something like .css(left,-1px) before using .show(). Just a
thought.
Tommy
On Jan 30, 2:00 pm, rob303 rob.cub...@googlemail.com wrote:
Oh, one other thing. If I call .css('display', 'block') on the
element before using height() FF gives me the correct value of 240px.
Obviously, that breaks the accordion because I want the element
hidden!
/me scratches head ...
Rob.
On Jan 30, 7:57 pm, rob303 rob.cub...@googlemail.com wrote:
Thanks for the reply Eric. But what have different box models got to
do with it? I'm not setting any border or padding properties on my
hidden div that would effect the height. And the difference between
the two browsers is huge. IE says 240px and FF says 160px. I
certainly don't have 80px worth of padding on that element ...
Rob.
On Jan 30, 7:45 pm, Eric Garside gars...@gmail.com wrote:
Different box models. I'd read up more on the difference between the
IE/FF box models to point you in the right direction. I'd give you a
quick tutorial, but I get out at 3 on Fridays! :D
On Jan 30, 1:52 pm, rob303 rob.cub...@googlemail.com wrote:
Hi,
I've been working on this for days. The chaps on IRC couldn't find an
answer so I thought I'd post it here just in case anyone knows what's
going on.
I have a basic accordion type feature. The designer wants to be able
to open more than one of hidden the sections at once ...
So, here is my code:
$(.accordion .accordion_header).click(function() {
if($(this).hasClass('accordion_selected')) {
$(this).removeClass('accordion_selected').next().slideUp
({duration: 'slow', easing: 'easeInOutQuad'});
} else {
$(this).addClass('accordion_selected').next().slideDown
({duration: 'slow', easing: 'easeInOutQuad'});
}
}).next().hide();
.accordion {
width: 97%;
list-style-type: none;
}
.accordion_header {
display: block;
height: 20px;
background: url(../images/bgd_accordion_off.gif) repeat-x;
padding: 5px 10px 0 10px;
}
.accordion_header:hover {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_selected {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_section {
display: block;
line-height: 20px;
padding: 0 10px 0 10px;
}
ul class=accordion
li
a href=javascript:; class=accordion_headerheading/a
div class=accordion_section
A bunch of text
/div
/li
/ul
The problem I face is that the content within the hidden div
(accordion_section) is db driven so I have no idea what content to put
in there. This means I cannot fix the height of those divs. This in
turn breaks the animate on the slideDown function. If I set the
height of the div the animate is perfect. Without it everythings all
jumpy and broken looking. So I figured that all I needed to do was to
get the height of the hidden div and then apply it using a css()
call. This works fine in IE but Firefox doesn't seem able to give me
the correct height for the div. For example if I use this code:
var h = $(this).next().height();
alert(h);
IE gives me 240 - which correct for that particular div. But firefox
gives 160 for the same div! Anyone know why?
Many thanks in advance for any help.
Rob.
[jQuery] Re: Getting the height of a hidden div in Firefox
jQuery should be doing that by default, line 733 of core.js:
var val, props = { position: absolute, visibility: hidden,
display:block }
if ( jQuery(elem).is(:visible) )
getWH();
else
jQuery.swap( elem, props, getWH ); //apply 'props' briefly to get
the correct values
Could you post a test page exhibiting this issue? That might be a bug.
On Jan 31, 1:14 pm, rob303 rob.cub...@googlemail.com wrote:
Hi Tommy,
Many thanks. That's exactly what I came up with over night.
$(this).next().css('display', 'block');
var h = $(this).next().height();
$(this).next().hide();
$(this).addClass('accordion_selected').next().height(h).slideDown
({duration: 700, easing: 'easeInOutQuad'});
Gives me the correct height in FF and it happens so fast that the div
isn't shown. The slideDown is now perfectly smooth in both browsers.
Cheers,
Rob.
On Jan 31, 3:04 pm, omtay38 omta...@gmail.com wrote:
I know its probably not the best solution, but what if you showed the
div just long enough to get the height, hid it again and then slid it
down. You could prevent the div from actually showing by giving it
something like .css(left,-1px) before using .show(). Just a
thought.
Tommy
On Jan 30, 2:00 pm, rob303 rob.cub...@googlemail.com wrote:
Oh, one other thing. If I call .css('display', 'block') on the
element before using height() FF gives me the correct value of 240px.
Obviously, that breaks the accordion because I want the element
hidden!
/me scratches head ...
Rob.
On Jan 30, 7:57 pm, rob303 rob.cub...@googlemail.com wrote:
Thanks for the reply Eric. But what have different box models got to
do with it? I'm not setting any border or padding properties on my
hidden div that would effect the height. And the difference between
the two browsers is huge. IE says 240px and FF says 160px. I
certainly don't have 80px worth of padding on that element ...
Rob.
On Jan 30, 7:45 pm, Eric Garside gars...@gmail.com wrote:
Different box models. I'd read up more on the difference between the
IE/FF box models to point you in the right direction. I'd give you a
quick tutorial, but I get out at 3 on Fridays! :D
On Jan 30, 1:52 pm, rob303 rob.cub...@googlemail.com wrote:
Hi,
I've been working on this for days. The chaps on IRC couldn't find
an
answer so I thought I'd post it here just in case anyone knows
what's
going on.
I have a basic accordion type feature. The designer wants to be
able
to open more than one of hidden the sections at once ...
So, here is my code:
$(.accordion .accordion_header).click(function() {
if($(this).hasClass('accordion_selected')) {
$(this).removeClass('accordion_selected').next().slideUp
({duration: 'slow', easing: 'easeInOutQuad'});
} else {
$(this).addClass('accordion_selected').next().slideDown
({duration: 'slow', easing: 'easeInOutQuad'});
}
}).next().hide();
.accordion {
width: 97%;
list-style-type: none;
}
.accordion_header {
display: block;
height: 20px;
background: url(../images/bgd_accordion_off.gif) repeat-x;
padding: 5px 10px 0 10px;
}
.accordion_header:hover {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_selected {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_section {
display: block;
line-height: 20px;
padding: 0 10px 0 10px;
}
ul class=accordion
li
a href=javascript:; class=accordion_headerheading/a
div class=accordion_section
A bunch of text
/div
/li
/ul
The problem I face is that the content within the hidden div
(accordion_section) is db driven so I have no idea what content to
put
in there. This means I cannot fix the height of those divs. This
in
turn breaks the animate on the slideDown function. If I set the
height of the div the animate is perfect. Without it everythings
all
jumpy and broken looking. So I figured that all I needed to do was
to
get the height of the hidden div and then apply it using a css()
call. This works fine in IE but Firefox doesn't seem able to give
me
the correct height for the div. For example if I use this code:
var h = $(this).next().height();
alert(h);
IE gives me 240 - which correct for that particular div. But
firefox
gives 160 for the same div! Anyone know why?
Many thanks in advance for any help.
Rob.
[jQuery] Re: Getting the height of a hidden div in Firefox
Different box models. I'd read up more on the difference between the
IE/FF box models to point you in the right direction. I'd give you a
quick tutorial, but I get out at 3 on Fridays! :D
On Jan 30, 1:52 pm, rob303 rob.cub...@googlemail.com wrote:
Hi,
I've been working on this for days. The chaps on IRC couldn't find an
answer so I thought I'd post it here just in case anyone knows what's
going on.
I have a basic accordion type feature. The designer wants to be able
to open more than one of hidden the sections at once ...
So, here is my code:
$(.accordion .accordion_header).click(function() {
if($(this).hasClass('accordion_selected')) {
$(this).removeClass('accordion_selected').next().slideUp
({duration: 'slow', easing: 'easeInOutQuad'});
} else {
$(this).addClass('accordion_selected').next().slideDown
({duration: 'slow', easing: 'easeInOutQuad'});
}
}).next().hide();
.accordion {
width: 97%;
list-style-type: none;
}
.accordion_header {
display: block;
height: 20px;
background: url(../images/bgd_accordion_off.gif) repeat-x;
padding: 5px 10px 0 10px;
}
.accordion_header:hover {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_selected {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_section {
display: block;
line-height: 20px;
padding: 0 10px 0 10px;
}
ul class=accordion
li
a href=javascript:; class=accordion_headerheading/a
div class=accordion_section
A bunch of text
/div
/li
/ul
The problem I face is that the content within the hidden div
(accordion_section) is db driven so I have no idea what content to put
in there. This means I cannot fix the height of those divs. This in
turn breaks the animate on the slideDown function. If I set the
height of the div the animate is perfect. Without it everythings all
jumpy and broken looking. So I figured that all I needed to do was to
get the height of the hidden div and then apply it using a css()
call. This works fine in IE but Firefox doesn't seem able to give me
the correct height for the div. For example if I use this code:
var h = $(this).next().height();
alert(h);
IE gives me 240 - which correct for that particular div. But firefox
gives 160 for the same div! Anyone know why?
Many thanks in advance for any help.
Rob.
[jQuery] Re: Getting the height of a hidden div in Firefox
Thanks for the reply Eric. But what have different box models got to
do with it? I'm not setting any border or padding properties on my
hidden div that would effect the height. And the difference between
the two browsers is huge. IE says 240px and FF says 160px. I
certainly don't have 80px worth of padding on that element ...
Rob.
On Jan 30, 7:45 pm, Eric Garside gars...@gmail.com wrote:
Different box models. I'd read up more on the difference between the
IE/FF box models to point you in the right direction. I'd give you a
quick tutorial, but I get out at 3 on Fridays! :D
On Jan 30, 1:52 pm, rob303 rob.cub...@googlemail.com wrote:
Hi,
I've been working on this for days. The chaps on IRC couldn't find an
answer so I thought I'd post it here just in case anyone knows what's
going on.
I have a basic accordion type feature. The designer wants to be able
to open more than one of hidden the sections at once ...
So, here is my code:
$(.accordion .accordion_header).click(function() {
if($(this).hasClass('accordion_selected')) {
$(this).removeClass('accordion_selected').next().slideUp
({duration: 'slow', easing: 'easeInOutQuad'});
} else {
$(this).addClass('accordion_selected').next().slideDown
({duration: 'slow', easing: 'easeInOutQuad'});
}
}).next().hide();
.accordion {
width: 97%;
list-style-type: none;
}
.accordion_header {
display: block;
height: 20px;
background: url(../images/bgd_accordion_off.gif) repeat-x;
padding: 5px 10px 0 10px;
}
.accordion_header:hover {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_selected {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_section {
display: block;
line-height: 20px;
padding: 0 10px 0 10px;
}
ul class=accordion
li
a href=javascript:; class=accordion_headerheading/a
div class=accordion_section
A bunch of text
/div
/li
/ul
The problem I face is that the content within the hidden div
(accordion_section) is db driven so I have no idea what content to put
in there. This means I cannot fix the height of those divs. This in
turn breaks the animate on the slideDown function. If I set the
height of the div the animate is perfect. Without it everythings all
jumpy and broken looking. So I figured that all I needed to do was to
get the height of the hidden div and then apply it using a css()
call. This works fine in IE but Firefox doesn't seem able to give me
the correct height for the div. For example if I use this code:
var h = $(this).next().height();
alert(h);
IE gives me 240 - which correct for that particular div. But firefox
gives 160 for the same div! Anyone know why?
Many thanks in advance for any help.
Rob.
[jQuery] Re: Getting the height of a hidden div in Firefox
Oh, one other thing. If I call .css('display', 'block') on the
element before using height() FF gives me the correct value of 240px.
Obviously, that breaks the accordion because I want the element
hidden!
/me scratches head ...
Rob.
On Jan 30, 7:57 pm, rob303 rob.cub...@googlemail.com wrote:
Thanks for the reply Eric. But what have different box models got to
do with it? I'm not setting any border or padding properties on my
hidden div that would effect the height. And the difference between
the two browsers is huge. IE says 240px and FF says 160px. I
certainly don't have 80px worth of padding on that element ...
Rob.
On Jan 30, 7:45 pm, Eric Garside gars...@gmail.com wrote:
Different box models. I'd read up more on the difference between the
IE/FF box models to point you in the right direction. I'd give you a
quick tutorial, but I get out at 3 on Fridays! :D
On Jan 30, 1:52 pm, rob303 rob.cub...@googlemail.com wrote:
Hi,
I've been working on this for days. The chaps on IRC couldn't find an
answer so I thought I'd post it here just in case anyone knows what's
going on.
I have a basic accordion type feature. The designer wants to be able
to open more than one of hidden the sections at once ...
So, here is my code:
$(.accordion .accordion_header).click(function() {
if($(this).hasClass('accordion_selected')) {
$(this).removeClass('accordion_selected').next().slideUp
({duration: 'slow', easing: 'easeInOutQuad'});
} else {
$(this).addClass('accordion_selected').next().slideDown
({duration: 'slow', easing: 'easeInOutQuad'});
}
}).next().hide();
.accordion {
width: 97%;
list-style-type: none;
}
.accordion_header {
display: block;
height: 20px;
background: url(../images/bgd_accordion_off.gif) repeat-x;
padding: 5px 10px 0 10px;
}
.accordion_header:hover {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_selected {
background: url(../images/bgd_accordion_on.gif) repeat-x;
color: #d7d7d9;
}
.accordion_section {
display: block;
line-height: 20px;
padding: 0 10px 0 10px;
}
ul class=accordion
li
a href=javascript:; class=accordion_headerheading/a
div class=accordion_section
A bunch of text
/div
/li
/ul
The problem I face is that the content within the hidden div
(accordion_section) is db driven so I have no idea what content to put
in there. This means I cannot fix the height of those divs. This in
turn breaks the animate on the slideDown function. If I set the
height of the div the animate is perfect. Without it everythings all
jumpy and broken looking. So I figured that all I needed to do was to
get the height of the hidden div and then apply it using a css()
call. This works fine in IE but Firefox doesn't seem able to give me
the correct height for the div. For example if I use this code:
var h = $(this).next().height();
alert(h);
IE gives me 240 - which correct for that particular div. But firefox
gives 160 for the same div! Anyone know why?
Many thanks in advance for any help.
Rob.
