Onglets pour catégories et affichage forums côte à côte

Ven 24 Juin - 13:45
Bonjour ! :)

J'ai découvert votre forum il y a peu et je suis époustouflée par la quantité de codes disponibles et surtout par la qualité de votre travail. Qui plus est, vous répondez à chaque demande et tout est en libre service ; je n'ai jamais trouvé un forum aussi complet que le vôtre. Bravo pour votre travail en tout cas !

Bien entendu, j'ai parcouru un certain nombre de sous-forums pour les codages, et je m'intéresse plus particulièrement à l'affichage des catégories. J'ai trouvé un code qui me plaît particulièrement, celui-ci plus précisément :


Je souhaiterai l'utiliser sur mon forum, seulement comme vous pouvez le constater sur cette image :

Mon forum est divisé en 5 onglets. Compte tenu de sa longueur ( Il y a presque 80 sections ), je tiens à conserver les onglets tout en ayant l'affichage que vous proposez.

N'ayant aucune connaissance en codage ( ou très limitée ), j'ai voulu essayer moi-même en tentant naïvement d'ajouter le template supplémentaire à l'actuel mais bien entendu, ça n'a pas marché x) .

Ainsi donc, je souhaitais savoir si ma requête est possible et si vous seriez d'accord pour m'aider. Je vous en serai très reconnaissante. Quoi qu'il en soit prenez votre temps, les commandes sont ouvertes mais si je dois attendre, aucun problème !

Si jamais votre réponse est positive, je vous fournis déjà mes codes :

Template qui me permet l'affichage des catégories :
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>
        <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
              <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
            <!-- <th nowrap="nowrap" width="50">{L_TOPICS}</th>
              <th nowrap="nowrap" width="50">{L_POSTS}</th> -->
              <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
          </tr>
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
              <!-- END inc -->
              <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
                <h{catrow.cathead.LEVEL} class="hierarchy">
                    <span class="cattitle">
                      <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                    </span>
                </h{catrow.cathead.LEVEL}>
              </td>
              <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
          </tr>
          <!-- END cathead -->
          <!-- BEGIN forumrow -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
              <!-- END inc -->
              <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              </td>
              <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                <h{catrow.forumrow.LEVEL} class="hierarchy">
                    <span class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        
                    </span>
                </h{catrow.forumrow.LEVEL}>
                <div class="stats_cate">    {catrow.forumrow.TOPICS} sujets contenant {catrow.forumrow.POSTS} messages  </div>
                <div class="description">{catrow.forumrow.FORUM_DESC}</div>
                <span class="gensmall">
                    <!-- BEGIN switch_moderators_links -->
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                </span>
              </td>
            <!-- <td class="row3" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.TOPICS}</span>
              </td> -->
              <!-- <td class="row2" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.POSTS}</span>
              </td> -->
              <td class="row3 over" align="center" valign="middle" height="50">
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
              </td>
          </tr>
          <!-- END forumrow -->
          <!-- BEGIN catfoot -->
          <tr>
              <!-- BEGIN inc -->
              <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
              <!-- END inc -->
              <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
          </tr>
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
        </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Le CSS associé :
Code:
           /*onglets catégories pas page accueil */
            #cat-onglets {
              margin: 10px auto;
              text-align: center; }
            
            .co-item {
              background: #CBFBD3;
              color: #000000;
              border: 2px solid  #007213;
              display: inline;
              cursor: pointer;
              margin: 0 8px;
              padding: 9px;
              border-radius: 10px;
            }
            
            .co-item:hover{
              background: #D8DBD8;
              border: 1px solid #616161;
              color:#3D3D3D;
              display: inline;
              cursor: pointer;
              margin: 0 7px;
              padding: 8px;
              border-radius: 10px;
            }
            
            .co-actif {
              background: #D8DBD8;
              color: #3D3D3D;
              border:3px solid #616161; }

Et le Javascript :
Code:
   $(function(){
            
              /* variable temporaire */
              var t;
            
              /* liste des onglets avec les catégories en faisant partie */
              var onglets=  [
                                      ["Administration",[0]],
                                      ["Présentations, gestion et quêtes",[1, 2]],
                                      ["Les territoires",[3, 4, 5, 6, 7, 8]],
                                      ["Détente",[9]],
                                      ["Archives",[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= false;
              /* temps pour slider en ms */
              var timeslide= 800;
            
              /* 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));
              });
            
            });

Donc au final j'ai 11 catégories : 1 dans l'onglet " Administration " , 2 dans l'onglet " Présentations, gestion et quêtes " , 6 dans l'onglet " Les territoires " , 1 dans l'onglet " Détente " et 1 dans le dernier onglet " Archives " .

Pour les catégories, c'est votre code n°4 il me semble. Je ne sais pas s'il est nécessaire de les remettre ici puisque vous y avez accès, dites le moi si c'est le cas ^^ . Je préfère ne pas surcharger ce message.

Pour conclure, ce que je souhaite serait à peu près ça ( couleur et taille non respectées, c'est vraiment pour l'exemple ) :


Bien entendu et même si ce n'est pas obligatoire, vous serez crédité sur la page d'accueil. Cela me semble normal.

Je vous remercie de votre lecture.

Bonne journée à vous et merci d'avance pour votre réponse.
Revenir en haut Aller en bas
Ven 24 Juin - 13:50
Désolée il s'agit du template qui me permet l'affichage des onglets pour trier les différentes catégories *
Revenir en haut Aller en bas
Dim 26 Juin - 14:46
Bonjour,

Remplacer l'intégralité du template index_box par :

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>
            <!-- BEGIN catrow --><!-- BEGIN tablehead -->
         <br clear="all" />
              <!-- END tablehead -->
              <!-- BEGIN cathead -->
              <!-- END cathead -->
              <!-- BEGIN forumrow -->
            <div class="cat-table">
<div class="blocFRM"><div class="FRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="boxFRM"><div class="sfFRM">SOUS<br/>FORUMS<div>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div><div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div></div><div class="imgFRM"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div>{catrow.forumrow.TOPICS} S.<br/>{catrow.forumrow.POSTS} R.</div></div></div></div> 
</div>
              <!-- END forumrow -->
              <!-- BEGIN catfoot -->
              <!-- END catfoot -->
              <!-- BEGIN tablefoot -->
            <br clear="all" /><!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* Onglets catégories pas page accueil */
#cat-onglets {
margin:10px auto; text-align:center;
}
.co-item {
color:black;
display: inline; cursor: pointer; margin:0 5px; padding:5px;
}         
.co-item:hover{
color:#3D3D3D;
display: inline; cursor: pointer;
margin:0 5px; padding:5px;
}         
.co-actif {
color: #3D3D3D;
}



/* BLOC FORUMS */
.blocFRM{
margin:auto;
width:790px; padding-left:10px; text-align:center;
}
/* BLOC FORUM */
.FRM {
float:left; margin:10px 15px;
width:360px; height:235px;
}
/* TITRE FORUM */
.tleFRM {
margin:auto;
height:20px; width:85%; padding:3px 3px 3px 0px; border-radius:25px 25px 0 0; overflow:hidden;
background:rgba(250,250,250,0.3); /* MODIFIABLE */
text-transform:uppercase; font-weight:bold; text-align:center;
}
.tleFRM a{
color:white !important; /* MODIFIABLE */
}
/* CONTENEUR SOUS-FORUMS / DERNIER MESSAGE / DESCRIPTION FORUM */
.boxFRM {
height:180px;
background:#ccc; box-shadow:0 0 3px rgba(0,0,0,0.3); /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.sfFRM {
position:absolute; margin-top:15px; margin-left:20px;
height:50px; width:155px; padding:15px 0 0; border-radius:10px;
background:#191919; color:rgba(250,250,250,0.6); /* MODIFIABLE */
font-size:10px;
}
/* CONTENU SOUS-FORUMS */
.sfFRM div{
position:absolute; margin-top:-43px;
width:145px; height:55px; padding:5px; border-radius:10px;
text-align:left; font-size:10px;
background:#191919; /* MODIFIABLE */
opacity:0; transform:scale(0); -webkit-transform:scale(0);
transition:all .65s linear; -webkit-transition:all .65s linear;
}
/* LIEN SOUS-FORUM */
.sfFRM a{
color:white !important; /* MODIFIABLE */
}
.sfFRM:hover div{
opacity:1;
transform:scale(1); -webkit-transform:scale(1);
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
position:absolute; margin-left:185px; margin-top:15px;
width:155px; height:45px; padding:10px 0; border-radius:10px;
text-align:center; font-size:10px;
background:rgba(250,250,250,0.6); box-shadow:inset 0 0 3px rgba(0,0,0,0.3); color:black; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
position:absolute; margin-top:90px; margin-left:25px;
width:305px; height:65px; padding:5px; overflow:auto;
font-size:10px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* ICÔNES FORUM */
.imgFRM{
position:absolute; z-index:2; margin-left:140px; margin-top:-40px;
width:75px; height:75px;
}
.imgFRM img{
border-radius:75px; width:75px; height:75px;
box-shadow:0 0 3px rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* NOMBRE SUJETS ET MESSAGES FORUM */
.imgFRM div {
position:absolute; z-index:3; margin-top:-75px;
border-radius:80px; width:65px; height:43px; padding:22px 5px 10px 5px;
background-color:rgba(250,250,250,0.6); /* MODIFIABLE */
opacity:0; font-size:11px;
}
.imgFRM:hover div{
opacity:1;
}
Revenir en haut Aller en bas
Dim 26 Juin - 16:20
Bonjour :) !

Merci beaucoup de vous être penché sur ma commande, c'est vraiment très gentil :) . J'ai mis les codes sur mon forum test ; c'est vrai que sur mon schéma je n'ai pas fait figurer le cadre et le fond autour des onglets mais je souhaite les laisser, cependant il me suffit d'ajouter le css du début.

Par contre, il y a un bug assez conséquent :/ . Tous les forums n'apparaissent pas, notamment tous les lieux et ils se trouvent dans les mauvais onglets.
Le plus simple est que vous voyiez par vous-même : http://test-ls.forumactif.org/
Par exemple Nouveautés et annonces se trouvent dans le premier normalement ^^ .

Dois-je supprimer le code Javascript ou bien est-ce un problème de template ?

Merci d'avance de votre réponse, bonne fin d'après-midi ! ^^
Revenir en haut Aller en bas
Lun 27 Juin - 13:26
Dans cette partie du code javascript, vous ne devez pas indiquer le nombre de catégories mais le nombre de forums présents dans chaque catégorie car l'onglet remplace la catégorie.
Code:
["Administration",[0]],
                                      ["Présentations, gestion et quêtes",[1, 2]],
                                      ["Les territoires",[3, 4, 5, 6, 7, 8]],
                                      ["Détente",[9]],
                                      ["Archives",[10]]];
Revenir en haut Aller en bas
Mar 28 Juin - 19:41
Bonsoir ^^

Merci pour votre réponse ; effectivement en mettant le numéro du forum à la place cela semble marcher.
Par contre du coup les titres des catégories ne peuvent pas s'afficher, comme sur l'image ?

Bonne soirée
Revenir en haut Aller en bas
Mar 28 Juin - 23:46
Vos interrogations ne concernant plus le libre service du forum, je vous redirige en conséquence vers le forum d’entraide de votre préférence.

Vous souhaitant une agréable soirée.
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum