I'm working on a slider (alternative to Slidedeck) is fine in all browsers - except IE9. The clickable area on the tabs is only about 40px tall, and sits at the top of the tab. I need the whole tab to be clickable, as it is across the other browsers.
I've tried messing with the CSS with no luck, and with the dtTop variables specifeid for IE, but I can't seem to expand the clickable area. I really don't know much about Jquery or JavaScript...any help would be appreciated, please!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Liz Testing JQuery Slideshow</title>
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Content from jquery.js file included in package -->
<script type="text/javascript">(function(jQuery) {
jQuery.fn.easyAccordion = function(options) {
var defaults = {
slideNum: true,
autoStart: false,
pauseOnHover: false,
slideInterval: 3000,
afterClickCallback: null
};
this.each(function() {
var settings = jQuery.extend(defaults, options);
jQuery(this).find('dl').addClass('easy-accordion');
// -------- Set the variables ------------------------------------------------------------------------------
jQuery.fn.setVariables = function() {
dlWidth = jQuery(this).width();
dlHeight = jQuery(this).height();
dtWidth = jQuery(this).find('dt').outerHeight();
if (jQuery.browser.msie){ dtWidth = jQuery(this).find('dt').outerWidth();}
dtHeight = dlHeight - (jQuery(this).find('dt').outerWidth()-jQuery(this).find('dt').width());
slideTotal = jQuery(this).find('dt').size();
ddWidth = dlWidth - (dtWidth*slideTotal) - (jQuery(this).find('dd').outerWidth(true)-jQuery(this).find('dd').width());
ddHeight = dlHeight - (jQuery(this).find('dd').outerHeight(true)-jQuery(this).find('dd').height());
};
jQuery(this).setVariables();
// -------- Fix some weird cross-browser issues due to the CSS rotation -------------------------------------
if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ }
if (jQuery.browser.mozilla){ var dtTop = dlHeight - 20; var dtOffset = - 20; /* FF */ }
if (jQuery.browser.msie){ var dtTop = 0; var dtOffset = 0; /* IE */ }
if (jQuery.browser.opera){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; } /* Opera */
// -------- Getting things ready ------------------------------------------------------------------------------
var f = 1;
var paused = false;
jQuery(this).find('dt').each(function(){
jQuery(this).css({'width':dtHeight,'top':dtTop,'margin-left':dtOffset});
// add unique id to each tab
jQuery(this).addClass('spine_' + f);
// add active corner
var corner = document.createElement('div');
corner.className = 'activeCorner spine_' + f;
jQuery(this).append(corner);
if(settings.slideNum == true){
jQuery('<span class="slide-number">'+f+'</span>').appendTo(this);
if(jQuery.browser.msie){
var slideNumLeft = parseInt(jQuery(this).find('.slide-number').css('left'));
if(jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){
jQuery(this).find('.slide-number').css({'bottom':'auto'});
slideNumLeft = slideNumLeft - 14;
jQuery(this).find('.slide-number').css({'left': slideNumLeft})
}
if(jQuery.browser.version == 8.0 || jQuery.browser.version == 9.0){
var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')) - 20;
jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
slideNumLeft = slideNumLeft - 10;
jQuery(this).find('.slide-number').css({'left': slideNumLeft})
jQuery(this).find('.slide-number').css({'marginTop': 10});
}
} else {
var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top'));
jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
}
}
f = f + 1;
});
if(jQuery(this).find('.active').size()) {
jQuery(this).find('.active').next('dd').addClass('active');
} else {
jQuery(this).find('dt:first').addClass('active').next('dd').addClass('active');
}
jQuery(this).find('dt:first').css({'left':'0'}).next().css({'left':dtWidth});
jQuery(this).find('dd').css({'width':ddWidth,'height':ddHeight});
// -------- Functions ------------------------------------------------------------------------------
jQuery.fn.findActiveSlide = function() {
var i = 1;
this.find('dt').each(function(){
if(jQuery(this).hasClass('active')){
activeID = i; // Active slide
} else if (jQuery(this).hasClass('no-more-active')){
noMoreActiveID = i; // No more active slide
}
i = i + 1;
});
};
jQuery.fn.calculateSlidePos = function() {
var u = 2;
jQuery(this).find('dt').not(':first').each(function(){
var activeDtPos = dtWidth*activeID;
if(u <= activeID){
var leftDtPos = dtWidth*(u-1);
jQuery(this).animate({'left': leftDtPos});
if(u < activeID){ // If the item sits to the left of the active element
jQuery(this).next().css({'left':leftDtPos+dtWidth});
} else{ // If the item is the active one
jQuery(this).next().animate({'left':activeDtPos});
}
} else {
var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1));
jQuery(this).animate({'left': rightDtPos});
var rightDdPos = rightDtPos+dtWidth;
jQuery(this).next().animate({'left':rightDdPos});
}
u = u+ 1;
});
setTimeout( function() {
jQuery('.easy-accordion').find('dd').not('.active').each(function(){
jQuery(this).css({'display':'none'});
});
}, 400);
};
jQuery.fn.activateSlide = function() {
this.parent('dl').setVariables();
this.parent('dl').find('dd').css({'display':'block'});
this.parent('dl').find('dd.plus').removeClass('plus');
this.parent('dl').find('.no-more-active').removeClass('no-more-active');
this.parent('dl').find('.active').removeClass('active').addClass('no-more-active');
this.addClass('active').next().addClass('active');
this.parent('dl').findActiveSlide();
if(activeID < noMoreActiveID){
this.parent('dl').find('dd.no-more-active').addClass('plus');
}
this.parent('dl').calculateSlidePos();
};
jQuery.fn.rotateSlides = function(slideInterval, timerInstance) {
var accordianInstance = jQuery(this);
timerInstance.value = setTimeout(function(){accordianInstance.rotateSlides(slideInterval, timerInstance);}, slideInterval);
if (paused == false){
jQuery(this).findActiveSlide();
var totalSlides = jQuery(this).find('dt').size();
var activeSlide = activeID;
var newSlide = activeSlide + 1;
if (newSlide > totalSlides) newSlide = 1;
jQuery(this).find('dt:eq(' + (newSlide-1) + ')').activateSlide(); // activate the new slide
}
}
// -------- Let's do it! ------------------------------------------------------------------------------
function trackerObject() {this.value = null}
var timerInstance = new trackerObject();
jQuery(this).findActiveSlide();
jQuery(this).calculateSlidePos();
if (settings.autoStart == true){
var accordianInstance = jQuery(this);
var interval = parseInt(settings.slideInterval);
timerInstance.value = setTimeout(function(){
accordianInstance.rotateSlides(interval, timerInstance);
}, interval);
}
jQuery(this).find('dt').not('active').click(function(){
jQuery(this).activateSlide();
accordianInstance = jQuery(this);
clearTimeout(timerInstance.value);
timerInstance.value = setTimeout(function(){
accordianInstance.rotateSlides(interval, timerInstance);
}, interval);
if (typeof settings.afterClickCallback == "function") settings.afterClickCallback(); //activate callback if there is one
});
if (!(jQuery.browser.msie && jQuery.browser.version == 6.0)){
jQuery('dt').hover(function(){
jQuery(this).addClass('hover');
}, function(){
jQuery(this).removeClass('hover');
});
}
if (settings.pauseOnHover == true){
jQuery('dd').hover(function(){
paused = true;
}, function(){
paused = false;
});
}
});
};
})(jQuery);</script>
<!-- Content from utility.js file included in package -->
<script type="text/javascript">
$(document).ready(function () {
$('#accordion-1').easyAccordion({
autoStart: true,
slideInterval: 5000
});
});</script>
<style type="text/css">
@font-face {font-family: Dax;
src: url(http://cookware.lecreuset.com/opencms/opencms/CVWEB/images/font/Dax-Regular.otf);
src: url(http://cookware.lecreuset.com/opencms/opencms/CVWEB/images/font/DaxScWebPro.eot);
}
/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */
.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0;}
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0;}
.easy-accordion dt,.easy-accordion dd{position:absolute;}
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
.easy-accordion dd{z-index:1;opacity:0;overflow:hidden;}
.easy-accordion dd.active{opacity:1;}
.easy-accordion dd.no-more-active{z-index:2;opacity:1;}
.easy-accordion dd.active{z-index:3;}
.easy-accordion dd.plus{z-index:4;}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */
img{padding: 0px; margin:0px;}
#accordion-1{width:733px;height:335px;padding:0px;background:#ffffff;border:1px solid #b5c9e8;}
#accordion-1 dl{width:733px;height:335px;}
#accordion-1 dt{height:46px;line-height:44px;text-align:center;padding:0 15px 0 0;font-size:32px;font-weight:normal;font-family:Dax,Helvetica,Arial,sans-serif;letter-spacing:1px;background:#fff url(hp_hero_global-tab-inactive.gif) 0 0 no-repeat;color:#ffffff;}
#accordion-1 dt.active{cursor:progress;color:#f37022;background:url(hp_hero_global-tab-active.gif) 0 0 no-repeat;}
#accordion-1 dt.hover{color:#ffffff;}
#accordion-1 dt.active.hover{color:#f37022;}
#accordion-1 dd{padding:0px;background:#ffffff;border:1px solid #dbe9ea;border-left:0;}
#accordion-1 .slide-number{display:none;}
#accordion-1 .active .slide-number{display:none;}
#accordion-1 a{color:#68889b; padding: 0px; margin: 0px;}
#accordion-1 h2{font-size:2.5em;}
#accordion-1 .more{padding-top:10px;display:block;}
#accordion-1 img{padding: 0px; margin:0px; float:left;}
</style>
</head>
<body>
<div id="accordion-1">
<dl>
<dt><div id="tab1">Moroccan</div></dt>
<dd><a href="tbd"><img src="hp_hero_global-morocco-top.jpg" height="167" width="594" alt="Tagine: Shop Now" /></a><a href="tbd"><img src="hp_hero_global-morocco-bottom.jpg" height="167" width="594" alt="Moroccan Lamb Tagine Recipe" /></a>
</dd><dt>French</dt>
<dd><a href="tbd"><img src="hp_hero_global-asia-top.jpg" height="167" width="594" alt="Wok: Shop Now" /></a><a href="tbd"><img src="hp_hero_global-asia-bottom.jpg" height="167" width="594" alt="Chicken Stir Fry Recipe" /></a>
</dd>
<dt>Mexican</dt>
<dd><a href="tbd"><img src="hp_hero_global-mex-top.jpg" height="167" width="594" alt="Shop Now" /></a><a href="tbd"><img src="hp_hero_global-mex-bottom.jpg" height="167" width="594" alt="Braised Pork Carnitas Recipe" /></a>
</dd></dl>
</div>
</body>
</html>
Before you post, read our: 
