Onglets rangé aléatoirement

2 participants

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

Résolu Onglets rangé aléatoirement

Message par dante Dim 10 Aoû 2014 - 17:00

Bonjour,
Je fais appel à votre aide car j'ai un problème avec un tableau d'onglets.
Les titres de mes onglets (Staff, News, Bienvenue, etc) s'affichent dans un ordre différent à chaque fois que je recharge la page.

Je ne trouve pas d'erreurs dans mon code html et css. Et n'y connaissant rien au JS (que j'accuse haut et fort de ce bug), je vous demande votre aide.

URL du forum où je fais mon inté: http://forumdetest-terrae.lebonforum.com/

(Je précise, cela ne m'arrive que sur Chrome, sur Firefox mes onglets ne bougent pas)

Mon code HTML:
Code:
<div id="tab-bloc" class="systab">
   
   <div class="selected" id="o_1">
       <span><img src="http://i.imgur.com/8aDn6.gif" />Bienvenue</span> <span id="bienvenue"><img src="http://cjoint.com/14au/DHktee1ofuV_bienvenue.jpg" /></span>
      <p>
          Terrae, c'est une chance de se retrouver...
      </p>
      
      <p>
          La possibilité d'avancer, celle de tourner la page. On vous tend une main ; à vous de l'accepter ou de la refuser. Par contre... Sachez que toute décision prise est définitive. Un "non" équivaut à un "adieu" ; le retour en arrière est impossible.
      </p>
      
   </div>
   
   <div id="o_2">
       <span id="contexte"><img src="http://i.imgur.com/Xq6ZJ.jpg" />Contexte</span> <span id="contexte"><img src="http://cjoint.com/14au/DHktfurB00z_contexte.jpg" /><br /></span>
      <p>
          Il était une fois, dans un endroit caché, un monde merveilleux où vivaient des jeunes aux capacités hors du commun.
      </p>
      
      <p>
          Malheureusement, cet endroit paradisiaque disparut. Les pouvoirs envolés, le temps s'occupa de réduire à néant les restes de ce lieu magique.<br /> Mais c'est l'heure du retour. Une nouvelle ère, où ils n'ont plus à se cacher. Une nouvelle ère, où vous êtes les héros. Cette nouvelle génération dotée de pouvoirs dépassant toute humanité...
      </p>
      
      <center>
         
         <p>
             <strong>C'est vous qui l'incarnez.</strong>
         </p>
         
         <p>
             <a href="http://terrae.forumpro.fr/t2-important-contexte" target="_blank">Lire la suite...</a>
         </p>
         
      </center>
      
   </div>
   
   <div id="o_3">
       <span><img src="http://i.imgur.com/8aDn6.gif" />News</span>
      <table class="tableau-news">
         
         <tbody>
            
            <tr>
               
               <td>
                   <span id="news"><img src="http://cjoint.com/13dc/CLvk0B42VvG_clrnwi8a1p5_128476lili.jpg" /></span>
               </td>
               
               <td>
                  
                  <p>
                      <strong><span style="text-decoration: underline;">Ils sont là !</span></strong>
                  </p>
                  
                  <p>
                      Eh oui, vous le savez maintenant. Aëlita & Light, le couple le plus rancunier de Terrae est bel et bien présent dans notre institut et ce n'est pas pour une petite promenade de santé. <br />Qui nous sauvera du tragique destin que nous réservent ces deux-là ?
                  </p>
                  
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
   </div>
   
   <div id="o_4">
       <span><img src="http://i.imgur.com/Xq6ZJ.jpg" />Staff</span>
      <table>
         
         <tbody>
            
            <tr>
               
               <td>
                   <strong>Admin</strong>
               </td>
               
               <td>
                   <strong>Modo</strong>
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
      <table class="tableau-staff">
         
         <tbody>
            
            <tr>
               
               <td>
                   <img class="imagestaff" src="http://img15.hostingpics.net/pics/594101298137VavaHideko.png" />
               </td>
               
               <td>
                   <img class="imagestaff" src="http://img15.hostingpics.net/pics/827362396393OriharaIzayafull850633copie.png" />
               </td>
               
               <td>
                   <img src="http://img15.hostingpics.net/pics/784753arabesque.png" />
               </td>
               
               <td>
                   <img class="imagestaff" src="http://cjoint.com/13ma/CCpmRtUxOPr_bito.jpg" />
               </td>
               
               <td>
                   <img class="imagestaff" src="http://cjoint.com/14au/DHko2qbcO2H_kakeru.png" />
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
   </div>
</div>


Le CSS (celui des onglets):
Code:
/* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */
#tab-bloc .tabs {
  text-align: center;
  margin: 12px 0px 15px 0px;
}

/* .tab = onglets */
#tab-bloc .tab {
  border: none;
  background: #000;
  margin: 0 20px;
  background: none;
  font-family: Fondamento;
  font-size: 20px;
  font-weight: bold;
}

/* .tab.selected = onglet sélectionné*/
#tab-bloc .tab.selected {
  background: #000;
  box-shadow: 0 0 5px #333;
  font-family: Fondamento;
  font-size: 20px;
  text-shadow: 0px 0px 7px #fff;
}

/* .tab img = image dans les onglets */
#tab-bloc .tab img {
  vertical-align: -3px;
}

/* .contents = conteneur des contenu */
#tab-bloc .contents {
  border: 3px double #aaa;
  padding: 25px;
  font-size: 13px;
  font-family: euphemia;
  text-shadow: 0px 0px 7px #000000;
}


.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #000;
  border: 1px solid #000;
  cursor: pointer;
}


Mon JS:
Code:
$(function(){
  var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide")?"slideUp":a.is(".s_fade")?"fadeOut":"hide"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1]);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".s_slide")?"slideDown":a.is(".s_fade")?"fadeIn":"show"](+((a.attr("class")||"").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/)||["",500])[1])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".s_bottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".s_bottom")?
"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> div.contents",this).append(a);b=$(".content:first,.content.selected",this).last();$(b).addClass("selected").siblings().hide();$(b).data("tab").addClass("selected")}).on("click",".tab",d).filter(".s_hover").on("mouseenter",".tab",d)
});


Dernière édition par dante le Mar 19 Aoû 2014 - 17:58, édité 2 fois
dante

dante
**

Masculin
Messages : 82
Inscrit(e) le : 22/07/2004

https://dreamlandsonge.forumactif.com/
dante a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets rangé aléatoirement

Message par dante Mar 12 Aoû 2014 - 19:11

Je me permet de up le sujet =)
dante

dante
**

Masculin
Messages : 82
Inscrit(e) le : 22/07/2004

https://dreamlandsonge.forumactif.com/
dante a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets rangé aléatoirement

Message par dante Mar 19 Aoû 2014 - 11:39

Up
dante

dante
**

Masculin
Messages : 82
Inscrit(e) le : 22/07/2004

https://dreamlandsonge.forumactif.com/
dante a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets rangé aléatoirement

Message par Ea Mar 19 Aoû 2014 - 13:12

Bonjour,


Étrange.

À un moment le script utilise $(liste).add(nouveau_elements) et pour une raison que je ne connais pas, sur google chrome ça ajoute parfois les nouveaux éléments ailleurs qu'à la fin de la liste.

J'ai modifié un peu le code pour ne pas utiliser le .add() et j'ai mis le code à jour dans le tutoriel :
https://forum.forumactif.com/t310879-tableaux-a-onglets#2713127

En mettant votre code javascript par celui du tutoriel, vous ne devriez plus avoir le problème.

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: Onglets rangé aléatoirement

Message par dante Mar 19 Aoû 2014 - 17:58

Super, les onglets restent à leur place maintenant.

Merci pour le coup de pouce Wink
Problème résolu.
dante

dante
**

Masculin
Messages : 82
Inscrit(e) le : 22/07/2004

https://dreamlandsonge.forumactif.com/
dante 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