homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Small block of code not working on IE
Sub_Seven




msg:4489309
 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




msg:4489310
 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




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

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

daveVk




msg:4489642
 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




msg:4490003
 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




msg:4490050
 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




msg:4490057
 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




msg:4490078
 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




msg:4490197
 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




msg:4490796
 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




msg:4490971
 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved