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