Hi all.
I currently have an issue where a javascript drop-down menu I have is displaying below the javascript slide show I have on the same page.
I know this issue has something to do with the slideshow part having position:relative but how do I fix it?
Works fine on all browsers including IE8 but not on browser IE7 (or lower).
Here's all the code that I think is relevant. If anyone is able to help I'd be very grateful. My knowledge of Javascript is quite limited :(
Thanks
Slide show HTML
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><? include("templates/guest-home-banner1.tpl"); ?></a>
<a href="#"><? include("templates/guest-home-banner2.tpl"); ?></a>
<a href="#"><? include("templates/guest-home-banner3.tpl"); ?></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">How it works</a>
<a href="#" rel="2" style="margin:0 3px 0 3px;">Our Retailers</a>
<a href="#" rel="3">In the Press</a>
</div>
</div>Slide show CSS
/*--Main Container--*/
.main_view {
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:253px; width: 660px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.window a:hover {
text-decoration:none;
}
.image_reel {
position: absolute;
top: 0; left: 0;
width: 2640px;
}
.image_reel a:hover {
text-decoration:none;
}Slideshow Javascript
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * 660; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$('.image_reel').animate({opacity: 0.25}, 300);
$('.image_reel').animate({ left: -image_reelPosition }, 10);
$('.image_reel').animate({opacity: 1}, 250);
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
clearInterval(play); //Stop the rotation
}
rotate(); //Trigger the paging and slider function
}, 6000); //Timer speed in milliseconds
};
rotateSwitch(); //Run function on launch
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
return false; //Prevent browser jump to link anchor
});
});
</script>Navigation menu HTML (just a small part of it)
<div>
<ul id="topnav">
<li>
<a href="../../entertainment/" class="entertainment">Entertainment</a>
<div class="sub subentertainment">
<div class="row">
<ul>
<li><h2><a href="../../entertainment/">Entertainment</a></h2></li>
<li><a href="../../entertainment/books-magazines/">Books & Magazines</a></li>
</ul>
<ul>
<li><h2><a href="#">Highlights</a></h2></li>
<li><a href="../../merchant/?site=The Book Depository">The Book Depository</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>Navigation menu CSS
ul#topnav {
margin: 0; padding: 0;
float:left;
width: 100%;
list-style: none;
font-size: 1.1em;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative; /*--Important--*/
}
ul#topnav li a {
float: left;
text-indent: -9999px; /*--Push text off of page--*/
height: 33px;
margin-right:2px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } /*--Hover State--*/
ul#topnav a.entertainment {
background: url(../images/tabs/entertainment.gif) no-repeat;
width: 115px;
}Navigation menu Javascript
<script type="text/javascript">
$(document).ready(function() {
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else { //If row does not exist...
$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 20, // number = sensitivity threshold (must be 1 or higher)
interval: 20, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 10, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};
$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);
});
</script>