I’m trying to put together a simple slideshow, and I’m struggling a little with internet explorer 7.
The navigation is hidden as default incase the user doesn’t have js. If they slide, then an arrow will fade in which works perfectly in all browsers but ie7. In ie7, the whole slideshow jumps down a few pixels – I believe it is something to do with display: none being set and then changed upon fadeIn but I can’t quite figure it out.
HTML:
<div class="wrap">
<nav class="home-slideshow">
<a href="#" onclick="return false"><img src="img/arrow-left.gif" class="arrow-left" height="22" width="13"></a>
<a href="#" onclick="return false"><img src="img/arrow-right.gif" class="arrow-right" height="22" width="13"></a>
</nav>
<ul class="home-slideshow">
<li>
<a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
</li>
<li>
<a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
</li>
<li>
<a href="#"><img src="img/slide.jpg" alt="slide" title="slide" height="302" width="960"></a>
</li>
</ul>
</div> <!-- end wrap -->
JS:
// home feature slideshow
// add navigation
$('.arrow-right').show();
// navigation
$('.arrow-right').on('click', (function() {
if ($(':animated').length) {
return false;
}
ul = $('ul.home-slideshow');
noOfSlides = 3;
width = noOfSlides * 960;
lastSlide = width - 960;
currentPos = parseInt(ul.css('margin-left'));
ul.css('width', width);
ul.animate({
"margin-left": currentPos - 960
}, 1500, "easeInOutQuint", function() {
if (ul.css('margin-left') == '-' + lastSlide + 'px') {
$('.arrow-right').fadeOut();
} else {
$('.arrow-left').fadeIn();
} // end if
}); // end animate
})); // end arrow-right click
$('.arrow-left').on('click', (function() {
if ($(':animated').length) {
return false;
}
ul = $('ul.home-slideshow');
noOfSlides = 3;
width = noOfSlides * 960;
lastSlide = width + 960;
currentPos = parseInt($(ul).css('margin-left'));
ul.css('width', width);
ul.animate({
"margin-left": currentPos + 960
}, 1500, "easeInOutQuint", function() {
if (ul.css('margin-left') == '0px') {
$('.arrow-left').fadeOut();
} else {
$('.arrow-right').fadeIn();
} // end if
}); // end animate
})); // end arrow-left click
CSS:
/* Feature Slideshow */
ul.home-slideshow {
height: 302px;
overflow: hidden;
}
ul.home-slideshow li {
float: left;
}
/* Navigation */
nav.home-slideshow {
position: relative;
width: 960px;
}
.arrow-left, .arrow-right {
background: #003592;
-moz-box-sizing: content-box;
box-sizing: content-box;
display: none;
height: 22px;
padding: 6px;
top: 126px;
position: absolute;
width: 13px;
z-index: 1;
}
.arrow-right {
right: 0px;
}
.arrow-left {
left: 0px;
}
Can anyone suggest a fix to this issue?
Might be this way: (although everything looks perfect)
Try moving Ul home-slideshow up and move nav below it and see if this works: