Small block of code not working on IE

Forum Moderators: open

Message Too Old, No Replies

Small block of code not working on IE

Sub_Seven

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

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 :)

Sub_Seven

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

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...

Sub_Seven

8:24 pm on Aug 29, 2012 (gmt 0)

So not a clue? Anyone?... please...

daveVk

1:04 am on Aug 30, 2012 (gmt 0)

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

Sub_Seven

10:34 pm on Aug 30, 2012 (gmt 0)

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.

daveVk

3:09 am on Aug 31, 2012 (gmt 0)

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

Sub_Seven

5:08 am on Aug 31, 2012 (gmt 0)

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...

daveVk

7:43 am on Aug 31, 2012 (gmt 0)

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"

Sub_Seven

3:40 pm on Aug 31, 2012 (gmt 0)

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?

daveVk

3:19 am on Sep 3, 2012 (gmt 0)

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.

Sub_Seven

2:50 pm on Sep 3, 2012 (gmt 0)

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!