Catégories en onglet : afficher plusieurs catégories/onglet dans le 1er onglet

[Moyashi-chan]

Bonjour,

Je viens frapper à votre porte, espérant trouver un peu d'aide pour un problème qui est en train de me rendre chèvre (et donc accessoirement dangereux à la survie de mon pc) et pour lequel mon réservoir d'idée et de patience pour tenter le résoudre par moi-même, est à sec.

Commençons déjà par quelques infos pratiques :
Le forum est en version phpBB2, et pour classer les catégories en onglets, j'ai donc modifier le template index-box.

Ensuite, mon problème :
Comme vous devez vous en douter, mon problème concerne l'affichage des catégories en onglet. En effet, j'ai en tête un projet de forum et ayant une idée de sa structure, j'ai pensé que la classification des catégories en onglets serait une bonne solution pour alléger celle-ci. Sauf que rapidement, un autre problème s'est rapidement imposé à moi : les catégories en onglet c'est bien, mais il y a un hic : 1 onglet = 1 catégorie. Hors, moi j'avais dans l'idée pour un ou deux onglets, qu'il y aie plusieurs catégories dans un même onglet.
Sur ce, j'ai fait quelque recherche pour voir si c'était possible et, ô miracle, j'ai trouver ici même un vieux topic traitant de la même question. Il s'agit de ce topic-ci. Je l'ai lu et j'ai suivit pas à pas les étapes qui y étaient décrites pour modifier mon code de base et ainsi l'adapter de manière à pouvoir mettre plusieurs catégories dans un même onglet. Je valide et publie ensuite le tout. Jusque-là, tout baigne...
C'est après que ça se complique : en effet, quand je retourne sur l'index de mon forum, j'ai la mauvaise surprise de voir que rien n'a changé. C'est à dire que dans l'onglet 1, il n'y avais que la catégorie 1 au lieu des catégories 1 et 2 comme je l'avais spécifié dans le code. Je retourne dans mon template histoire de voir si je n'ai pas fait une erreur quelque part, mais ne trouve rien. Je retourne sur l'index du forum, clique sur un des autre onglet au hasard, puis retourne sur l'onglet 1 et là, ô surprise, les catégories 1 et 2 sont là. Pour m'assurer que c'est finalement bon, je clique sur le logo du forum pour faire un retour à l'index (pour actualiser en fait) et là, de nouveau, la catégorie 2 n'est plus dans l'onglet 1. Il n'y a que la catégorie 1... Je reclique sur l'onglet 1 et la catégorie 2 réapparait...
Dépité après quelques autres essais, force est de constater que la catégorie 2 n'apparait que quand on clique sur l'onglet 1 auquel elle appartient, et non automatiquement comme elle le devrait (comme la catégorie 1 en somme)... ou plutôt comme je le voudrais. Sur ce, je repart dans mon template bidouiller sans succès pendant des heures pour tenter de remédier à ça et me voilà...

En résumé :
Le code trouvé pour mettre plusieurs catégories par onglet marche, mais pas vraiment comme je le voudrais.
Si dans mon onglet 1, je mets la catégorie 1 et la catégorie 2, quand on ouvre la page du forum ou tout simplement que retourne sur l'index, seul la catégorie 1 s'affiche. La catégorie 2 ne s'affiche elle que si on clique sur l'onglet 1. Elle est donc en quelque sorte invisible, puisqu'à moins qu'on ne sache qu'elle est là et qu'il faut cliquer sur l'onglet pour la faire apparaitre, on ne la voit pas. Et comme vous devez vous en doutez, ce n'est pas vraiment le but de la manœuvre et c'est même carrément embêtant (d'autant plus que l'on met généralement les trucs important en tête du forum).
Quand on tente la même manip' dans les autres onglets, il n'y a pas de problème.
Donc en fait, je pense qu'il doit s'agir d'un problème de "display" automatique. L'onglet 1 étant celui dont on voit le contenu quand on ouvre la page du forum, l'ensemble de son contenu devrait être affiché (ici ce devrait donc être les catégories 1 et 2), mais n'en affiche qu'une partie, celle qui lui est attribué par défaut (soit la catégorie 1).

Ce que je souhaiterais donc faire, c'est trouver une solution qui permettrait d'afficher d'emblée l'ensemble du contenu de cet onglet (catégorie 1 + 2) sans que l'on aie à cliquer pour pouvoir en voir la totalité, puisque bon, avouez que ce n'est pas vraiment pratique, d'autant plus que personne n'aura l'idée de cliquer d'emblée sur cet onglet 1 pour découvrir le reste de son contenu.
Autrement dit, quand on est sur l'index du forum (sans avoir cliquer sur onglet 1 au préalable), que l'on voit ceci : https://2img.net/h/oi56.tinypic.com/fzbzhf.png
et non pas ceci : https://2img.net/h/oi53.tinypic.com/2yn5tsy.jpg

Voici le code de mon template index-box :

Code:

    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <span class="gensmall">{LAST_VISIT_DATE}

    {CURRENT_TIME}

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

    <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

    <!-- END switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
    </td>
    </tr>
    </table>

    <!-- DEBUT MODIF ONGLETS -->

<div align="center">
<div class="onglet">
<span onClick="change_cat('0-1');" class="onglet_actif" id="cat_0-1">Onglet 1 </span>
<span onClick="change_cat(1);" class="onglet_nactif" id="cat_1">Onglet 2 </span>
<span onClick="change_cat(2);" class="onglet_nactif" id="cat_2">Onglet 3 </span>
<span onClick="change_cat(3);" class="onglet_nactif" id="cat_3">Onglet 4 </span>
<span onClick="change_cat(4);" class="onglet_nactif" id="cat_4">Onglet 5 </span>
<span onClick="change_cat(5);" class="onglet_nactif" id="cat_5">Onglet 6</span>
</div>
</div>

    <script type="text/javascript">
    <!--

    var i = 0;

    var compteur_cat = 0;

    var anc_cat = 0;

    var nom_cat = new Array('0','1','2','3','4',"5");

   
function change_cat(num)
{
  var nums= (num+'').split('-');
  $('.cat_forum').hide();
  $('div.onglet span').removeClass('onglet_actif').addClass('onglet_nactif');
  $('div.onglet span#cat_'+num).removeClass('onglet_nactif').addClass('onglet_actif');
  for(i=0; i<nums.length; i++) $('#'+nom_cat[nums[i]]).show();
}

    function capture_cat()
    {
    if(nom_cat[compteur_cat] == nom_cat[0])
    {document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '">');
    }
    else{
    document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
    }
    compteur_cat++;
    }

    //-->
    </script>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <script type="text/javascript">
    <!--
    capture_cat();
    //-->
    </script> 

    <!-- FIN MODIF ONGLETS -->

    <tr>
    <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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}>
    <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
    <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>
    <!-- BEGIN forum_link_no -->

    <!-- END forum_link_no -->
    <!-- BEGIN forum_link -->
    <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
    <!-- END forum_link -->
    </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 -->
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Merci d'avance pour les réponses l'aide que vous pourrez m'apporter.

[Ayael]

Je viens de penser à un truc tout bête... Pour passé d'un onglet à un autre il faut juste passez la souris dessus, ou cliquer sur l'onglet^^"?

[Moyashi-chan]

Coucou,

Oui, mais la le problème c'est que ça se passe sur le premier onglet...
Comment t'expliquer ça clairement... En fait, quand tu as une organisation en onglet (que se soit les catégories de ton forum ou sur ta PA), et quand on va sur le forum (on est donc sur son index), ce qui est affiché, ce qu'on voit (toi, moi, les visiteurs), c'est le contenu du premier onglet. La totalité du contenu du premier.
Hors là, ce n'est pas le cas. J'ai modifié le code de mon template de manière à pouvoir mettre dans un onglet plusieurs catégories et non plus qu'une seule et unique comme dans la configuration par défaut du code. Et donc, dans mon premier onglet, il y a la catégorie 1 ET la catégorie 2, sauf que quand on arrive sur le forum, seule la catégorie 1 est affichée, alors que dans la théorie de la chose, les deux catégories devraient être visibles. On ne peut voir la catégorie 2 QUE quand on clique sur l'onglet 1.
Sauf que ça, bah, c'est pas vraiment ce que je veux, puisque par exemple si toi tu débarque sur mon forum pour la première fois et que tu le connais pas du tout, à moins d'un grand hasard (en naviguant dans les autre onglets et en revenant à l'onglet 1 par exemple), tu n'auras jamais l'idée d'aller cliquer sur cet onglet 1 pour afficher son contenu, puisque ce-dit contenu est censé être affiché en ENTIER (donc catégorie 1 + catégorie 2) dès le départ...

Je sais pas si j'ai été claire, mais j'ai essayé x3 Et puis plus simplement, il te suffit d'aller voir sur mon forum de test pour comprendre :

[Ayael]

J'ai aussi un système d'onglet mais je n'ai jamais réussis à mettre plusieurs catégorie dans le même onglet, par contre j'ai trouvé une astuce^^"
Dans le titre du premier forum de chaque catégorie je met

Code:

titre de la catégorie<br>
Titre du forum

C'est tout simple mais le résultat visuel est le même, donc au pire des cas tu peux te rapatrier sur cette méthode, je te souhaites néanmoins bon courage et de trouver la réponse à tes questions

[tupac]

Bonjour

Il me semble que ce code na pas été conçu pour pouvoir placé plusieurs catégories par onglet par contre je sais qu'il en existe un autre sur Forumactif qui lui est fiable mais je n'arrive pas a remettre la main dessus peut-être a t-il été supprimé.

Cordialement

[Moyashi-chan]

Bonjour,

Merci Ayael pour l'astuce, mais ce n'est pas vraiment ce que je recherche. S'il n'y a pas de solution à mon problème, je préfère encore arranger ma structure autrement.

Ensuite, tupac, si, ce code permet de mettre plusieurs catégories par onglet. Plus précisément, il s'agit de cette partie du code :

Code:

function change_cat(num)
{
  var nums= (num+'').split('-');
  $('.cat_forum').hide();
  $('div.onglet span').removeClass('onglet_actif').addClass('onglet_nactif');
  $('div.onglet span#cat_'+num).removeClass('onglet_nactif').addClass('onglet_actif');
  for(i=0; i<nums.length; i++) $('#'+nom_cat[nums[i]]).show();
}

A proprement parler, le code fonctionne très bien, on peut mettre plusieurs catégories dans un onglet et dans les autres onglets je n'ai aucun problème (bon en même temps il faut de toute façon cliquer dessus pour afficher le contenu donc bon...). Il y a juste avec l'onglet 1 qu'il y a un problème d'affichage. La catégorie 2 est bien dans l'onglet 1, mais le problème c'est qu'elle ne s'affiche pas automatiquement avec la catégorie 1. Il faut cliquer sur le titre de l'onglet pour qu'elle apparaisse et comme je l'ai dit à Ayael plus haut, c'est plutôt embêtant parce qu'à moins de savoir qu'il faut cliquer sur l'onglet pour faire apparaitre cette catégorie "masquée", personne n'aura l'idée de le faire.

Donc en gros, tout ce que j'aimerais savoir, c'est tout simplement si, il y a moyen d'apporter solution à ce problème en modifiant le code de quelle manière que ce soit (j'ai déjà essayé par moi-même mais sans résultat) ou si, au contraire, le code est ainsi et on ne peut pas rectifier ce défaut d'affichage et qu'il faut donc choisir entre laisser comme c'est ou s'arranger autrement et modifier sa structure.

[Moyashi-chan]

Bonjour,

Désolée du double-post, mais je viens aux nouvelles pour savoir si personne ne peux m'aider ou me dire si au contraire c'est impossible.

Merci d'avance.

[Invité]

Bonjour, Où en-est votre problème ? Deux solutions : Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message, Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté, A bientôt sur ForumActif

[Moyashi-chan]

Bonjour,

Mon problème est toujours d'actualité et j'espère toujours trouver une bonne âme qui puisse m'aider

Merci d'avance~

[Ea]

Bonjour,


Ce qui cache les catégories sauf la première à moins que je me trompe c'est :

Code:

function capture_cat() {
  if(nom_cat[compteur_cat] == nom_cat[0]) {
    document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '">')
  }else {
    document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">')
  }
  compteur_cat++
};

nom_cat c'est un tableau :

Code:

var nom_cat = new Array('0','1','2','3','4',"5");

Donc là si la catégorie est la première ( on commence à compter à partir de 0 ) on l'affiche sinon non ( par le style="display:none;" ).

Il suffit de changer la fonction en :

Code:

function capture_cat() {
  if(compteur_cat==0 || compteur_cat==1) {
    document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '">')
  }else {
    document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">')
  }
  compteur_cat++
};

Pour avoir les 2 premières catégories visibles au départ.

Sinon j'avais moi-même fait un code qui me semble était mieux que ça ( pas de document.write de balise non fermée et pas besoin d'éditer une template à ce point ), mais il n'y a pas de "support" pour "plusieurs" catégories par onglet.

[Moyashi-chan]

Bonjour,

Tout d'abord, merci beaucoup de ton aide. Les deux premières catégories s'affichent correctement dans le premier onglet à présent, grâce à tes modifications.
Je te dis encore une fois un grand merci (ainsi qu'aux autres qui se sont également penchés sur mon problème) pour m'avoir aidé un résoudre mon problème.

Le problème étant résolu, ce sujet peut être classé à présent.