Problème tableau accordéon.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème tableau accordéon.

Message par Eliazu le Mer 26 Juin 2013 - 19:42

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 ! Smile

Eliazu
*

Messages : 45
Inscrit(e) le : 12/06/2013

http://yami-no-chikara.forumactif.org/
Eliazu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème tableau accordéon.

Message par Eliazu le Jeu 27 Juin 2013 - 2:17

Up.

Eliazu
*

Messages : 45
Inscrit(e) le : 12/06/2013

http://yami-no-chikara.forumactif.org/
Eliazu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème tableau accordéon.

Message par Invité le Jeu 27 Juin 2013 - 9:26

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>

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème tableau accordéon.

Message par Eliazu le Jeu 27 Juin 2013 - 11:10

Merci beaucoup Danynou ! Very Happy
Problème résolu ! Wink

Eliazu
*

Messages : 45
Inscrit(e) le : 12/06/2013

http://yami-no-chikara.forumactif.org/
Eliazu a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum