Code catégories en onglets ne fonctionne pas

[iwahoiwl]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :  

Description du problème

Bonjour à tous !

Tout d'abord merci à ceux qui me viendront en aide !!
Voici donc mon problème. Pour une meilleure lisibilité et ne pas se retrouver avec un forum beaucoup trop long, j'ai décidé de découper celui-ci en deux onglets avec plusieurs catégories dans chaque onglets. J'ai donc repris un code que j'ai trouvé ici même en faisant plusieurs recherches, malheureusement rien ne se passe pourtant j'ai l'impression de tout faire correctement. Le code est le suivant;

(posté dans la gestion des codes Javascript avec l'index de cochée)

Code:

$(function(){
 
  /* variable temporaire */
  var t;
 
  /* liste des onglets avec les catégories en faisant partie */
  var onglets=  [
                          ["première catégorie",[0]],
                          ["2eme catégorie",[1]],
                          ["3eme catégorie",[2]],
                          ["Tout le forum",[0, 1, 2, 3]]];
 
  /* 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));
  });
 
});

et le css que je n'ai pas encore pris le temps de modifier puisque le code ne fonctionne pas

Code:

/*onglets catégories*/
#cat-onglets {
  margin: 5px auto;
  text-align: center; }
 
.co-item {
  background: #000;
  color: #fdf;
  border: 1px solid  #fdf;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-item:hover{
  background: #fff;
  border: 1px solid #fff;
  color:#000;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 10px;
}
 
.co-actif {
  background: #fdf;
  color: #000;
  border:1px solid #000; }

Le code est donc censé marcher sans l'utilisation de la template index_box (dans cette template j'ai seulement glissé le div id pour afficher le nom des onglets). Mais rien ne se passe. Les catégories restent telles qu'elles le sont déjà et aucun onglet ne se forme.

[Neptunia]

Bonjour, et bienvenue sur le Forum des Forums Forumactif

Le code est donc censé marcher sans l'utilisation de la template index_box (dans cette template j'ai seulement glissé le div id pour afficher le nom des onglets). Mais rien ne se passe. Les catégories restent telles qu'elles le sont déjà et aucun onglet ne se forme.

Nul besoin d'éditer l'index_box.

Le script se charge déjà de créer la div et de nommer les onglets.

Ensuite poster le code sans poster l'adresse du forum concerné, ça ne sert à rien puisqu'on ne peut rien vérifier.

En tout cas le script fonctionne parfaitement, il est toujours installé sur 3 de mes fora test (phpBB2, phpBB3 et Invision)

[iwahoiwl]

Merci bien et surtout merci de ta réponse !

Voici donc l'adresse du forum (qui est encore en construction):

Du coup comme vous pouvez le voir, malgré le fait que j'ai installé le script, les boutons s'affichent pourtant les catégories restent inchangées et ne se séparent pas dans les deux onglets.

[Neptunia]

Vous dites avoir juste glissé le div dans le template, mais ce dernier est un codage de crushcrushcrush qui n'a plus rien à voir avec le template de base, voilà pourquoi le script ne fonctionne pas.

Il vous faut d'abord dans le template mettre un conteneur commun à ces deux éléments

- <div class="tleCAT">
- <div id="blocFRM"> -> Signalons au passage que l'utilisation d'un id à cet endroit est une énorme erreur. Un id se doit d'être unique sur une même page.

Ensuite il suffira de modifier cette ligne du script pour lui faire refléter la structure actuelle du template.

Code:

 /* entoure les catégories d'un <div class="cat-table" /> */
  $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');

[iwahoiwl]

Ah oui j'aurais dû préciser que le template était effectivement modifié, j'y ai pas pensé.

Quand vous me dites qu'il faut qu'il faut mettre un conteneur commun aux deux éléments que vous me passez (j'ai d'ailleurs changé le div id du blocFRM), que voulez-vous dire ? Excusez-moi peut être que je suis un peu long ^^' mais je ne vois pas bien là où vous venez en venir du coup.

[Neptunia]

Sur un forum phpBB2 classique chaque catégorie dispose de sa propre table. Table qui inclut tout ce qu'il faut (entête de catégorie, titre, description, sous-fora ...)

Hors sur la structure que vous avez retenu il y a le titre de la catégorie dans un bloc (une div) et chaque sous-forum a son autre bloc entièrement indépendant du titre de la catégorie.

Sur du phpBB2 classque
- table
L_ entête
L_ titre et description de catégorie
L_ Titre et description de tous les sous-fora
L_ Pied de catégorie

Tout est rattaché à un élément parent unique et le script peut empaqueter l'ensemble depuis l'un des éléments contenus (th.secondarytitle)

Sur la structure venant de crushcrushcrush

- Titre catégorie
- Bloc sous-fora 1
- Bloc sous-fora 2
- Bloc sous-fora 3

Tous les éléments sont au même niveau et il est impossible depuis le titre de catégorie de savoir quels sous-fofo appartiennent à cette catégorie.

En gros autour de vos deux div il vous en faudrait une troisième. Ceci dit si je parle de conteneur, c'est parce qu'il vous faut quelque chose, pas nécessairement une div

[iwahoiwl]

D'accord je vois, merci des explications.

Donc si j'ai bien compris, je mets une div class ou (un tableau) autour de <div class="tleCAT"> et <div class="blocFRM"> le script devrait fonctionner puisque le titre de catégorie et le reste sera rattaché à un élément (la div ou le tableau) ? Ensuite, je dois modifier la ligne suivante de quelle manière ?:

Code:

/* entoure les catégories d'un <div class="cat-table" /> */
  $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');

Merci de prendre du temps pour moi vraiment !!

edit: effectivement je viens donc de créer un conteneur autour et ça fonctionne ! Néanmoins maintenant, quand je passe du premier onglet au deuxième onglet, certains forums des catégories du premier onglet se retrouvent aussi sur le deuxième onglet...

[Neptunia]

Néanmoins maintenant, quand je passe du premier onglet au deuxième onglet, certains forums des catégories du premier onglet se retrouvent aussi sur le deuxième onglet...

En tant qu'invitée je n'ai pas ce problème

Premier onglet = Préface + Héros + Combat
Second onglet = Epilogue + Hophop

L'appartenance de chaque catégorie à un ou plusieurs onglets se définit au début du script.

Bien relire les instructions là où vous avez trouvé le script.

[iwahoiwl]

Alors effectivement, j'avais mal utilisé le conteneur. Tout fonctionne à merveille désormais, un grand merci à toi Neptunia !!

Le problème est donc résolu !