Problème PA en accordéon

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

Résolu Problème PA en accordéon

Message par Miss CC le Mar 27 Aoû 2013 - 17:30

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^^


Dernière édition par Miss CC le Mer 28 Aoû 2013 - 17:23, édité 1 fois

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème PA en accordéon

Message par Invité le Mar 27 Aoû 2013 - 17:45

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

Invité
Invité


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

Résolu Re: Problème PA en accordéon

Message par Miss CC le Mar 27 Aoû 2013 - 18:12

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

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème PA en accordéon

Message par Invité le Mar 27 Aoû 2013 - 18:24

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

Cdt

Invité
Invité


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

Résolu Re: Problème PA en accordéon

Message par Miss CC le Mar 27 Aoû 2013 - 19:12

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

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème PA en accordéon

Message par Invité le Mer 28 Aoû 2013 - 10:45

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 Smile

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   bounce

Invité
Invité


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

Résolu Re: Problème PA en accordéon

Message par Miss CC le Mer 28 Aoû 2013 - 16:32

Coucou Merci beaucoup beaucoup ^^

c'est juste nikel merci infiniement!


Dernière édition par Miss CC le Mer 28 Aoû 2013 - 17:03, édité 1 fois

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème PA en accordéon

Message par Invité le Mer 28 Aoû 2013 - 16:37

de rien n'hésite surtout pas Smile

Invité
Invité


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

Résolu Re: Problème PA en accordéon

Message par Miss CC le Mer 28 Aoû 2013 - 17:10

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: http://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!

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème PA en accordéon

Message par Invité le Mer 28 Aoû 2013 - 17:19

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

Invité
Invité


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

Résolu Re: Problème PA en accordéon

Message par Miss CC le Mer 28 Aoû 2013 - 17:22

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

Miss CC
*

Messages : 48
Inscrit(e) le : 10/08/2013

http://graph-addict.forumactif.pro/
Miss CC 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