Ich kann jQuery überhaupt nicht mit IE7 arbeiten. Ich benutze das jQuery Cycle-Plugin, aber ich glaube, dass dieses Problem mit jQuery (und der Tatsache, dass ich ein Neuling bin) ist. Ich versuche einen Banner-Rotator zu verwenden, der auf Firefox, Safari und IE8 funktioniert. Auf IE7 wird es nicht einmal aktiviert ... es zeigt nur jedes div nacheinander.jQuery IE7 Problem (mit jQuery Cycle Plugin)
Vielen Dank im Voraus!
Beispiel http://testing.observerpapers.com/lv
JS
$(document).ready(function() {
$('#myslides')
.before('<div id="nav">')
.cycle({
fx: 'fade', // choose your transition type
speedIn: 600,
speedOut: 600,
timeout: 8000,
pause: 0, // so that pauses when user hovers over a slide
pager: '#nav', // instructs the plugin to create navigation elements
}); // every child element of the container becomes a slide
/*ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
});*/
});
CSS
#myslides {
width: 980px;
height: 360px;
/*overflow: hidden;*/
z-index: 500;
background:none !important;
}
#myslides div {
/*background:none !important;*/
}
#myslides .textBlock {
background: url(../images/home/bg-bb-textblocks.png) top left repeat;
width: 360px;
padding: 4px;
margin-top: 42px;
margin-left: 33px;
}
#myslides .textBlock div {
padding: 17px 8px 10px 18px;
border: 1px solid #756e67;
}
#myslides h1 {
font: normal 24px/1.2 Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #fff;
margin-bottom: 5px;
}
#myslides p {
font: normal 14px/1.3 Helvetica, Arial, sans-serif;
color: #fff;
}
#myslides cite {
display: block;
width: 500px;
font-style: normal;
text-transform: uppercase;
color: #fff;
font-size: 12px;
position: absolute;
bottom: 6px;
left: 20px;
z-index: 5000;
}
#myslides > div {
width: 980px;
height: 386px;
}
#myslides .billBoard1 {
background: url(../images/home/bb-kingston.jpg) top left repeat;
}
#myslides .billBoard2 {
background: url(../images/home/bb-harbor-breeze.jpg) top left repeat;
}
#myslides .billBoard3 {
background: url(../images/home/bb-mondrian.jpg) top left repeat;
}
.slides {
margin-left: 385px;
width: 539px;
}
.navBG {
position: absolute;
display: block;
z-index: 500;
bottom: 0;
width: 980px;
height: 30px;
background: url(../images/home/bg-bb-textblocks.png) top left repeat;
}
#nav {
position: absolute;
z-index: 501;
top: 356px;
right: 10px;
height: 30px;
text-align: right;
}
#nav a:hover, #nav a.activeSlide {
background:none repeat scroll 0 0;
font-weight: bold;
color: #fff;
}
#nav a {
background:url("") repeat-x scroll 0 0;
color: #d6d2cf;
display: inline-block;
font: 12px/18px Helvetica, Arial, san-serif;
height: 18px;
margin: 4px 0 0 5px;
padding: 2px 8px;
text-align: center;
text-decoration: none;
}
#nav {
font-size: 23px;
}
Für mich funktioniert es nicht einmal in IE8. Die Entwicklertools zeigen den folgenden Text: 'LOG: [cycle] termining; zu wenige Folien: 0'. – MvanGeest
Danke MvanGeest! Ich habe es in IE8 behoben. Wirst du es dir bitte noch einmal ansehen? – alertone