AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
LEGO Icons 10331 – Le martin-pêcheur
35 €
Voir le deal

    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15]

    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Mar 30 Mar 2010 - 9:43





    Vic n'est plus présent sur le forum et ne peut plus répondre à vos questions. Postez dans la rubrique "problème en codage" si vous voulez de l'aide.


    1) Présentation :

    Bonjours à tous,
    Dans ce tutoriel, nous allons apprendre à afficher nos catégories à l'aide d'onglets.

    Pour commencer, voici quelques exemples d'application de ce tutoriel, histoire de vous donner quelques idées :
    Voir un résultat sur forumactif.
    Voir un deuxième résultat sur forumactif.
    Voici un résultat plus complexe sur un site .


    Mon but n'est pas uniquement de vous fournir un code à modifier, mais aussi d'essayer de vous faire comprendre comment il fonctionne.
    J'ai donc mis à la disposition de tous les courageux, des explications plus complètes cachées sous des spoiler.


    Pourquoi utiliser un système d'onglets ?

    Quand un utilisateur possède plusieurs contenus, il peut souhaiter en afficher un à la fois. (Pour prendre moins de place par exemple)
    Pour ce faire, il existe plusieurs solutions, dont utiliser des onglets. Ils ont l'avantage d'être faciles à mettre en place et faciles à utiliser.
    C'est pourquoi je les ai choisis pour ce tutoriel.


    Comment fonctionne ce système ?

    Explications:





    2) Le HTML :

    Afin de pouvoir mettre en place ce système, il vous faut au préalable choisir de séparer les catégories. Pour cela, vous devez aller à cet endroit :
    Panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie

    Choisissez l'un des trois formats dans "Séparer les catégories sur l'index"

    Pourquoi est-ce nécessaire ?
    Si l'on utilisait l'un des trois autres formats, les catégories feraient partie d'un même bloc. Elles formeraient donc un unique contenu, ce qui n'est pas ce que nous souhaitons.
    Le format que l'on vient de choisir, nous permet de séparer les catégories. Elles formeront donc chacune un contenu que nous pourrons choisir d'afficher ou non.


    Modifications du template
    Maintenant, nous allons modifier le template des catégories (index_box) afin d'ajouter nos onglets. Pour cela, nous allons aller à cet endroit :
    Panneau d'administration > Affichage > Templates > Général > Index_Box

    Pour vous faciliter la tâche, un générateur d'onglets a été mis au point : Générateur d'onglets (Fait par Onyx pour remplacer celui de Vic qui ne fonctionnait plus).

    Modifications avec le générateur d'onglets :
    Modifications avec le générateur:

    Modifications manuelles (sans le générateur d'onglets) :
    Modifications manuelles:





    3) Le Javascript :

    Vous allez voir c'est assez rapide. Rendez vous à la page de gestion du Javascript en vous rendant à cet endroit :
    Panneau d'administration > Modules > HTML et Javascript > Gestion des codes Javascript

    - Activez la gestion des codes Javascript (cliquez sur "oui", puis sur "enregistrer");
    - Cliquez sur "créer un nouveau Javascript";
    - Mettez un titre ("Catégorie en onglets" par exemple);
    - Vérifiez bien que seule la case "sur l'index" est cochée;
    - Copiez le code suivant dans la partie "code Javascript".

    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');
     }

    Et voilà !

    Explications:





    4) Le CSS :

    Allez, c'est la dernière ligne droite. Pour trouver votre CSS, suivez ce chemin :
    Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuilles de styles CSS

    Insérez y le code suivant :
    Code:
    /*Conteneur qui contient toutes les catégories */
    #conteneur_categoriesvo {
    }
    /* Conteneur de chaque catégorie */
     .categorievo {
    }
    /* Conteneur de tous les onglets */
    #conteneur_ongletsvo {
      display: none;
    }
    /* Un onglet */
    .ongletvo{
      cursor: pointer;
    }
    /* Onglet actif */
    .actif{
      color: darkred;
    }

    Il ne contient que le strict minimum et la liste de toutes les classes disponibles.
    Il n'y a pas grand chose, mais je pense que vous pourrez trouver tout seul ce que vous souhaitez faire sur ce forum ou sur google.

    N'hésitez pas à demander de l'aide dans la section adéquate ^^

    Voilà, c'est terminé. J'espère que ce tutoriel vous aura aidé ~


    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par vic_le_faucheur le Mar 25 Sep 2012 - 9:21, édité 142 fois

    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Mar 30 Mar 2010 - 9:48

    EDIT


    Dernière édition par vic_le_faucheur le Mer 26 Jan 2011 - 20:18, édité 3 fois
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 30 Mar 2010 - 11:27

    Génial ! Merci pour ce tuto ! Wink



    sign
    Tahly
    Tahly
    FémininAge : 34Messages : 452

    Mar 30 Mar 2010 - 13:11

    Je suppose que dans les ID il faut mettre le nom exact de chaque catégorie ?
    Oas~
    Oas~
    MasculinAge : 33Messages : 23

    Mar 30 Mar 2010 - 17:14

    Crewette => Oui Wink

    Ce tuto va en ravir plus d'un mais en faire rager d'autres Rolling Eyes
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Mar 30 Mar 2010 - 18:41

    pourquoi tu dis que ça va en faire rager ??

    sinon je ne comprends pas la question que tu pose sur les id.
    les seuls truc à modifier sont les noms en MAJUSCULES. après si j'ai mis le même nom c'est qu'il doivent contenir la même chose. cat�gories onglets - Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] Icon_wink

    Oas~
    Oas~
    MasculinAge : 33Messages : 23

    Mar 30 Mar 2010 - 19:40

    Car certains se sont appropriés l'exclusivité de "l'effet "du tuto, alors qu'on sait tous parfaitement que ces onglets existent depuis bien longtemps.
    Donc, quand ces personnes se rendront compte qu'ils ne seront plus les seuls, ils vont crier au plagiat, chose qui bien entendu n'aboutira point Razz
    Tahly
    Tahly
    FémininAge : 34Messages : 452

    Mar 30 Mar 2010 - 23:45

    Qu'ils crient, de toute façon si vic_le_faucheur a fait lui-même le code, ces personnes n'ont rien à dire.

    merci de ce partage !
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Mer 31 Mar 2010 - 13:15

    la dessus effectivement je n'ai rien a craindre ^^
    et en grâce à laide de (mince j'ai oublier le nom ^^) on va pouvoir l'améliorer car effectivement il y a plein de truc auquel je n'avais pas penser.

    donc préparez vous à la version 2.0.1 !! (on note pour faire comme les pro ^^) !

    avatar
    fascicularia
    MasculinAge : 56Messages : 189

    Mer 7 Avr 2010 - 21:45

    Voila un rendez vous que je ne vais manquer pour rien au monde. Merci par avance Vic pour ce nouveau tuto.
    Lucky Numb£r
    Lucky Numb£r
    MasculinAge : 31Messages : 1972

    Mer 7 Avr 2010 - 21:56

    Oh yeah vic il en jette ce tuto (je crois que le nom que tu cherchais c'était Riku Wink). Continuez sur cette lancée et faites nous un super méga maxi tuto, bref un truc qui déchire tout XD Merci du partage !



    avatar
    fascicularia
    MasculinAge : 56Messages : 189

    Dim 11 Avr 2010 - 13:00

    Merci Vic pour ce tuto,
    En bon néophite que je suis, j'ai apliqué par deux fois les manips concernant les modifications de l'index box mais je me heurte toujours au même soucis:La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.

    Je n'ai pas modifié mes url de redirection et mes classe ID pour l'instant. Je voulais juste voir si le template modifié dans sa forme brute ne présentait aucun soucis au niveau de l'enregistrement.
    Merci par avance pour ta réponse.

    Voici mon template modifié, vois tu quelque chose qui cloche ?





    Spoiler:
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Mar 13 Avr 2010 - 11:37

    juste une question entre begin tablefoot et <"/table"> tu as vraiment tout supprimer ??
    car si c'est le cas c'est normal que ça ne marche pas.
    sinon tient pour l'info : j'ai retouché le code.
    pour les personnes qui n'acceptent pas le javascript tu met au tout début du script et pour avoir un meilleur design :

    Code:


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

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


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

    var i = 0;

    document.write('<div align="center">
    <ul class="onglet">
    <li onMouseOver="change_cat(0);" class="onglet_actif"><div  id="cat_preface"><span class="text">Preface</span></div></li>
    <li onMouseOver="change_cat(1);" class="onglet_nactif"><div  id="cat_chronique"><span class="text">Chronique</span></div></li>
    <li onMouseOver="change_cat(2);" class="onglet_nactif"><div  id="cat_info"><span class="text">Infos</span></div></li>
    <li onMouseOver="change_cat(3);" class="onglet_nactif"><div  id="cat_fiches"><span class="text">Fiches</span></div></li>
    <li onMouseOver="change_cat(4);" class="onglet_nactif"><div  id="cat_lieux"><span class="text">Lieux</span></div></li>
    <li onMouseOver="change_cat(5);" class="onglet_nactif"><div  id="cat_hors"><span class="text">Hors RPG</span></div></li>
    <li onMouseOver="change_cat(6);" class="onglet_nactif"><div  id="cat_archives"><span class="text">Archives</span></div></li>
    </ul>
    </div>
    <div class="cat_nactif">');

    var compteur_cat = 0;

    var anc_cat = 0;
    var nom_cat = new Array('preface', 'chronique', 'info', 'fiches','lieux','hors','archives');



    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>   

    <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">&nbsp;</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>
            <!-- 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 --><!-- END catrow -->


    ce code permet aussi une meilleure transition d'une catégorie à une autre.
    le code est entier donc tu peux être sur qu'il marche !

    voici le css qui va avec :



    Code:

    .text
    {
    color:#FF6347;
    cursor:pointer;
    }

    #cat_preface, #cat_chronique,#cat_hors,#cat_fiches,#cat_archives,#cat_info,#cat_lieux
    {
    padding-top:4px;
    }

    .spoiler_content { display: block; }
    .hidden .spoiler_content { display: none; }

    .cat_forum {
    background-color: #000000;
    margin: auto;
    margin-bottom:30px;
    width:800px;
    }

    .onglet {
    display:inline-block; 
    margin-top:30px;
    text-decoration:none; !important
    cursor:pointer;


    }

    .onglet li {

    float:left;       
    list-style-type:none;
    margin-bottom:-22px;
    text-decoration:none; !important
    cursor:pointer;

    }

    .onglet li:hover{
    text-decoration:none; !important
    cursor:pointer;
    }


    .onglet li a {
    display:block;
    text-decoration:none; !important
    list-style-type: none;
    cursor:pointer;
    }

    .onglet li a: hover {
    text-decoration:none;
    list-style-type:none;
    cursor:pointer;
    }


    .onglet_actif {
    background: url('http://host.image.files.free.fr/host/4bb9a30e7cb5bbarreonglets.png') no-repeat;
    width:100px;
    height:30px;
    cursor:pointer;
    }

    .onglet_nactif {
    background:url('http://host.image.files.free.fr/host/4bb9a2e34b25dbarreonglets.png') no-repeat;
    width:100px;
    height:30px;
    cursor:pointer;
    }

    je te préviens tout de suite, je n'ai quasiment pas travailler dessus donc il y a plein de truc qu'il faudra que je retouche mais au moins tu sais que avec ce code tu doit arriver à ça : http://narutoshinjidaiv2.keuf.net/index.htm

    après tu localise les endroit et tu change pour adapter à ton forum.
    désolé pour cette réponse très évasive mais je suis en vacances et je n'ai que très peut de temps pour te répondre !

    avatar
    fascicularia
    MasculinAge : 56Messages : 189

    Mar 13 Avr 2010 - 22:27

    Vic, évasif n'est pas le mot. L'aide que tu viens de me porter est tout simplement inespéré. Ton fofo est superbe et, la fluidité des onglets est tout simplement surprenante. UN GRAND MERCI POUR CETTE AIDE. cat�gories onglets - Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] 167871 (je te rassure, en tout honneur).
    Naekan
    Naekan
    MasculinAge : 29Messages : 21

    Jeu 15 Avr 2010 - 17:22

    Oula je comprends rien :s
    Aussi, à la place de NOM CATEGORIE je dois mettre le nom de categories, mais je peux pas le changer normalement ? Dans "Categories et Forum".
    Aussi, à chaque fois que je finis, ça met "La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas
    été ouverte." Je dois faire quoi ? Sad
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Jeu 15 Avr 2010 - 19:04

    déjà, non il faut vraiment que tu change la catégories à la place de NOM CATEGORIE car ça n'a aucun rapport avec le titre que tu donne dans catégorie et forum.
    bah ce que je te conseil, si ça marque ça c'est de re-copier coller car ça m'arrive aussi et généralement si mon code est bon, tu n'aura plus le problème. après si ça revient alors que c'était bon, c'est que tu aura enlever quelque chose par mégarde et il te faudra le remettre !

    voilà

    Naekan
    Naekan
    MasculinAge : 29Messages : 21

    Jeu 15 Avr 2010 - 20:41

    Nan, je comprends pas ca marche toujours pas, je mets tout ce qu'il faut pourtant.
    Les trucs avec les chiffres faut les mettre nan ?
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Ven 16 Avr 2010 - 11:31

    si tu veux tu me mp ton mdp et ton compte et je te le fait.

    Naekan
    Naekan
    MasculinAge : 29Messages : 21

    Ven 16 Avr 2010 - 20:59

    Okay, merci, ça va être plus facile pour moi.
    Apollo Justice
    Apollo Justice
    MasculinAge : 28Messages : 1166

    Mar 20 Avr 2010 - 10:32

    j'y arrive pas XD
    Voilà mon Code :
    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>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <div align="center"> <!--creation des onglets-->
    <ul class="onglet">
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/reglement-c1/"  class="onglet_actif" onMouseOver="change_cat(0);"
     id="cat_Règlement">Règlement</a></li>
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/reglement-c1/"  onMouseOver="change_cat(1);"
    id="cat_Présentations">Présentations</a></li>
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/fiches-techniques-c3/"  onMouseOver="change_cat(2);"
    id="cat_Fiches Techniques">Fiches Techniques</a></li>
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/royaume-de-fiore-c4/"  onMouseOver="change_cat(3);"
    id="cat_Royaume de Fiore">Royaume de Fiore</a></li>
    <li><a href="http://fairy-tail-star-rpg.forumactif.com/flood-c5/"  onMouseOver="change_cat(4);"
    id="cat_Flood">Flood</a></li>
    </ul>
    </div>
    <div class="cat_nactif">

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

    var compteur_cat = 0; // on cree une fonction qui donnera un nombre à notre categorie

    var anc_cat = 0; // on initialise la premiere ancienne categorie
    var nom_cat = new Array('Règlement','Présentations','Fiches Techniques','Royaume de Fiore','Flood'); //on cree un //tableau contenant l'ID de nos categories

    function change_cat(numero) // on cree une fonction qui fait changer nos categories
    {
     document.getElementById(nom_cat[anc_cat]).style.display = 'none';
    // l'ancienne categorie survolee redevient invisible
     document.getElementById(nom_cat[numero]).style.display = 'block';
    // la categorie survolee devient visible
     document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet';
    // l'ancien onglet redevient non actif
     document.getElementById('cat_'+nom_cat[numero]).className = 'onglet_actif'
    // le nouvel onglet survole devient actif
     anc_cat = nombre;
    // la nouvelle categorie devient l'ancienne categorie
    }

    function capture_cat() //on va classer nos categorie avec un nombre
    {
     document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '">');
    // si vous voulez que vos categories restent les même qu'avant remplacez cat_forum
    // par forumline !
    compteur_cat++;
    }

    //-->
    </script> 

    <script type="text/javascript"> // on lance la numerotation des categories
    <!--
    capture_cat()
    //-->
    </script>   
       </tr>
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Si quelqu'un pouvait m'Help S.V.P (je le dis pas souvent ça ><"). Ça serrait cool Wink
    Ah' ça marche pas parce que ça me fait :
    La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.




    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    Lys Draw
    Lys Draw
    FémininAge : 30Messages : 1993

    Mar 20 Avr 2010 - 12:08

    Je crois que tu n'as pas enlevé les notes hors CSS^^

    Par exemple:
    Code:
    function change_cat(numero) // on cree une fonction qui fait changer nos
     categories
    {
     document.getElementById(nom_cat[anc_cat]).style.display
     = 'none';
    // l'ancienne categorie survolee redevient invisible
     document.getElementById(nom_cat[numero]).style.display
     = 'block';
    // la categorie survolee devient visible
     document.getElementById('cat_'+nom_cat[anc_cat]).className
     = 'onglet';
    // l'ancien onglet redevient non actif
     document.getElementById('cat_'+nom_cat[numero]).className
     = 'onglet_actif'
    // le nouvel onglet survole devient actif
     anc_cat
     = nombre;
    // la nouvelle categorie devient l'ancienne categorie
    }

    Je pense que si tu enlèves déjà les explications du tuto, ça pourra peut-être t'aider =)
    Apollo Justice
    Apollo Justice
    MasculinAge : 28Messages : 1166

    Mar 20 Avr 2010 - 12:32

    Ça ne change rien =S




    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Mar 20 Avr 2010 - 12:42

    je vais te demander ton mdp et ton pseudo plus l'adresse de ton forum ^^
    si tu ne veux pas sache qu'a la fin de la semaine je sort un générateur de code
    qui permettra de générer le code sans fautes.

    donc voilà, maintenant à toi de choisir !

    Apollo Justice
    Apollo Justice
    MasculinAge : 28Messages : 1166

    Mar 20 Avr 2010 - 13:22

    Okay'
    Je t'envoie mon MDP ^^
    Toute façon, j'ai fais que la page d'accueil que j'ai save ^^'




    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Mar 20 Avr 2010 - 18:39

    EVENEMENT !
    bonne nouvelle :
    j'aimerais que vous testiez le programme que je viens d'inventé. il vous génère le code des onglets et vous n'avez plus qu'a le mettre dans les template, ce qui vous facilitera grandement la tâche ! de plus j'ai un peu améliorer les onglets dessus !
    mauvaise nouvelle :
    je l'ai tester uniquement sur 2 forum.
    sur les deux ça marche mais il peut toujours subsister des bugs.
    je vous demanderais donc de me faire part si vous en rencontrez !

    voila merci à vous et j'espère que ça pourra vous aider !

    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 10:08