Consultez la FAQ sur le ZF avant de poster une question
Vous n'êtes pas identifié.
bonjour pour un des mes site j'ai voulu faire un slideshow avec un menu vertical alors sous firefox il amrche trés bien mais sous IE seul le menu change et pas le coté droit .
voila le lien lien
A mon avis le pb vient des zindex sous IE car Ie affiche directement dans la partie gauche le dernier div.
Voila le code du slide (pour l'instant non optimisé). Je les programmé avec des indices car il sera compris dans une boucle donc je connaitrais le nombre d'éléments a l'intérieur. La c'est juste une version de test.
<div id="slideshow"> <span id="loading">Loading</span> <ul id="pictures"> <li><div id="slide_1" class="active" style="background-color:blue;width:437;height:277px;">dfgdfg</div></li> <li><div id="slide_2" style="background-color:yellow;width:437;height:277px;">pppp</div></li> <li><div id="slide_3" style="background-color:green;width:437;height:277px;">gmmmmm</div></li> <li><div id="slide_4" style="background-color:yellow;width:437;height:277px;">Wddddd</div></li> <li><div id="slide_5" style="background-color:purple;width:437;height:277px;">kkkkkkkkk</div></li> <li><div id="slide_6" style="background-color:white;width:437;height:277px;">uuuuuuuu</div></li> </ul> <ul id="menu"> <li id="menu_1"><a onclick="slideSwitch(1,6,1);">Melbourne</a></li> <li id="menu_2"><a onclick="slideSwitch(2,6,1);">Buenos Aires</a></li> <li id="menu_3"><a onclick="slideSwitch(3,6,1);">Urubamba</a></li> <li id="menu_4"><a onclick="slideSwitch(4,6,1);">Urubamba</a></li> <li id="menu_5"><a onclick="slideSwitch(5,6,1);">Urubamba</a></li> <li id="menu_6"><a onclick="slideSwitch(6,6,1);">Urubamba</a></li> </ul> </div> <script type="text/javascript"> var depart; function slideSwitch(deb,nb,clear) { if(clear==1){ clearInterval (depart); //on va aussi enlever le current sur les menu //on va regarde celle qui ets en current actuellement for(i=1;i<=nb;i++){ $("#menu_"+i).removeClass("current"); $("#slide_"+i).removeClass('active last-active'); } $("#slide_"+deb).addClass('active'); } $("#menu_"+deb).addClass("current"); var $debut=deb; var $fin=nb; var $position=$debut; depart=setInterval(function(){ var $active = $('#slide_'+$position); $("#menu_"+$position).removeClass("current"); // if ( $active.length == 0 ) $active = $('#pictures DIV:last'); //var $next = $active.next().length ? $active.next() //: $('#pictures DIV:first'); $position+=1; if($position>$fin){ $position=1; } //alert($position); var $next=$("#slide_"+$position); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); $("#menu_"+$position).addClass("current"); },5000); } $(function() { slideSwitch(1,4,0); // setInterval( "slideSwitch(4)", 5000 ); }); </script>
et voila le css
/* CSS Document */ #slideshow * { margin: 0; padding: 0; } #slideshow { background: url('images/bg_shadow.gif') no-repeat top; position: relative; padding: 14px 0 15px; width: 603px; height: 306px; } #slideshow #menu, #slideshow #pictures, #slideshow #loading { position: absolute; } #slideshow #loading { background: url('images/spinner.gif'); display: block; top: 158px; left: 205px; text-indent: -5000px; width: 24px; height: 24px; visibility: hidden; z-index: 5; } #slideshow #pictures { background: url('images/bg.jpg'); width: 437px; height: 277px; left: 0; overflow: hidden; } #slideshow #pictures li { display: block; position: absolute; top: 0; width: 437px; } #slideshow #pictures li img { display: block; position: relative; bottom: 0; } #slideshow #menu { background: url('images/bg_side.jpg'); list-style-type: none; width: 166px; height: 257px; right: 0; padding-top: 20px; } #slideshow #menu li { display: block; z-index: 1000; position: relative; zoom: 1;z-index:11; } #slideshow #menu li a { display: block; font: 11px "Lucida Grande", "Verdana"; text-decoration: none; padding: 7px 0 7px 28px; z-index: 1000; color: #ccc; line-height: 14px; vertical-align: middle; zoom: 1; } #slideshow #menu li a:focus { outline: 0; } #slideshow #menu li a:hover { color: #fff; background-color:#67acbb;} #slideshow #menu li.current a { font: 15px "Georgia"; color: #fff; padding: 5px 0 5px 28px; line-height: 18px; background-color:#00c7f2;} #slideshow #menu li.background { background: url('images/arrow.gif') no-repeat left center; position: absolute; font-size: 1px; height: 7px; width: 4px; z-index: 5; } #slideshow DIV { position:absolute; top:0; left:0; z-index:8; } #slideshow DIV.active { z-index:10; } #slideshow DIV.last-active { z-index:9; }
Merci de votre aide
cdt
Dernière modification par lebilien (20-08-2009 12:57:48)
Hors ligne
tu devrais utiliser le composant tabs de jquery, ca se fait en une ligne de JS (et un fichier )
http://jqueryui.com/demos/tabs/
Hors ligne
le pb est pas au niveau du jquery sa marche nickel sous firefox si tu as tester sa tourne tous seul et si tu clique se reprend la ou tu as cliquer . Meme si je met tabs sa changera rien au fait que IE affiche le dernier div et dc ne gére pas les z-index.
je regarderai tabs au moment ou je voudrais optimisé le code.
cdt
Hors ligne
ne serait pas a cause de la gestion différentes de l'opacité faite par IE cf
http://www.zonecss.fr/style_css/feuille … cde155e699
Après ce n'est peut être plus d'actualité
Hors ligne
j'y avais aussi penser et j'ai retirer les ligne "opacity" mais cela ne change rien . Mais ici l'opacity est utilisé que au changement .
Logiquement quand on affiche le slide on doit avoir le carré bleu (comme sous firefox) en premier hors on a le dernier le blanc voila pourquoi je penche vers les zindex
Hors ligne
Pb résolu et cela venez effectivement des zindex que j'ai remplacé au final display:block; et display:none; et maintenant sa marche sous IE et firefox alors maintenant je peut essayer d'optimiser mais sa marche deja pas mal .
Merci
Hors ligne