Problème tableau accordéon.

[Eliazu]

Salut à tous !

Voilà, j'ai un problème avec mon menu accordéon, le mot "ChatBox" est coupé dès la lettre "C", on doit cliquer plusieurs fois sur le mot caché pour le voir apparaître, mais j'ai ce problème seulement sur Mozilla Firefox.
Voici mes codes CSS/Javascript, et mon message d'accueil qui m'a permis de créer ce tableau.

CSS :

Code:

[code]@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 16px;    
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progidXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progidXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progidXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progidXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progidXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
    background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; margin-left: 5px }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }[/code]

Javascript :

Code:

$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:false,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:true,
      containerWidth: 1120,
      containerHeight: 450
    })
  });
});
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
(function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"click",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({leftn?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m==={c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jjQuery);

Message d'accueil :

Code:

<div id="accordeon-pa" class="accordion">
    <ol>
        <li>
            <h2><span>ChatBox</span></h2>
            <div>
              <figure>
                <chat class="full" src="<chat style=" <chat="" style="<img style=" visibility:hidden;width:0px;height:0px;"="" border="0" width="0" height="0"><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" name="chat" flashvars="id=195293470&amp;gn=YaminoChikara" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" width="900" align="middle" height="430"><br><small><a target="_BLANK" href="http://xat.com/web_gear/chat/embed.php?id=195293470&amp;GroupName=YaminoChikara">Get YaminoChikara chat group</a> | <a target="_BLANK" href="http://xat.com/YaminoChikara"> Goto YaminoChikara website</a></small></chat><chat class="full" src="<chat style=" <chat="" style="<img style=" visibility:hidden;width:0px;height:0px;"="" border="0" width="0" height="0"><br>" alt="chat" />
              </chat></figure>
            </div>
        </li>
        <li>
            <h2><span>Inscription et Recrutement !</span></h2>
            <div>
              <div style="text-align: center;"><figure>

<span style="color: rgb(0, 153, 153);"><span style="font-family: Lucida Sans Unicode;"><font size="3">Pour vous inscrire, vous devrez aller sur "De/Connexion" et après ça, cliquer sur "s'enregistrer", puis,  lorsque vous aurez finalisé votre inscription vous devrez faire votre présentation ! Pour ça vous devrez suivre ce <a href="http://yami-no-chikara.forumactif.org/t1-modele-de-presentation">modèle de présentation</a> et créer un sujet pour faire la votre ! Après votre présentation faite, vous n'aurez plus qu'à poster votre candidature en suivant ce <a href="http://yami-no-chikara.forumactif.org/t5-modele-de-recrutement">modèle de recrutement.</a>
 <img src="http://img809.imageshack.us/img809/7914/26c7.jpg"></font></span></span>
              </figure>
</div>
            </div>
        </li>
        <li>
            <h2><span>En construction ! <br></span></h2><div style="text-align: center;"><font size="3"><span style="color: rgb(0, 102, 102);"><span style="font-family: Lucida Sans Unicode;">C<span style="color: rgb(0, 0, 0);"><span style="font-family: verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;"><span style="color: rgb(0, 102, 102);"><span style="font-family: Lucida Sans Unicode;">e slide servira principalement à partager les actualités ! Un nouveau système verra bientôt le jour, ce 3ème slide sera ouvert dès la mise en place de ce système ! En attendant, Naruto s'entraîne...Peut-être essaye-t-il encore une fois de maîtriser le Chidori ?...Le pauvre, on lui dit ?<span style="color: rgb(0, 0, 0);"><span style="font-family: verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;"> <img src="http://img221.imageshack.us/img221/5391/xdqn.jpg"></span></span></span></span></span></span></span></span></font><br></div><h2><span></span><span></span><br><span></span></h2></li></ol></div>

Forum : http://yami-no-chikara.forumactif.org/

Voilà, merci d'avance !

[Eliazu]

Up.

[Invité]

Bonjour,
des erreurs dans ton javascript, essai ca:

Code:

<div id="accordeon-pa" class="accordion">
    <ol>
        <li>
            <h2><span>ChatBox</span></h2>
            <div>
              <figure>
                <chat class="full" src="<chat style=" <chat="" style="<img style=" visibility:hidden;width:0px;height:0px;"="" border="0" width="0" height="0"><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" name="chat" flashvars="id=195293470&amp;gn=YaminoChikara" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" width="900" align="middle" height="430"><br><small><a target="_BLANK" href="http://xat.com/web_gear/chat/embed.php?id=195293470&amp;GroupName=YaminoChikara">Get YaminoChikara chat group</a> | <a target="_BLANK" href="http://xat.com/YaminoChikara"> Goto YaminoChikara website</a></small></chat><chat class="full" src="<chat style=" <chat="" style="<img style=" visibility:hidden;width:0px;height:0px;"="" border="0" width="0" height="0"><br>" alt="chat" />
              </chat></figure>
            </div>
        </li>
    <li>
            <h2><span>Inscription et Recrutement !</span></h2>
            <div>
              <div style="text-align: center;">
      <figure>
<span style="color: rgb(0, 153, 153);"><span style="font-family: Lucida Sans Unicode;"><font size="3">Pour vous inscrire, vous devrez aller sur "De/Connexion" et après ça, cliquer sur "s'enregistrer", puis,  lorsque vous aurez finalisé votre inscription vous devrez faire votre présentation ! Pour ça vous devrez suivre ce <a href="http://yami-no-chikara.forumactif.org/t1-modele-de-presentation">modèle de présentation</a> et créer un sujet pour faire la votre ! Après votre présentation faite, vous n'aurez plus qu'à poster votre candidature en suivant ce <a href="http://yami-no-chikara.forumactif.org/t5-modele-de-recrutement">modèle de recrutement.</a>
 <img src="http://img809.imageshack.us/img809/7914/26c7.jpg"></font></span></span>
              </figure>
            </div>
            </div>
        </li>
        <li>
            <h2><span>En construction !</span></h2>
      <div style="text-align: center;">
      <figure>
<font size="3"><span style="color: rgb(0, 102, 102);"><span style="font-family: Lucida Sans Unicode;">C<span style="color: rgb(0, 0, 0);"><span style="font-family: verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;"><span style="color: rgb(0, 102, 102);"><span style="font-family: Lucida Sans Unicode;">e slide servira principalement à partager les actualités ! Un nouveau système verra bientôt le jour, ce 3ème slide sera ouvert dès la mise en place de ce système ! En attendant, Naruto s'entraîne...Peut-être essaye-t-il encore une fois de maîtriser le Chidori ?...Le pauvre, on lui dit ?<span style="color: rgb(0, 0, 0);"><span style="font-family: verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;"> <img src="http://img221.imageshack.us/img221/5391/xdqn.jpg"></span>
      </figure>
   </div>
      </li>
    </ol>
</div>


[Eliazu]

Merci beaucoup Danynou !
Problème résolu !