Catégories en onglets : modifications du js

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Catégories en onglets : modifications du js

Message par MlleAlys le Ven 6 Mar 2015 - 15:17

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forum-test-phpbb2.forumactif.org/

Description du problème

Bonjour,

Bon, décidément, le javascript et moi.... TT-TT
Voilà un moment que je bataille avec un code javascript pour catégories en onglets (trouvé sur un sujet ici, mais je ne sais plus lequel, désolée ><") sans réussir à la modifier comme je veux... Les onglet en eux même fonctionnent très bien mais j'aimerais changer quelques détails :

- Ce n'est pas vraiment un problème en soi, mais lorsqu'on entre dans une catégorie, les onglets restent s'il y a encore des forums à l'intérieur (comme ici par exemple), je comprends bien pourquoi, et ils sont inactifs puisque le javascript ne fonctionne que sur l'index, mais je ne sais pas comment faire pour que les onglets plutôt soit ne s'affichent pas à l'intérieur des catégories, soient, idéalement ramène aux bonnes catégories sur l'index ? ^^"

- Et puis j'ai aussi essayé de bidouiller avec d'autres codes trouvés par ci par là, mais sans succès non plus : comment faire pour créer un onglet uniquement visible par certains groupes (en l'occurrence le staff donc Admins et Modos ^^") ?

Les codes :
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>

<!-- DEBUT MODIF ONGLETS -->
 
<div class="onglets">
  <span onClick="change_cat('0-1');" class="onglet_actif" id="cat_0-1">Administration du forum </span>
  <span onClick="change_cat('2-3');" class="onglet_inactif" id="cat_2-3">L'Île </span>
  <span onClick="change_cat('4-5');" class="onglet_inactif" id="cat_4-5">Le continent </span>
  <span onClick="change_cat(6);" class="onglet_inactif" id="cat_6">Hors RP </span>
</div>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
 
<script type="text/javascript">
    <!--
    capture_cat();
    //-->
</script>
 
<!-- FIN MODIF ONGLETS -->

  <div class="secondarytitle">
    &nbsp;{catrow.tablehead.L_FORUM}&nbsp;
  </div>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <div class="forum">
    <div class="forum-tete">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      <span class="forum-stats gensmall">
        {catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages
      </span>
      <h3 class="hierarchy">
        <span class="forumlink">
          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        </span>
      </h3>
    </div>
   
    <table class="corps-forum">
      <tr>
        <td width="70%">
          <div class="forum-desc genmed">
            {catrow.forumrow.FORUM_DESC}
            <!-- BEGIN switch_moderators_links -->
            <div class="forum-modos">
              {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            </div>
            <!-- END switch_moderators_links -->
          </div>
        </td>
        <td>
          <div class="dernier-mess gensmall">
            <!-- BEGIN avatar -->
            <div class="lastpost-avatar">
              {catrow.forumrow.avatar.LAST_POST_AVATAR}
            </div>
            <!-- END avatar -->
            {catrow.forumrow.LAST_POST}
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="sous-forums gensmall">
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          </div>
        </td>
      </tr>
    </table>

  </div>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->

Le javascript activé que sur l'index :
Code:
var compteur_cat = 0;
var nom_cat = new Array("0", "1", "2", "3", "4", "5", "6");
 
 
function change_cat(num) {
  var nums = (num + "").split("-");
  $(".categorie").hide();
  $("div.onglets span").removeClass("onglet_actif").addClass("onglet_inactif");
  $("div.onglets span#cat_" + num).removeClass("onglet_inactif").addClass("onglet_actif");
  for (i = 0;i < nums.length;i++) {
    $("#cat" + nom_cat[nums[i]]).show();
  }
}
 
 
function capture_cat() {
  if (compteur_cat == 0 || compteur_cat == 1) {
    document.write('<div class="categorie" id="cat' + nom_cat[compteur_cat] + '">');
  } else {
    document.write('<div class="categorie" id="cat' + nom_cat[compteur_cat] + '" style="display:none;">');
  }
  compteur_cat++;
}
;

Merci d'avance pour votre aide, beaucoup beaucoup ! o/


Dernière édition par MlleAlys le Dim 8 Mar 2015 - 18:51, édité 9 fois (Raison : ça bouge un peu sur mon forum, j'actualise le code du template ^^")

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par demeter1 le Ven 6 Mar 2015 - 15:49

Bonjour,
un hors sujet mais, juste pour vous signaler que sous firefox, le système des onglets ne fonctionne pas sur le forum cité.

demeter1
+ Hyperactif +

Masculin
Messages : 8101
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par MlleAlys le Ven 6 Mar 2015 - 16:35

oui désolée j'étais en train de tester autre chose et j'ai dû partir un moment en laissant en plan, c'est pour ça, mais merci quand même, ça aurait été embêtant ! ^^"

merci encore ! ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par gigi68 le Ven 6 Mar 2015 - 16:53

bonjour MilleAlys ,

Je me permet de posté ici pour vous demander !
Je vois dans votre code javascript ceci :

Code:
var i = 0;
var compteur_cat = 0;
var anc_cat = 0;
var nom_cat = new Array("0", "1", "2", "3", "4", "5", "6");

Est un genre de compteur ?
Pouvez vous m'en dire un peut sur cette fonction SVP ?

Merci ce serrai très gentil de votre pars !

gigi68
***

Masculin
Messages : 197
Inscrit(e) le : 31/05/2014

http://motardalsace68.forumactif.org/forum
gigi68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par MlleAlys le Ven 6 Mar 2015 - 17:14

euh... je ne sais pas si je pourrais expliquer, je ne m'y connais pas bien en javascript, et j'ai peur de dire des bêtises... ^^"
Mais ce n'est pas une fonction, c'est surtout l'initialiser les différentes variables utilisées dans les fonctions plus bas dans le javascript je crois.

- La variable i sert dans la fonctione à afficher les bonnes catégories quand on clique sur un onglet, mais je pense que ce n'est pas utile de l'initialiser au tout début puisqu'on reprécise après qu'elle commence à 0 ?

- Le anc_cat n'apparait nulle part ailleurs et je me demandais justement s'il servait à quelque chose, en le retirant ça a l'air de fonctionner quand même...

- Le compteur_cat j'ai un peu de mal à comprendre exactement comment il varie, mais je crois qu'il sert à afficher les bonnes catégories à l'affichage de l'index (avec la partie plus bas :
if (compteur_cat == 0 || compteur_cat == 1)
qui permet d'afficher les deux premières catégories dès le chargement de la page)

- Pour nom_cat ce sont les différentes catégories (j'en ai 6 en comptant la corbeille)


Voilà tout ce que je peux dire en espérant ne pas avoir dit n'importe quoi ^^"

Et pour le coup avec le javascript suivant, les onglets semblent chez moi fonctionner tout aussi bien :
Code:
var compteur_cat = 0;
var nom_cat = new Array("0", "1", "2", "3", "4", "5", "6");


function change_cat(num) {
  var nums = (num + "").split("-");
  $(".categorie").hide();
  $("div.onglets span").removeClass("onglet_actif").addClass("onglet_inactif");
  $("div.onglets span#cat_" + num).removeClass("onglet_inactif").addClass("onglet_actif");
  for (i = 0;i < nums.length;i++) {
    $("#cat" + nom_cat[nums[i]]).show();
  }
}


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

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par gigi68 le Ven 6 Mar 2015 - 17:19

@MlleAlys a écrit:euh... je ne sais pas si je pourrais expliquer, je ne m'y connais pas bien en javascript, et j'ai peur de dire des bêtises... ^^"
Mais ce n'est pas une fonction, c'est surtout l'initialiser les différentes variables utilisées dans les fonctions plus bas dans le javascript je crois.

- La variable i sert dans la fonctione à afficher les bonnes catégories quand on clique sur un onglet, mais je pense que ce n'est pas utile de l'initialiser au tout début puisqu'on reprécise après qu'elle commence à 0 ?

- Le anc_cat n'apparait nulle part ailleurs et je me demandais justement s'il servait à quelque chose, en le retirant ça a l'air de fonctionner quand même...

- Le compteur_cat j'ai un peu de mal à comprendre exactement comment il varie, mais je crois qu'il sert à afficher les bonnes catégories à l'affichage de l'index (avec la partie plus bas :
if (compteur_cat == 0 || compteur_cat == 1)
qui permet d'afficher les deux premières catégories dès le chargement de la page)

- Pour nom_cat ce sont les différentes catégories (j'en ai 6 en comptant la corbeille)


Voilà tout ce que je peux dire en espérant ne pas avoir dit n'importe quoi ^^"

Et pour le coup avec le javascript suivant, les onglets semblent chez moi fonctionner tout aussi bien :
Code:
var compteur_cat = 0;
var nom_cat = new Array("0", "1", "2", "3", "4", "5", "6");


function change_cat(num) {
  var nums = (num + "").split("-");
  $(".categorie").hide();
  $("div.onglets span").removeClass("onglet_actif").addClass("onglet_inactif");
  $("div.onglets span#cat_" + num).removeClass("onglet_inactif").addClass("onglet_actif");
  for (i = 0;i < nums.length;i++) {
    $("#cat" + nom_cat[nums[i]]).show();
  }
}


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

Ben oui je te remercie beaucoup pour ta réponse !
Me voila renseigné Thanks encore

gigi68
***

Masculin
Messages : 197
Inscrit(e) le : 31/05/2014

http://motardalsace68.forumactif.org/forum
gigi68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par Milouze14 le Ven 6 Mar 2015 - 18:22

Salut MlleAlys,
félicitations pour ta nomination Wink .

Ton script est prévu que pour l'index et il faudrait déposer le code html dans la page d'accueil Wink .

Code:

<div class="onglets">
          <span onClick="change_cat('0-1');" class="onglet_actif" id="cat_0-1">Administration du forum </span>
          <span onClick="change_cat('2-3');" class="onglet_inactif" id="cat_2-3">L'Île </span>
          <span onClick="change_cat('4-5');" class="onglet_inactif" id="cat_4-5">Le continent </span>
          <span onClick="change_cat(6);" class="onglet_inactif" id="cat_6">Hors RP </span>
        </div>


Afin qu'il ne soit plus actif lors d'une visite d'une catégorie , d'un forum ou sous forums.

Il est donc logique qu'arriver dans un de ces cas de figure que le lien ne soit plus valide Wink .

Pour le script:

En prenant en compte que cet onglet soit celui a cacher:
Code:
<span onClick="change_cat('0-1');" class="onglet_actif" id="cat_0-1">Administration du forum </span>

tu peux déposer ce Java juste sur l'index :
Code:


//on cache le lien aux membres
$(function(){
$('span#cat_0-1.onglet_actif').hide();
});
//on active le lien pour les admins et les modos
$(function(){if (_userdata["user_level"] == 1 ||_userdata["user_level"] == 2)
$(function(){
$('span#cat_0-1.onglet_actif').show();
})});



a++






Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par MlleAlys le Ven 6 Mar 2015 - 18:56

Merci Milouze14 pour ta réponse !!

merci beaucoup pour le script, ça fonctionne parfaitement ! o/


Pour les onglets à l'intérieur des forums oui je comprenais très bien que ça ne fonctionne pas à l'intérieur des forums, mais je n'avais pas pensé à essayer de le mettre dans la age d'accueil ! x3
Y aurait-il un moyen (un autre code de catégories peut être...) qui permette, même à l'intérieur des forums, quand on clique dessus de revenir sur l'index avec l'affichage des catégories de cet onglet ? Aucun des codes que j'ai trouvés sur le net ne permettait ça...

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par Milouze14 le Ven 6 Mar 2015 - 18:59

Re,

Y aurait-il un moyen (un autre code de catégories peut être...) qui permette, même à l'intérieur des forums, quand on clique dessus de revenir sur l'index avec l'affichage des catégories de cet onglet ? Aucun des codes que j'ai trouvés sur le net ne permettait ça...

A ma connaissance non malheureusement , mais peut être qu'un autre membre pourra te venir en aide Wink .

Bonne chance pour la suite.
a++


Dernière édition par Milouze14 le Sam 7 Mar 2015 - 5:46, édité 2 fois

Milouze14
+ Hyperactif +

Masculin
Messages : 4563
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par MlleAlys le Ven 6 Mar 2015 - 19:22

merci beaucoup quand même !! ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par MlleAlys le Dim 8 Mar 2015 - 17:51

up ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Catégories en onglets : modifications du js

Message par Self le Dim 8 Mar 2015 - 18:21

Bonjour MlleAlys Smile !

Peut-être en changeant ton Javascript par ceci ? :
Code:
var compteur_cat = 0;
var nom_cat = new Array("0", "1", "2", "3", "4", "5", "6");
      
      
function change_cat(num) {
   var nums = (num + "").split("-");
   $(".categorie").hide();
   $("div.onglets span").removeClass("onglet_actif").addClass("onglet_inactif");
   $("div.onglets span#cat_" + num).removeClass("onglet_inactif").addClass("onglet_actif");
   for (i = 0;i < nums.length;i++) {
      $("#cat" + nom_cat[nums[i]]).show();
   }
}
      
      
function capture_cat() {
   if (compteur_cat == 0 || compteur_cat == 1) {
      document.write('<div class="categorie" id="cat' + nom_cat[compteur_cat] + '">');
   } else {
      document.write('<div class="categorie" id="cat' + nom_cat[compteur_cat] + '" style="display:none;">');
   }
   compteur_cat++;
};

jQuery(function($){
   if(location.pathname != '/'){
      $('span[class^="onglet_"]').on('click', function(){
         localStorage.setItem('cat', $(this).attr('onclick').match(/\d\-\d/));
         location.pathname = '/';
      });
   }else{
      var c = localStorage.getItem('cat');
      if(c){
         change_cat(c);
         localStorage.removeItem('cat');
      }
   }
});

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégories en onglets : modifications du js

Message par MlleAlys le Dim 8 Mar 2015 - 18:51

owé ça fonctionne, merci beaucoup !!!!! \o/
je passe en résolu ^^

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum