Welcome to WebmasterWorld Guest from 54.211.82.105

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)

Junior Member

5+ Year Member

joined:June 18, 2010
posts: 167
votes: 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 :)
12:05 am on Aug 29, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:June 18, 2010
posts: 167
votes: 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...
8:24 pm on Aug 29, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:June 18, 2010
posts: 167
votes: 0


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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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
10:34 pm on Aug 30, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:June 18, 2010
posts: 167
votes: 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.
3:09 am on Aug 31, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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
5:08 am on Aug 31, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:June 18, 2010
posts: 167
votes: 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...
7:43 am on Aug 31, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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"
3:40 pm on Aug 31, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:June 18, 2010
posts: 167
votes: 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?
3:19 am on Sept 3, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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.
2:50 pm on Sept 3, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:June 18, 2010
posts: 167
votes: 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!