Problème PA en accordéon

[Miss CC]

Bonjour,

voilà le lien du forum ou se pose mon soucis: http://gaddict.forumactif.org/

j'ai obté pour la PA en accordéon et j'ai un petit soucis à savoir j'aimerais ralentir le défilement des page car elle slide d'elle même mais je voudrais que ça prenne un peu plus de temps es-ce possible si oui comment procéder s'il vous plait?

Et au niveau de mon premier onglet j'ai fait un tableau à l'intérieur mais je n'arrive pas à remonter la vidéo, comment faire s'il vous plait, j'ai essayer margin-top en mettant une class au span de la vidéo mais ça n'a pas fonctionné.

Voici le javascript de l'accordéon:

Code:

$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:true,
      containerWidth: 960,
      containerHeight: 320
    })
  });
});
/*************************************************!
*
*  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:o,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({left:(n?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===8){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}}}}})(jQuery);

Le html:

Code:

<div id="accordeon-pa" class="accordion">
    <ol>
        <li>
            <h2><span class="accordeon1">A Propos</span></h2>
            <div>
             <table cellpadding="3"><tr><td width="117" valign="top" rowspan="2"  bgcolor="#4d8ffc"><div style="height: 20px; background: #4d8ffc; border-bottom: 1px dashed #000000; font-family: impact; color:#000000; font-size:15px;"><center>A Propos</center></div><marquee height="130" direction="up" scrollamount="1"><span style="color: black;">GA est un forum de Graphisme basé en premier lieu sur la convivialité et l'entraide!<br /> <br />
Il n'a pas pour vocation d'être un forum comme les autres, étant donné qu'il est entièrement tourné vers un système de teams.
Pour pouvoir profiter pleinement des concours, défis, duels il vous faudra appartenir à l'une d'entre elles.
Vous aurez aussi la possibilité de faire évaluer votre niveau, de nous montrer vos talents de graphistes et d'apprendre via
le partage mais aussi grâce aux tutos, cours collectifs et particuliers.<br /></span><br>
<br>
</marquee></td>
<table cellpadding="3"><tr><td width="170" valign="top" rowspan="2"  bgcolor="#4d8ffc"><div style="height: 20px; background: #4d8ffc; border-bottom: 1px dashed #000000; font-family: impact; color:#000000; font-size:15px;"><center>Crédits</center></div><span style="color: black;">L'ensemble du forum appartient à ses fondatrices . Thème et Code conçuent par
<a href="http://graph-addict.forumactif.pro/u3">Miss CC</a>. Agencement et rédaction par
<a href="http://graph-addict.forumactif.pro/u2">Ellanna</a> et <a href="http://graph-addict.forumactif.pro/u4">Elfy</a>.
Merci à tout ceux qui nous ont aidé à bâtir Graph Addict. <br /></span><br>
<br>
</td>
<span class="video">
<td width="580"  height="312" bgcolor="#4d8ffc" align="justify">
<iframe width="580" height="312" src="//www.youtube.com/v/QX-Efv95zqA?version=3&amp&rel=0&autoplay=1&replay&loop=1&playlist=lniVx_pFM_A%5D&rel=0" frameborder="0" allowFullScreen=""></iframe>
</span>
</td>
</table>
          
            </div>
        </li>
        <li>
            <h2><span class="accordeon2">Le Staff</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/v5LuU.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span class="accordeon3">Les Teams</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/VdDge.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span class="accordeon4" >Les Tops</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
        </li>
    </ol>
</div>


le css:

Code:

/*PA EN ACCORDEON */
.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: #ffffff;
    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: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.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: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.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 }

accordion .slide > h2 span.accordeon1{
  background-color: #4d8ffc;}
/****************************************** Dark */
.accordion {
    border: 1px solid #4d8ffc;
    border-bottom-width: 1px;
    padding: 5px 5px 6px 0;
    background: #000000;
    -webkit-box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #000000 inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 {
  background: #000000;
  text-shadow: 0 -1px 0 #030303;
  line-height: 265% }

.accordeon1 {
  background: #4d8ffc;
  color: black}

.accordeon2 {
  background: #b36ed0;
  color: black}

.accordeon3 {
  background: #da448a;
  color: black}

.accordeon4 {
  background: #fd8983;
  color: black}

.accordion .slide > h2 b {
background: transparent;
color: #030303;
text-shadow: -1px 1px 0 #5b5b5b }

.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #000000;
    background: -moz-linear-gradient(left,  #000000 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #000000 0%,#555555 100%);
    background: -o-linear-gradient(left,  #000000 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #000000 0%,#555555 100%);
    background: linear-gradient(left,  #000000 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', 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; }


Merci ^par avance pour l'aide que vous pourrez m'apporter^^

[Invité]

Bonjour,

pour le temps entre chaque onglet tu cherches: cycleSpeed:6000 dans le script et tu agis sur la valeur 6000

je regarde le reste

[Miss CC]

Ha nikel merci pour le temps c'est parfait, merci beaucoup!

[Invité]

je fais le reste tu l'auras demain matin car je dois partir !!!
mais pas de problème

Cdt

[Miss CC]

Ha merci c'est très gentil vraiment!
bonne soirée cdt

[Invité]

Bonjour,

Voilà le code que je t'ai promis, j'espère que cela te convient.

Code:


<div id="accordeon-pa" class="accordion">
 <ol>
  <li>
   <h2><span class="accordeon1">A Propos</span></h2>
    <div>
               <table border="0">
                  <tr>
                     <td valign="top">
                        <table height="317" border="0">
                           <tr>
                              <td valign="top" height="163" bgcolor="#4d8ffc">
                                 <div style="height: 20px; background: #4d8ffc; border-bottom: 1px dashed #000000; font-family: impact; color:#000000; font-size:15px;"><center>A Propos</center></div>
                                    <marquee height="170" direction="up" scrollamount="1">
                                       <span style="color: black;">GA est un forum de Graphisme basé en premier lieu sur la convivialité et l'entraide!<br /> <br />
Il n'a pas pour vocation d'être un forum comme les autres, étant donné qu'il est entièrement tourné vers un système de teams.
Pour pouvoir profiter pleinement des concours, défis, duels il vous faudra appartenir à l'une d'entre elles.
Vous aurez aussi la possibilité de faire évaluer votre niveau, de nous montrer vos talents de graphistes et d'apprendre via
le partage mais aussi grâce aux tutos, cours collectifs et particuliers.<br />
                                       </span>
                                    </marquee>
                              </td>
                           </tr>
                           <tr height="100%">
                              <td bgcolor="#4d8ffc"><div style="height: 20px; background: #4d8ffc; border-bottom: 1px dashed #000000; font-family: impact; color:#000000; font-size:15px;"><center>Crédits</center></div>
                              <span style=" height: 120px; color: black;">L'ensemble du forum appartient à ses fondatrices . Thème et Code conçuent par
                              <a href="http://graph-addict.forumactif.pro/u3">Miss CC</a>. Agencement et rédaction par
                              <a href="http://graph-addict.forumactif.pro/u2">Ellanna</a> et <a href="http://graph-addict.forumactif.pro/u4">Elfy</a>.Merci à tout ceux qui nous ont aidé à bâtir Graph Addict. <br />
                              </span><br />
                              </td>
                           </tr>
                        </table>
                           <td class="video" width="580"  height="316" bgcolor="#4d8ffc" align="justify">
                              <iframe width="580" height="310" src="//www.youtube.com/v/QX-Efv95zqA?version=3&amp&rel=0&autoplay=1&replay&loop=1&playlist=lniVx_pFM_A%5D&rel=0" frameborder="0" allowFullScreen=""></iframe>
                           </td>
                     </td>
                  </tr>
               </table>
      <li>
       <h2><span class="accordeon2">Le Staff</span></h2>
        <div>
         <figure>
          <img class="full" src="http://i.imgur.com/v5LuU.jpg" alt="image" />
         </figure>
        </div>
      </li>
      <li>
       <h2><span class="accordeon3">Les Teams</span></h2>
        <div>
         <figure>
          <img class="full" src="http://i.imgur.com/VdDge.jpg" alt="image" />
         </figure>
        </div>
      </li>
       <li>
        <h2><span class="accordeon4" >Les Tops</span></h2>
         <div>
          <figure>
           <img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
          </figure>
         </div>
      </li>
             <li>
        <h2><span class="accordeon5" >Les infos</span></h2>
         <div>
          <figure>
           <img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
          </figure>
         </div>
      </li>
 </ol>
</div>


Je te laisse ajuster les cellules à ta convenance

je te conseil aussi ces valeurs là dans le script:
containerWidth: 980,
containerHeight: 320



EDIT: 13h45 aujourd'hui: j'ai rajouté un onglet pour etre dans ta config
@+

Cordialement  

[Miss CC]

Coucou Merci beaucoup beaucoup ^^

c'est juste nikel merci infiniement!

[Invité]

de rien n'hésite surtout pas

[Miss CC]

c'est gentil ^^

ben si je peux te demander si tu vois un truc qui cloche dans mon script ici si tu t'y connais: https://forum.forumactif.com/t356842-probmleme-avec-un-script-java

Car J e trouve pas la solution à mon problème depuis hier je m'arrache les cheveux lol

Merci beaucoup pour ton aide!

[Invité]

je vais regarder mais te promet rien, tu peux clore le sujet

[Miss CC]

oki merci c'est gentil te ta part je clos merci!