Plusieurs catégories par onglet ?

3 participants

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

  • 0

Résolu Plusieurs catégories par onglet ?

Message par Leplaisantjack Ven 8 Avr 2011 - 20:47

Bonjour, je vais essayer d'être le plus clair possible pour que vous compreniez ma demande.

Cela concerne le fait de mettre les catégories du forum en onglet. Ainsi, à chaque onglet correspond une catégorie du forum. J'ai pour cela utiliser le Générateur de CSSACTIF, quand il fonctionnait encore.

Je voulais donc savoir si il était possible de faire correspondre à un onglet plusieurs catégories mises l'une en dessous de l'autre (comme une page de forum normale en somme), et non comme maintenant un onglet à une catégorie ?

En résumé, est-il possible d'assigner plusieurs catégories à un onglet particulier ?


Dernière édition par Leplaisantjack le Dim 10 Avr 2011 - 21:45, édité 1 fois
avatar

Leplaisantjack
Nouveau membre

Messages : 15
Inscrit(e) le : 08/04/2011

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Ea Ven 8 Avr 2011 - 22:49

Bonjour,


Cela pourrait être réalisable quel est le code de la fonction change_cat ?

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Leplaisantjack Sam 9 Avr 2011 - 23:01

Alors je crois avoir trouvé de quoi tu parles, enfin je pense.

Code:
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
  document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

Sinon j'ai le code entier de 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}

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

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

var i = 0;

document.write('<div align="center">
<ul class="onglet">
 

<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0"><div id="http://s2.noelshack.com/uploads/images/11919344716323_accueil.png"><br/>Accueil</div></li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1"><br/>Karakura</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2"><br/>Soul Society</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3"><br/>Hueco Mundo</li>
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4"><br/>Zone HRP</li>
<li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5"><br/>Projet Z</li>

</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

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

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
  document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

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

</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 -->
<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">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
<!-- 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 --><!--

Au passage, merci de ton aide et d'avoir répondu à mon questionnement. Very Happy
avatar

Leplaisantjack
Nouveau membre

Messages : 15
Inscrit(e) le : 08/04/2011

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Ea Dim 10 Avr 2011 - 6:51

Déjà il faudrait changer le :

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

Code:
var nom_cat = new Array('c0','c1','c2','c3','c4',"c5");
( juste par mesure de précaution, parce que ça doit être quelque chose d'unique et si c'est juste un numéro y'a moins de chance que ce soit unique )

Maintenant pour ce qui est du problème il faut remplacer la fonction :

Code:
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
  document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}
Par ceci :

Code:
function change_cat(num)
{
   var nums= (num+'').split('-');
   $('.cat_forum').hide();
   $('ul.onglet li').removeClass('onglet_actif').addClass('onglet_nactif');
   $('ul.onglet li#cat_'+num).removeClass('onglet_nactif').addClass('onglet_actif');
   for(i=0; i<nums.length; i++) $('#'+nom_cat[nums[i]]).show();
}
Et si par exemple pour l'onglet 1 tu veux afficher la catégorie 2 et 3 il faut remplacer le :

Code:
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1"><br/>Karakura</li>
Par :

Code:
<li onMouseOver="change_cat('2-3');" class="onglet_nactif" id="cat_2-3"><br/>Karakura</li>
Si il fallait 5 catégories sur le même onglet ce serait pareille, juste les 5 chiffres des catégories séparés par des tirêts.

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Lilo Silverwing Dim 10 Avr 2011 - 11:05

[Lilo qui a l'impression d'être une chi**** de première --']

En fait, j'allais poster un sujet pour ce template mais j'ai vu que Leplaisantjack m'avait devancé. J'ai voulu essayé avec ce que vous lui avez donné sauf que je n'ai pas le même code :S

le code entier de 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}

         {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>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><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="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>

            </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 over" align="center" valign="middle" height="50">
         <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" /><!-- END tablefoot --><!-- END catrow -->

Edit etana : il vaut mieux faire votre propre, sujet, celui-ci c'est sur la modification d'un script déjà présent là on dirait qu'il n'y a encore rien, cordialement ^^
Lilo Silverwing

Lilo Silverwing
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 09/04/2011

http://miroirdurised.forumactif.fr/?tt=1
Lilo Silverwing a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Plusieurs catégories par onglet ?

Message par Leplaisantjack Dim 10 Avr 2011 - 18:02

Merci énormément, c'est ce que j'appelle de l'aide rapide et claire. Very Happy

Je vais essayer ceci de suite et vous tiendrai au courant.
avatar

Leplaisantjack
Nouveau membre

Messages : 15
Inscrit(e) le : 08/04/2011

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Leplaisantjack Dim 10 Avr 2011 - 19:07

Bon et bien après avoir essayé, ça ne fonctionne pas.

Dès lors que j'essaie de faire correspondre des catégories à un onglet en particulier, tout le code semble s'annuler et les onglets disparaissent en laissant un forum où toutes les catégories apparaissent normalement, les unes à la suite des autres. Confused
avatar

Leplaisantjack
Nouveau membre

Messages : 15
Inscrit(e) le : 08/04/2011

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Ea Dim 10 Avr 2011 - 19:47

Vous testez sur http://rpg-bleach.forumgratuit.org/

Là en survolant les onglets je vois bien les 2 seules catégories visibles aux invités dans leur bons onglets, il y a moyen d'avoir un exemple avec le dysfonctionnement ?


Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Leplaisantjack Dim 10 Avr 2011 - 20:08

Voici deux screens pour que ce soit plus compréhensible.

Avec l'ancien code:

https://2img.net/image.noelshack.com/upload/19769613100974_rpg_bleach_1.png

On voit bien les différents onglets (Accueil, Karakura, Soul Society, etc...). Le problème était donc que chaque onglet ne possédait qu'une seule catégorie, alors que moi même souhaitais en faire correspondre plusieurs par onglet.

Avec le nouveau code:

https://2img.net/image.noelshack.com/upload/9795149687070_rpg_bleach_2.png

J'ai remarqué que dès lors que je faisais ceci, et rien que ceci:

Etana a écrit:
Et si par exemple pour l'onglet 1 tu veux afficher la catégorie 2 et 3 il faut remplacer le :

Code:
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1"><br/>Karakura</li>
Par :

Code:
<li onMouseOver="change_cat('2-3');" class="onglet_nactif" id="cat_2-3"><br/>Karakura</li>

Les onglets disparaissaient et le forum redevenait normal, avec les catégories les unes sous les autres. Plus particulièrement, c'est lorsque je mets les apostrophes autour des numéros des catégories que tout bug.

Dans l'exemple, j'aimerai donc faire correspondre les "Zones Administrative", "Zone de Modération" et "Accueil" au premier onglet.
avatar

Leplaisantjack
Nouveau membre

Messages : 15
Inscrit(e) le : 08/04/2011

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Ea Dim 10 Avr 2011 - 20:38

Ah d'accord, je n'avais pas bien compris la manière dont les onglets étaient ajoutés.

Il faudrait supprimer ceci du script :

Code:
document.write('<div align="center"><ul class="onglet"><li onMouseOver="change_cat('0-1');" class="onglet_actif" id="cat_0-1"><div id="http://s2.noelshack.com/uploads/images/11919344716323_accueil.png"><br/>Accueil</div></li><li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1"><br/>Karakura</li><li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2"><br/>Soul Society</li><li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3"><br/>Hueco Mundo</li><li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4"><br/>Zone HRP</li><li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5"><br/>Projet Z</li></ul></div>');
Et simplement mettre juste après le :

Code:
<!-- DEBUT MODIF ONGLETS -->
Ceci :

Code:
<div align="center"><ul class="onglet"><li onMouseOver="change_cat('0-1');" class="onglet_actif" id="cat_0-1"><div id="http://s2.noelshack.com/uploads/images/11919344716323_accueil.png"><br/>Accueil</div></li><li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1"><br/>Karakura</li><li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2"><br/>Soul Society</li><li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3"><br/>Hueco Mundo</li><li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4"><br/>Zone HRP</li><li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5"><br/>Projet Z</li></ul></div>

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Leplaisantjack Dim 10 Avr 2011 - 21:45

Et bien c'est parfait, je viens de tester et ça marche parfaitement comme je l'attendais.

Merci à toi pour tes conseils clairs, pour quelqu'un qui ne s'y connait pas trop en code j'ai trouvé ça très précis et j'ai même pu comprendre deux trois trucs au passage.
avatar

Leplaisantjack
Nouveau membre

Messages : 15
Inscrit(e) le : 08/04/2011

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

Résolu Re: Plusieurs catégories par onglet ?

Message par Ea Dim 10 Avr 2011 - 21:50

D'accord tant mieux ^^

Je déplace le sujet dans la partie script car ça y correspond mieux.

@lilo il vaut mieux faire votre propre sujet.

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

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

- Sujets similaires

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