Afficher plusieurs catégories sous un seul onglet — difficulté à utiliser les tutos disponibles

[Asura Hatake]

Bonjour, bonsoir !

Alors c'est simple et compliqué à la fois : j'ai appliqué un tutorial pour disposer mes catégories en onglet mais je me rends compte maintenant que je préfèrerai toutefois avoir plusieurs catégories sous un seul onglet et non un onglet par catégorie.

J'ai fait des recherches préalables sur le forum et si j'ai trouvé des sujets correspondants à mon problème, je n'ai réussi à appliquer aucune des solutions données.

Est-ce que quelqu'un aurait une idée ?

Par avance je vous remercie.

Voici mon forum test, mon template et mon javascript :

http://gorillesarctiques.forumactif.fr/

Code:

$('document').ready(function()
  {
  if($('.categorie').size() > 1)
    {
      $('#conteneur_onglets').css( 'display' , 'block' );
      $('#conteneur_onglets .onglet').click(function()
      {
        change_categorie( $('.onglet', '#conteneur_onglets').index( this ) )
      });
     
      $('.onglet:eq(0)').click();
}
  });

  function change_categorie( index )
  {
      if( $('.categorie:eq(' + index + ')').size() != 0 )
      {
        $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

       
        $('.categorie').css( 'display' , 'none' );
        $('.categorie:eq(' + index + ')').fadeIn( 500 );
       
        $('.onglet.actif').removeClass('actif');
        $('.onglet:eq('+ index +')').addClass('actif');
      }
      else alert('Vous ne pouvez pas accéder à cette catégorie');
  }

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<div id="conteneur_onglets">
<table><tr>
   <td class="onglet"><div>Prologue</div></td>
   <td class="onglet"><div>Wammy's House</div></td>
   <td class="onglet"><div>Wammy's Agency</div></td>
   <td class="onglet"><div>Compléments</div></td>
</tr></table>
</div>
<div id="conteneur_categories">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<div class="categorie">

   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
 
  <div class="forum">
   
<table><tr>
  <td><center><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></center>
                  <div class="stats_last"><div class="stats"><span class="gensmall">{catrow.forumrow.POSTS} message(s) ♔ {catrow.forumrow.TOPICS} sujet(s)</span></div>
                    <div class="last"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></div></td>
  <td style="vertical-align: top;"><span class="forumlink">
               <br />
            </span>
    <span class="description">{catrow.forumrow.FORUM_DESC}</span>
 </td>
 
</tr></table>
   
    <span class="sous_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
   
  </div>

   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
 
  </div>
 
<!-- END tablefoot --><!-- END catrow -->

[SoraNoHime]

Bonjour

ce sujet vous aiderai-il ? https://forum.forumactif.com/t323433-plusieurs-categories-dans-un-onglet-mise-en-forme#2806664

Il marche très bien chez moi, et permet de regrouper plusieurs catégories sous un onglet.

Cordialement.

[Asura Hatake]

Bonjour !

Merci d'avoir répondu. 8D

J'ai vu ce sujet et je dois avouer que je ne sais pas trop comment m'y prendre : mon code javascript n'est pas le même du tout. Je le remplace ? Et mon template peut rester tel quel ?

[SoraNoHime]

En gros, ce code permet de faire fonctionner les onglets uiquement grace à un javascrit sans meme avoir à changer le template. Par conséquent il vous faut remettre le template en enlevant les mention des onglets que vous aviez avant, et mettre le javascript de Ea avec les mentions des onglets.

Y arriverez-vous ? Sinon je peux également vous offrir mon aide sur ces points.

[Asura Hatake]

Ohh j'avais rien compris, pardon. J'essaie et je vous dit ça, merci !

[Asura Hatake]

Alors j'ai essayé en supprimant ce qui était relatif à mes onglets actuels dans le templates, en remplaçant le code et en ajoutant donc le css adapté, mais rien n'y fait.

Aucun onglet, ça s'affiche à la suite, comme si de rien n'était.

Enfin j'ai une question stupide mais je dois donner des noms aux

Code:

  var onglets=  [
                                  ["Tout",[0,1,2,3,4]],
                                  ["Onglets 1",[0,1]],
                                  ["Onglets 2,0",[1]],
                                  ["Onglets trois",[2,4]],
                                  ["Onglets vier",[3]]
                                ];

?

[SoraNoHime]

Exactement, c'est aussi ici que vous pouvez regrouper vos catégories sous un seul onglets ^^

[Asura Hatake]

EDIT : Ah non attendez je fais des conneries. >_< je vous tiens au courant.

Ah non ça ne marche toujours pas chez moi. Est-ce que j'ai fait une erreur dans le code ?

Code:

$(function(){
       
          /* variable temporaire */
          var t;
       
          /* liste des onglets avec les catégories en faisant partient */
          var onglets=  [
                                  ["prologue",[1,2]],
                                  ["wammy's house",[3,4,5,6,7,8]],
                                  ["wammy's agency",[9]],
                                  ["complément",[10]],
                                 
                                ];
       
          /* fonction pour sélectionner un onglet d'après une string s */
          var getOnglet= function(s) {
              var j;
              for(j=0;j<onglets.length;j++)
                if(JSON.stringify(onglets[j])==s) return onglets[j];
              return !1;
          }
       
          /* fonction pour voir si un index de catégorie i est dans un onglet d */
          var inOnglets= function(d,i) {
              var j;
              for(j=0;j<d[1].length;j++)
                if(d[1][j]==i) return !0;
              return !1;
          }
       
          /* onglet sélectionné par défaut */
          var songlet= onglets[0];
          /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
          var save= true;
          /* temps pour slider en ms */
          var timeslide= 500;
       
          /* récupération de l'onglet sauvé d'une autre fois */
          if(save && window.localStorage)
              if(t=localStorage.getItem("onglets"))
                if(t=getOnglet(t))
                    songlet= t;
         
          /* entoure les catégories d'un <div class="cat-table" /> */
          $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');
       
          /* affichage de l'onglet en cours */
          $(".cat-table").filter(function(index) {
            return !inOnglets(songlet,index);
          }).hide();
       
          /* ajout du div des onglets */
          $(".cat-table:first").before('<div id="cat-onglets"></div>');
       
          /* ajout des onglets dans le div */
          for(t=0;t<onglets.length;t++)
          {
              $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
          }
       
          /* clic sur un onglet */
          $("#cat-onglets .co-item").click(function(){
              $("#cat-onglets .co-actif").removeClass("co-actif");
              $(this).addClass("co-actif");
              var o= onglets[$("#cat-onglets .co-item").index(this)];
              $(".cat-table").not($(".cat-table").filter(function(index) {
                return inOnglets(o,index);
              }).slideDown(timeslide)).slideUp(timeslide);     
              if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
          });
       
        });

[SoraNoHime]

DOnnez-moi également votre template index_box, que je vérifie qu'il y ait tous les éléments permettant de faire fonctionner le script

[Asura Hatake]

Le voici :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>


<div id="conteneur_categories">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
 <div class="secondarytitle">{catrow.tablehead.L_FORUM}</div>
<div class="categorie">

   <!-- END tablehead -->
   <!-- BEGIN cathead -->
          
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
 
  <div class="forum">   
   
<table><tr>
  <td><center>
             

    <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></center>
                  <div class="stats_last"><div class="stats"><span class="gensmall">{catrow.forumrow.POSTS} message(s) ♔ {catrow.forumrow.TOPICS} sujet(s)</span></div>
                    <div class="last"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></div></td>
  <td style="vertical-align: top;">
               <br />
    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>   
    <span class="description">{catrow.forumrow.FORUM_DESC}</span>
 </td>
 
</tr></table>

    <span class="sous_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
   
  </div>

   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
 
  </div>
 
<!-- END tablefoot --><!-- END catrow -->

[Asura Hatake]

Up. Merci encore !

[Asura Hatake]

Up. :3

[SoraNoHime]

Désolé pour le temps mis... Cela vient du fait que votre forum a subit de gros changement et que les titres des catégories qui font donc fonctionner le script sont désormais en div plutot qu'en tableau :

Code:

  <div id="conteneur_categories">
        <!-- BEGIN catrow --><!-- BEGIN tablehead -->
        <div class="secondarytitle">{catrow.tablehead.L_FORUM}</div>
        <div class="categorie">
       
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
                 
          <!-- END cathead -->
          <!-- BEGIN forumrow -->
       
          <div class="forum"> 

Il faudrait reprendre en fait le template par défaut et lui rendre l'apparence voulu, ainsi les codes s'afficheraient...

Comme toujours si vous avez un soucis à le réaliser, n'hésitez pas à m'en faire par. Vérifier également que votre script est bien mis sur l'acceuil, que le javascript est activé, et que la structure de votre forum est sur Moyen : séparé les catégories de l'index.

Cordialement.

[Asura Hatake]

Merci pour cette réponse !

Toutefois ne serait-il pas possible de simplement remettre les div concernés en table, directement ? Ou alors je risque vraiment de m'y perde selon vous ?

[SoraNoHime]

Je vais tenter de le faire de mon coté, mais cela peut me prendre du temps. N'hésitez pas à upper une fois par 24h si besoin.

[Asura Hatake]

Oh c'est super gentil de votre part ! Merci infiniment. De mon côté j'ai aussi essayé mais... hm. Non, quoi, j'ai du foirer quelque part.

En tout cas encore merci, et oui je upperai alors.

[Asura Hatake]

Upouille.

[Asura Hatake]

Upouille.

[Asura Hatake]

Up. :3

[Asura Hatake]

Up. 8D

[Asura Hatake]

Up.

[Asura Hatake]

Up.

[Asura Hatake]

Up.

[Asura Hatake]

Up. J'aurais vraiment besoin d'aide, même si elle ne vient pas de SoraNoHime. En tout cas merci pour l'aide apportée jusqu'à maintenant.

[Asura Hatake]

Up.

[Asura Hatake]

Up.

[Asura Hatake]

Up.

[Ea]

Bonjour,


Où en est votre problème ?

Cordialement.

[Asura Hatake]

Bonjour !

Et bien régulièrement je tente de le régler de moi-même mais je dois avouer que reprendre tout mon template me semble presque impossible compte tenu de certaines limites de temps (délais qui commence vraiment à me faire peur).

Concrètement j'aurais besoin d'aide pour adapter soit le javascript donné par Hime à mon template, soit le contraire.

[Ea]

Déjà il me semble que la dernière version est plutôt ici.

Par rapport au template modifié mis dans ce post, j'imagine que dans le code :
http://s301826463.onlinehome.fr/fdf/viewtopic.php?pid=73#p73

il faudrait modifier :

• le :
  
  

  Code:

  w=["th.secondarytitle","div.table-title h2","div.page-title h2","div.maintitle h2"]

  par :
  
  

  Code:

  w=["div.secondarytitle","div.table-title h2","div.page-title h2","div.maintitle h2"]

• le :
  
  

  Code:

  x=["table","div.forabg","div.main-head","div.borderwrap"]

  par :
  
  

  Code:

  x=["div","div.forabg","div.main-head","div.borderwrap"]

• le :
  
  

  Code:

  y=["nil","nil","div.main-content","nil"]

  par :
  
  

  Code:

  y=["div.categorie","nil","div.main-content","nil"]

et à moins que je me trompe, ça devrait suffire.

En fait la première valeur de ces tableaux qu'on modifie, est la valeur utilisée pour phpbb2 ( et ces modifications mettent les valeurs qu'il faut pour votre template modifiée ).

Cordialement.