Catégories en onglet ModernBB impossible ?

[clost]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 09/04/2017
Lien du forum : http://www.zone-motards.net/forum

Description du problème

Bonjour
j'ai tenté d'installé ce JS +CSS dans cette version ModernBB via ce lien cliquez
je remarque que c'est possible comme sur le site de @stra ici

Code:

$(function() {
   var cpt = 0;
   /* Affichage par défaut de la première catégorie, on cache les autre */
   $('.forabg').each(function() {
      if (cpt!=0) {
         $(this).hide().addClass('cache');
      } else {
         $(this).addClass('visible');
      }
      $(this).addClass('cat'+(cpt++));
   }
   );
   /* Génération des onglets au dessus des catégories */
   cpt = 0;
   $('.linklist').eq(1).after('<div id="nav_cat"><ul id="nav_cat_onglets"></ul></div>');
   /* Création et ajout d'un onglet pour chaque catégorie */
   $('.table-title').each(function() {
      var onglets_nom_cat = $(this).text();
      if(cpt==0) {
         $('#nav_cat_onglets').append('<li class="li_nav_onglet actif" name="'+(cpt++)+'">'+onglets_nom_cat+'</li>');
      } else {
         $('#nav_cat_onglets').append('<li class="li_nav_onglet" name="'+(cpt++)+'">'+onglets_nom_cat+'</li>');
      }
   }
   );
   /* Gestion des actions au click sur chaque onglet */
   $('.li_nav_onglet').click(function() {
      /* Nombre de catégories visibles pour le membre */
      var nb_cat = $('.table-title').length;
      /* Numéro de la catégorie à afficher */
      var num_cat = $(this).attr('name');
      /* On ajoute la classe "actif" à l'onglet courant */
      $(this).addClass('actif');
      /* On affiche la catégorie correspondant à l'onglet cliqué */
      if(($('.cat'+(num_cat)).hasClass('cache'))) {
         $('.cat'+(num_cat)).show('slow').addClass('visible').removeClass('cache');
         /* On cache les autres catégories */
         for (i = 0; i <= nb_cat; i++) {
            if (i != num_cat) {
               $('.cat'+(i)).hide('slow').addClass('cache').removeClass('visible');
               $('.li_nav_onglet[name='+i+']').removeClass('actif');
            }
         }
      } else {
         /* Actions à effectuer au click sur la catégorie déjà affichée */
      }
   }
   );
}
);

CSS

Code:

/* Propriétés générales des onglets */
#nav_cat li {
   position:relative;
   float:left;
   list-style:none;
   padding:2px 5px 7px;
   margin-right:5px;
   border:1px solid #1175AE; /* épaisseur et couleur de la bordure */
   cursor:pointer; /* type du pointeur */
   background-color:#EEEEEE; /* couleur de fond des onglets */
   color:#0D5995; /* couleur du texte */
   z-index:1;
}
/* Propriétés spécifiques de l onglet actif */
#nav_cat_onglets .actif {
   border-bottom:none; /* supprime la bordure du bas */
   font-weight:bold; /* mets le texte en gras */
   z-index: 10;
}

mais l'affichage met des onglets en dessous le la 1ère catégorie choisie et me déforme le widget de bas de forum "qui est en ligne"
Y aurait il une adaptation à faire, si quelqu'un peut m'aider, merci par avance
(je rappelle qu'on ne peut toucher au templates, dont l'index box via Modern BB, ex ce lien : ici )

[Invité]

Hello clost,
modifies le script ainsi:

Code:


$(function() {
      var cpt = 0;
      /* Affichage par défaut de la première catégorie, on cache les autre */
      $('.forabg').each(function() {
          if (cpt!=0) {
            $(this).hide().addClass('cache');
          } else {
            $(this).addClass('visible');
          }
          $(this).addClass('cat'+(cpt++));
      }
      );
      /* Génération des onglets au dessus des catégories */
      cpt = 0;
      $('.linklist.top').after('<div id="nav_cat"><ul id="nav_cat_onglets"></ul></div>');
      /* Création et ajout d'un onglet pour chaque catégorie */
      $('.table-title').each(function() {
          var onglets_nom_cat = $(this).text();
          if(cpt==0) {
            $('#nav_cat_onglets').append('<li class="li_nav_onglet actif" name="'+(cpt++)+'">'+onglets_nom_cat+'</li>');
          } else {
            $('#nav_cat_onglets').append('<li class="li_nav_onglet" name="'+(cpt++)+'">'+onglets_nom_cat+'</li>');
          }
      }
      );
      /* Gestion des actions au click sur chaque onglet */
      $('.li_nav_onglet').click(function() {
          /* Nombre de catégories visibles pour le membre */
          var nb_cat = $('.table-title').length;
          /* Numéro de la catégorie à afficher */
          var num_cat = $(this).attr('name');
          /* On ajoute la classe "actif" à l'onglet courant */
          $(this).addClass('actif');
          /* On affiche la catégorie correspondant à l'onglet cliqué */
          if(($('.cat'+(num_cat)).hasClass('cache'))) {
            $('.cat'+(num_cat)).show('slow').addClass('visible').removeClass('cache');
            /* On cache les autres catégories */
            for (i = 0; i <= nb_cat; i++) {
                if (i != num_cat) {
                  $('.cat'+(i)).hide('slow').addClass('cache').removeClass('visible');
                  $('.li_nav_onglet[name='+i+']').removeClass('actif');
                }
            }
          } else {
            /* Actions à effectuer au click sur la catégorie déjà affichée */
          }
      }
      );
    }
    );


a++

[clost]

comme d'habitude #Milouze14, trés réactif et efficace, un grand merci