Masquer les onglets pour les sous-forums

[Fushi]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://animalcrossing-test.forumactif.com/

Description du problème

Bonjour,

J'ai décidé d'utiliser des onglets pour mes catégories en suivant ce tutoriel : http://www.never-utopia.com/t26304-affichage-des-categories-grace-a-un-jeu-d-onglets-maj-01-07-15

Les onglets marchent très bien pour les catégories et forums. Par contre, j'ai un problème quand je clique sur un sous-forum.
Par exemple, sur mon forum, dans "Let's Play", quand je clique sur "AC Happy Home Designer", les onglets sont toujours présents au-dessus (mais ne fonctionnent pas par ailleurs).

J'aimerais donc, soit les masquer lorsqu'on se trouve dans un sous-forum ou alors les laisser mais faire en sorte qu'ils fonctionnent.

Si besoin, voici mon template index_box :

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_ongletsvo"><table><tr><td class="ongletvo"><div>Coeur du village</div></td><td class="ongletvo">Let's Play</div></td><td class="ongletvo">Perchoir</div></td></tr></table></div><div id="conteneur_categoriesvo"><!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="categorievo"><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><br />
            </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>
      <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">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

         <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" /></div><!-- END tablefoot --><!-- END catrow --></div>

Et le script pour les onglets :

Code:

$('document').ready(function()
 {
  if($('.categorievo').size() > 1)
    {
      $('#conteneur_ongletsvo').css( 'display' , 'block' );
      $('#conteneur_ongletsvo .ongletvo').click(function(){
      change_categorie( $('.ongletvo', '#conteneur_ongletsvo').index( this ) )
 });
 
  $('.ongletvo:eq(0)').click();}
  });
 
  function change_categorie( index )
  {
    if( $('.categorievo:eq(' + index + ')').size() != 0 ){
   
      $('.categorievo').css( 'display' , 'none' );
      $('.categorievo:eq(' + index + ')').fadeIn( 500 );
     
      $('.ongletvo.actif').removeClass('actif');
      $('.ongletvo:eq('+ index +')').addClass('actif');
    }
    else alert('Vous ne pouvez pas accéder à cette catégorie');
  }

J'espère que j'étais assez claire, si vous avez besoin de plus de précision, etc, n'hésitez pas à me demander !

[Neptunia]

Bonjour ^^

Le plus simple est de placer le script dans le message de la page d'accueil (entre balises script) en prenant soin de remplacer toutes les occurrences de $ par jQuery

[Fushi]

Bonjour,

Merci de ta réponse !
Petite question comme je ne m'y connais pas trop, qu'est-ce qu'une occurence ?

[Neptunia]

Comme cela n'a rien d'un terme technique je vous renvoie sur un dictionnaire

https://fr.wiktionary.org/wiki/occurrence

[Fushi]

Merci, j'ai compris ce que cela voulait dire.
Néanmoins, que faut-il marquer exactement afin de remplacer les $ par jQuery ?

[Neptunia]

Prenons la première ligne

Code:

$('document')

à remplacer par :

Code:

jQuery('document')

[Fushi]

Dire que je n'ai pas compris quelque chose d'aussi simple. Désolée !

Alors, j'ai tout remplacé comme indiqué, cependant le code marche exactement comme avant et donc a toujours le même problème pour les sous-forums. Comme on peut le voir ici (ex dans un sous-forum) :

Spoiler:

[Fushi]

Je me permet de faire un up !

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Fushi]

Le sujet est toujours d'actualité. J'attends juste qu'une personne s'y connaissant passe par ici pour bien vouloir m'aider ! n.n'

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Fushi]

Toujours d'actualité. Personne n'a de suggestion pour m'aider ?
Un autre script à utiliser qui serait préférable, etc ?

[MasDan]

Bonjour,

Votre script est présent sur la page d'accueil mais absent sur les pages des sous-forums ce qui explique

Par exemple, sur mon forum, dans "Let's Play", quand je clique sur "AC Happy Home Designer", les onglets sont toujours présents au-dessus (mais ne fonctionnent pas par ailleurs).

En déplaçant votre code inclus à votre page d'accueil vers un code javacript avec placement sur l'index et les sous-forums devrait régler votre problème.

[Fushi]

Bonjour,

En effet, je n'ai pas pensé à cocher les sous-forums la première fois.
C'est maintenant fait, mais le problème persiste toujours cependant.

[MasDan]

Oups, un peu (... beaucoup) dans le champ avec mon cocher les sous-forums.

Espérons un meilleur résultat.

1) Rechercher à votre template (ligne 20)

Code:

<div>Coeur du village</div>

et remplacer

Code:

Coeur du village

Il faut supprimer la paire de balise DIV.

2) J'ai remplacé la méthode .size() par .length car elle n'est plus valide dans la prochaine version de jquery(v3.2).

3) Remplacer votre javascript par le code suivant (placement sur l'index seulement). Hé oui, pas de sous-forums

Code:

var nbCat=0;
var tbCatNo=new Array();
var tbCatDesc=new Array();

tbCatNo[nbCat]=1;
tbCatDesc[nbCat++]="Coeur du village";

tbCatNo[nbCat]=2;
tbCatDesc[nbCat++]="Let's Play";

tbCatNo[nbCat]=3;
tbCatDesc[nbCat++]="Perchoir";

function change_categorie( index ) {
  if ($('.categorievo:eq(' + index + ')').length != 0 ) {
    $('.categorievo').css( 'display' , 'none' );
    $('.categorievo:eq(' + index + ')').fadeIn( 500 );
     
    $('.ongletvo.actif').removeClass('actif');
    $('.ongletvo:eq('+ index +')').addClass('actif');
  } else {
    alert('Vous ne pouvez pas accéder à cette catégorie');
  }
}

$('document').ready(function() {

  if (location.pathname == "/" || location.pathname=="/forum")  {  // page accueil
    if($('.categorievo').length > 1) {
      $('#conteneur_ongletsvo').css( 'display' , 'block' );
      $('#conteneur_ongletsvo .ongletvo').click(function(){
        change_categorie( $('.ongletvo', '#conteneur_ongletsvo').index( this ) )
      });
      $('.ongletvo:eq(0)').click();
    }
    $('.ongletvo:eq(0)').addClass('actif');
  } 

  if (location.pathname.substring(0, 2) == "/c") {  // page catégorie
      var txt1 = location.pathname.substring(2);
      var tab = txt1.split('-');
      var noCat = tab[0]; // no catégorie de la page courante
      for (var i = 0; i < 3; i++) {
        if  (noCat == tbCatNo[i]) {
          $(".ongletvo:contains('" + tbCatDesc[i] + "')").addClass('actif');
        } else {
          var textAct = $(".ongletvo:contains('" + tbCatDesc[i] + "')").html();
          $(".ongletvo:contains('" + tbCatDesc[i] + "')").html("<a href='/c" + tbCatNo[i] + "-'>" + textAct + "</a>");
        }
      }
    };
});

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Fushi]

Excusez-moi, je n'avais malheureusement pas de wifi ce weekend pour dire de pouvoir essayer.

J'ai donc enlevé la balise div et remplacer le code javascript (en ne le mettant que sur l'index), cependant, le problème est toujours là. Je commence à désespérer..

[MasDan]

Bonjour,

Le code ne fonctionne que sur l'index et les catégories mais pas pour les forums car j'avais visionné la page du forum no1 règlement où votre code des onglet est absent. Je viens de constater que ce code est présent sur d'autres forums. Voici l'ajout pour traitement de vos onglets pour les forums.

Ajouter ceci à votre code javascript (immédiatement avant la dernière ligne) avec placement sur index et sous-forums.

Code:

  if (location.pathname.substring(0, 2) == "/f" && location.pathname != "/forum") {  // page forum
    $(".ongletvo").each(function() {
      var textAct = $(this).html();
      for (var i = 0; i < 3; i++) {
        if  (textAct == tbCatDesc[i]) {
        $(this).html("<a href='/c" + tbCatNo[i] + "-'>" + textAct + "</a>");
        }
      }
    }
  } 


[Fushi]

Aux premiers abords, il ne marchait pas, mais j'ai remarqué qu'il manquait une parenthèse à la fin. Et maintenant, ça marche ! Merci beaucoup !

Cependant, j'ai encore un léger problème, une fois que je clique sur un des onglets quand je suis dans un sous-forum, le "design" des onglets change et devient ceci :

Spoiler:

Que devrais-je mettre dans mon CSS pour les rendre comme normalement ?

[MasDan]

Bonjour Fushi,

sur les pages des forums, il est normal que les trois catégories soient cliquable.


Par contre, lors d'un clic, vous quittez la page du forum et vous êtes transféré sur la page d'une catégorie, et comme sur l'index, la catégorie affichée n'est pas cliquable.

[Fushi]

Lorsqu'on clique sur un sous-forum, le texte des onglets devient noir et souligné.

En fait, c'est ça que j'aimerais modifier pour le rendre blanc (comme c'est le cas avant).


Cependant, je ne sais pas ce que je devrais cibler dans le css pour faire cela ?

[MasDan]

Bonjour Fushi,

Oups, désolé je n'avais pas saisi le problème (couleur et soulignement).

Ajouter à votre CSS

Code:

.ongletvo a {
  color: #fff;
  text-decoration: none;
}

[Fushi]

Bonsoir,

Pas de problèmes ! C'est peut-être moi qui ai mal expliqué la situation. ^^'
En tout cas, ça marche ! Merci beaucoup pour votre aide, maintenant c'est résolu.