jQuery issue with IE7
Having an issue with a DIV appearing and disappearing within IE7 only. All other browsers work fine. Script and markup and CSS below. Any ideas
view sample here:
http://dev.griffiti.com/inheritage/index.html
view sample here:
http://dev.griffiti.com/inheritage/index.html
SCRIPT & MARKUP
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.fadeTransition = function(options) {
var options = $.extend({pauseTime: 5000, transitionTime: 2000, ignore: null, delayStart: 0, pauseNavigation: false}, options);
var transitionObject;
Trans = function(obj) {
var timer = null;
var current = 0;
var els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
$(obj).css("position", "relative");
els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
if (options.delayStart > 0) {
setTimeout(showFirst, options.delayStart);
}
else
showFirst();
function showFirst() {
if (options.ignore) {
$(options.ignore, obj).fadeOut(options.transitionTime);
$(els[current]).fadeIn(options.transitionTime);
}
else {
$(els[current]).css("display", "block");
}
}
function transition(next) {
$(els[current]).fadeOut(options.transitionTime);
$(els[next]).fadeIn(options.transitionTime);
current = next;
cue();
};
function cue() {
if ($("> *", obj).length < 2) return false;
if (timer) clearTimeout(timer);
if (!options.pauseNavigation) {
timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
}
};
this.showItem = function(item) {
if (timer) clearTimeout(timer);
transition(item);
};
cue();
}
this.showItem = function(item) {
transitionObject.showItem(item);
};
return this.each(function() {
transitionObject = new Trans(this);
});
}
})(jQuery);
var page = {
tr: null,
init: function() {
page.tr = $(".slideShow").fadeTransition({pauseTime: 5000, transitionTime: 2000, delayStart: 1000});
$("div.navigation").each(function() {
$(this).children().each( function(idx) {
if ($(this).is("a"))
$(this).click(function() { page.tr.showItem(idx); return false; })
});
});
},
show: function(idx) {
if (page.tr.timer) clearTimeout(page.tr.timer);
page.tr.showItem(idx);
}
};
$(document).ready(page.init);
</script>
</head>
<body>
<div id="outer_container">
<div id="inner_container">
<div id="slides_bg">
<div id="homeLink">
<a href="index.html"> </a>
</div>
<div class="slideShow">
<div class="rotator r1">
<div class="navigation">
<div class="current"></div>
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
</div>
<div class="pausePlay">
<a href="#"> </a>
</div>
<img src="images/slide01.jpg" alt="Your Description" />
<p><em>Along the Blueridge Parkway</em><br />
Western North Carolina<br />
June 2010<br />
<font color="#bfbfbf" size="1">InHeritage Travel Collection ©</font></p>
</div>
<div class="rotator r1">
<div class="navigation">
<a href="#"> </a>
<div class="current"></div>
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
</div>
<div class="pausePlay">
<a href="#"> </a>
</div>
<img src="images/slide02.jpg" alt="Your Description" />
<p><em>My Picture Number Two</em><br />
Somewhere on the East Coast<br />
January 2010<br />
<font color="#bfbfbf" size="1">InHeritage Travel Collection ©</font></p>
</div>
<div class="rotator r1">
<div class="navigation">
<a href="#"> </a>
<a href="#"> </a>
<div class="current"></div>
<a href="#"> </a>
<a href="#"> </a>
</div>
<div class="pausePlay">
<a href="#"> </a>
</div>
<img src="images/slide03.jpg" alt="Your Description" />
<p><em>My Picture Number Three</em><br />
Western North Carolina<br />
April 2010<br />
<font color="#bfbfbf" size="1">InHeritage Travel Collection ©</font></p>
</div>
<div class="rotator r1">
<div class="navigation">
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
<div class="current"></div>
<a href="#"> </a>
</div>
<div class="pausePlay">
<a href="#"> </a>
</div>
<img src="images/slide04.jpg" alt="Your Description" />
<p><em>My Picture Nimber 4</em><br />
Western North Carolina<br />
March 2010<br />
<font color="#bfbfbf" size="1">InHeritage Travel Collection ©</font></p>
</div>
<div class="rotator r1">
<div class="navigation">
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
<a href="#"> </a>
<div class="current"></div>
</div>
<div class="pausePlay">
<a href="#"> </a>
</div>
<img src="images/slide05.jpg" alt="Your Description" />
<p><em>My Picture Number 5</em><br />
Washington DC<br />
April 2008<br />
<font color="#bfbfbf" size="1">InHeritage Travel Collection ©</font></p>
</div>
</div>
CSS
.slideShow {
z-index: 10;
}
div.rotator {
position: relative;
height: 375px; width: 757px;
margin-top: 100px;
margin-left: 190px;
}
div.r1 {
}
div.r1 p {
margin-top: 138px;
text-align: left;
font-size: 11px;
line-height: 30px;
color: #ffffff;
float: right;
width: 167px;
height: 196px;
background-image: url('images/textbg.gif');
background-repeat: no-repeat;
}
div.navigation {
position: absolute;
top: 150px;
left: -80px;
}
div.navigation div.current, div.navigation a {
width: 12px;
height: 20px;
margin: 0 0px 0 0;
overflow: hidden;
background-image: url('images/slide_position.png');
background-repeat: no-repeat;
text-decoration: none;
}
div.navigation a:hover {
text-decoration: none;
}
div.navigation div.current {
background-image: url('images/slide_position_hover.png');
background-repeat: no-repeat;
}
div.navigation a {
display: block;
background-image: url('images/slide_position.png');
}
#introslide {
background: transparent;
}
div.pausePlay {
position: absolute;
width: 16px;
height: 16px;
top: 250px;
left: -82px;
display: block;
overflow: hidden;
}
div.pausePlay a {
background: url('images/pause_play_all.png');
background-repeat: no-repeat;
background-position: 0 0;
text-decoration: none;
}
div.pausePlay a:hover {
background: url('images/pause_play_all.png');
background-repeat: no-repeat;
background-position: 0 -16px;
text-decoration: none;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You were right about the being positioned outside the container. Once I move all into the main container it worked in IE7, but I had to completely change the CSS for IE7. Navigation had to be relatively positioned.
Thanks
Thanks
But you may use navigator to detect browser.
If it is IE7 then show a notice that the website doesn't support IE7 and tell them to change.
Good luck!