AccueilFAQRechercherMembresGroupesS'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.


    [Template + CSS + JS] Infos de profil en spoiler

    Partagez
    Invité

    le Mer 1 Mai 2013 - 23:31

    Bonjour !

    Alors je sais que ça existe déjà, mais je viens proposer ici une autre version des spoilers qui permettent d'afficher / masquer les infos de profil situées sous l'avatar.

    Il y a deux variantes, comparé à ce que j'ai pu voir :
    - Aucun javascript ou CSS n'est écrit en dur dans le template, seulement des div avec leurs classes
    - Lorsque le texte masqué est affiché, cliquer celui-ci ne déclenche pas la fermeture. Il faut cliquer sur le même texte qui a permis l'ouverture pour le refermer

    I. Le template
    Dans Affichage -> (Templates) Général -> viewtopic_body, vers les lignes 130 et quelques (cela varie)

    Remplacer
    Code:
    <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
    <!-- END profile_field -->
     {postrow.displayed.POSTER_RPG}
    Par
    Code:
    <div class="my_spoiler"><div class="titre_spoiler">Afficher</div><div class="contenu_spoiler">
     <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
    <!-- END profile_field -->
     {postrow.displayed.POSTER_RPG}
     </div></div>
    (ne pas oublier de publier le template une fois celui-ci modifié ^^)
    Ceux qui ont déjà joué à modifier les spoilers dans des posts de forum auront reconnu la structure, j'ai repris exactement la même. Un "cadre" de spoiler, qui contient un titre cliquable et le contenu masqué. Il fonctionnera exactement de la même façon, dès qu'on clique sur le titre, le contenu s'affiche. Un nouveau clic sur le titre et le contenu disparaît.

    II. Le Javascript
    Dans Modules (HTML & JAVASCRIPT) -> Gestion des codes Javascript, créer une nouvelle feuille javascript, lui donner un nom et l'activer sur toutes les pages (uniquement "Dans les sujets" fonctionne aussi, mais l'activer partout est un peu mieux, car si on reprend la structure du spoiler ailleurs (genre sur la PA), le script sera fonctionnel ^^).
    Code:
    window.addEventListener("load", onload, false);
    function onload() {
       $(".my_spoiler").children(".titre_spoiler").click(function() {
          if($(this).parent(".my_spoiler").children(".contenu_spoiler").css("display") == "none") {
             $(this).parent(".my_spoiler").children(".contenu_spoiler").css("display","block");
             $(this).text("Masquer");
          } else {
             $(this).parent(".my_spoiler").children(".contenu_spoiler").css("display","none");
             $(this).text("Afficher");
          }
       });
    }
    Vous constaterez qu'il ne brille pas de par son côté compressé xD ! Je suis une quiche en Js et jQuery, j'ai donc fait ça à tâtons (j'étais pas chaud pour jouer avec un opérateur ternaire, cela se voit je pense xD) ! (d'ailleurs si quelqu'un se sent de l'optimiser, je dis pas non ^^) Si vous ne voulez pas que le texte "titre" du spoiler ne change lorsqu'on clique dessus, retirez les deux appels à la fonction text() et ce sera bon ^^ ! (le script ne compare pas le texte pour en déduire si le spoiler est ouvert ou non, ça n'affectera en rien le fonctionnement =)

    III. Le CSS
    Dans Afichage -> Couleurs -> Feuille de Style CSS, ajouter
    Code:
    .my_spoiler{

    }

    .my_spoiler .titre_spoiler{
    cursor:pointer;
      text-align:center;
      padding:5px;
      font-size:12px;
    }

    .my_spoiler .contenu_spoiler {
    display:none;
    }
    J'ai mis le grand minimum, mais il y a les 3 classes importantes. Vous pouvez ensuite le personnaliser comme vous voulez, bien entendu ^^

    rendu :

    Cliquer sur le texte "Afficher" révèle la partie cachée.
    Une fois affiché, cliquer sur le contenu ne le cache pas de nouveau, mais appuyer sur "Masquer" cache de nouveau le texte ^^


    Pas de Js dans le code source ^^"

    Je crois que c'est à peu près tout, si vous avez des critiques constructives, des suggestions ou du Js plus efficient à me proposer, je suis à l'écoute !

    Voilou :)


    Dernière édition par Alec Kuro le Ven 10 Mai 2013 - 10:52, édité 1 fois
    Liberto
    FémininAge : 25Messages : 50

    le Jeu 9 Mai 2013 - 18:39

    Est-ce qu'on pourrait avoir un visuel du résultat ? =)
    Invité

    le Ven 10 Mai 2013 - 10:53

    C'est ajouté =)
    S'il y a besoin de plus de screens, y'a pas de soucis =)
    Miss_Karma
    FémininAge : 26Messages : 58

    le Jeu 16 Mai 2013 - 8:23

    Han cool! Very Happy

    Merci :3
    Sorako
    FémininAge : 19Messages : 94

    le Mer 29 Mai 2013 - 18:19

    Trop cool ! Merci Very Happy
    Ab0utxMe
    FémininAge : 21Messages : 182

    le Mar 8 Oct 2013 - 11:09

    Merci, je vais voir ça :3



    So-chan
    FémininAge : 26Messages : 53

    le Mer 18 Déc 2013 - 13:45

    Testé et approuvé, merci pour cette astuce ! L'effet fait plus "propre" que le profil de base tout en étant simple. Merci d'avoir partagé ! (et évidemment je te crédite, c'est la moindre des choses ♥)
    ketchup
    FémininAge : 18Messages : 11

    le Ven 31 Jan 2014 - 18:23

    merci beaucoup du partage *o*
    Databar
    MasculinAge : 22Messages : 142

    le Jeu 20 Fév 2014 - 22:54

    merci
    John Parker
    MasculinAge : 34Messages : 57

    le Ven 13 Juin 2014 - 23:49

    Merci beaucoup pour l'astuce !



    Loukoum
    FémininAge : 23Messages : 811

    le Mar 17 Juin 2014 - 18:23

    Merci beaucoup pour le partage!




    Times.
    FémininAge : 20Messages : 14

    le Sam 9 Aoû 2014 - 20:20

    merci
    sica3
    MasculinAge : 43Messages : 135

    le Mar 2 Déc 2014 - 6:45

    thank's
    Chanira
    FémininAge : 19Messages : 16

    le Jeu 29 Jan 2015 - 11:08

    Merci !
    Inamio
    FémininAge : 24Messages : 209

    le Sam 28 Fév 2015 - 14:47

    Merci =)



    pimslady
    FémininAge : 27Messages : 69

    le Ven 24 Avr 2015 - 22:41

    merci !!!!
    Lupa
    FémininAge : 20Messages : 166

    le Sam 9 Mai 2015 - 6:00

    Merci Very Happy



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    EAVENN
    FémininAge : 20Messages : 150

    le Mer 5 Aoû 2015 - 21:06

    merci
    Kelalin
    FémininAge : 24Messages : 1403

    le Jeu 6 Aoû 2015 - 12:20

    Merci (((o(*゚▽゚*)o)))
    Invité

    le Jeu 7 Jan 2016 - 15:27

    Intéressant je pense que ça va m'aider à personnaliser ma variante merci :)
    Nessaleth
    FémininAge : 25Messages : 52

    le Mer 9 Mar 2016 - 18:55

    Merci !
    The baily gossip
    FémininAge : 30Messages : 36

    le Mer 11 Mai 2016 - 21:36

    merci
    Hige'
    FémininAge : 17Messages : 6

    le Dim 5 Juin 2016 - 17:30

    Merci !
    Contenu sponsorisé

    Aujourd'hui à 11:14


      La date/heure actuelle est Mar 6 Déc 2016 - 11:14