Welcome to WebmasterWorld Guest from 54.166.191.159

Forum Moderators: open

Message Too Old, No Replies

Small block of code not working on IE

     
12:02 am on Aug 29, 2012 (gmt 0)

5+ Year Member



Hello everyone,

I have a block of code that sets the height of a div on the fly depending of the size of the first list item under an unordered list; it works ok under Chrome and Firefox but as always Internet Explorer is acting up so I thought I'd ask here for some help, this is the code:

<script type="text/javascript">
function setSize(){
var firstLi = $('#hotelSlider').show().find('li:first-child'),
firstHeight = firstLi.height(),
container= $('#hotelSlider');
container.css({
'height': firstHeight + 'px'
});
}
</script>


I'm running it onload like this: "<body onload="setSize()">"

The only thing that I've tried is changing the height property like so:

<script type="text/javascript">
function setSize(){
var firstLi = $('#hotelSlider').show().find('li:first-child'),
firstHeight = firstLi.css('height'),
container= $('#hotelSlider');
container.css({
'height': firstHeight
});
}
</script>


But it doesn't make a difference, any ideas as to why this happens?

Thanks :)
12:05 am on Aug 29, 2012 (gmt 0)

5+ Year Member



BTW, I forgot to mention before someone asks, I passed the url through the W3C validator, it only wines about three errors (2 about using placeholders and 1 about using a data-dir attribute).

Just in case...
8:24 pm on Aug 29, 2012 (gmt 0)

5+ Year Member



So not a clue? Anyone?... please...
1:04 am on Aug 30, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



No clue, try hard coding a value to firstHeight, to narrow problem done.

<script type="text/javascript">
function setSize(){
var firstLi = $('#hotelSlider').show().find('li:first-child'),
var firstHeight = firstLi.css('height'),
var container= $('#hotelSlider');
firstHeight = '500px';
container.css({
'height': firstHeight
});
}
</script>

or use alert on firstHeight
10:34 pm on Aug 30, 2012 (gmt 0)

5+ Year Member



Thanks daveVk,

It didn't really make any difference, I was wondering if you (or anyone else for that matter) could take a look at the site in question, maybe you could see something I'm not seeing.

By the way, its only acting up on ie9, ie8 seems to be working pretty well.

Here is the url bit [dot] ly/NzQzEO

I'd really appreciated if you could take a look, thanks.
3:09 am on Aug 31, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Try coding a simpler example, the problem could well be in the external scripts you are using.

Combine the two onload methods into one, making timing explicit.

say

$(window).load(function() {
$('#slider').nivoSlider();
setSize();
});

or should it be

$(window).load(function() {
setSize();
$('#slider').nivoSlider();
});

and remove body.onload.

Alteratively move both to body onload
5:08 am on Aug 31, 2012 (gmt 0)

5+ Year Member



I tried this:

$(window).load(function() {
setSize();
$('#slider').nivoSlider();
});

and this:

<body onload="setSize(); $('#slider').nivoSlider();">

And also tried temporarily removing all the nivo slider code and nothing seems to do it.

An interesting note is that if I resize the ie window and then maximize it again everything kinda snaps into place and looks just fine.

Also I tried this to check it didn't have anything to do with timing:

setTimeout(function setSize(){
var firstLi = $('#hotelSlider').show().find('li:first-child');
var firstHeight = firstLi.height();
var container= $('#hotelSlider');
container.css({
'height': firstHeight + 'px'
});
}, 5000);

Chrome and Firefox wait for the 5 seconds and resize, IE insists in making my life a living hell...
7:43 am on Aug 31, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Check what IE is setting height to

container.css({
'height': firstHeight
});
alert(container[0].style.height);

if it looks valid try hard coding it on the div

<div style="height:...px"
3:40 pm on Aug 31, 2012 (gmt 0)

5+ Year Member



Ok, it said 671px which is perfectly fine, I hardcoded it into the div and it looks fine as well, the problem is that this script runs in several pages and the initial height is not always the same.

I thought I'd make a quick hack to see if I could make it work by applying the following line to either the body tag or the main holder div

onmousemove="setSize()" onkeypress="setSize()"

And I was positive it was gonna work but it didn't.

What do you think?
3:19 am on Sep 3, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



IE seems to do all but actually redraw/resize ?

As a workaround consider initially setting all li's except first to hidden(to establish correct initial height), then unhide them in setSize after setting size.
2:50 pm on Sep 3, 2012 (gmt 0)

5+ Year Member



daveVk you are the man!

That was pretty clever and it worked perfectly fine.

We can consider this case closed :)

Thanks a lot for the help!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month