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
    avatar
    Invité

    le Mer 1 Mai - 21: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 - 8:52, édité 1 fois
    avatar
    Liberto
    FémininAge : 26Messages : 50

    le Jeu 9 Mai - 16:39

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

    le Ven 10 Mai - 8:53

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

    le Jeu 16 Mai - 6:23

    Han cool! Very Happy

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

    le Mer 29 Mai - 16:19

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

    le Mar 8 Oct - 9:09

    Merci, je vais voir ça :3



    avatar
    So-chan
    FémininAge : 27Messages : 61

    le Mer 18 Déc - 12: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 ♥)
    avatar
    ketchup
    FémininAge : 19Messages : 11

    le Ven 31 Jan - 17:23

    merci beaucoup du partage *o*
    avatar
    Databar
    MasculinAge : 23Messages : 142

    le Jeu 20 Fév - 21:54

    merci
    avatar
    John Parker
    MasculinAge : 34Messages : 57

    le Ven 13 Juin - 21:49

    Merci beaucoup pour l'astuce !



    avatar
    Loukoum
    FémininAge : 23Messages : 814

    le Mar 17 Juin - 16:23

    Merci beaucoup pour le partage!
    avatar
    Times.
    FémininAge : 21Messages : 14

    le Sam 9 Aoû - 18:20

    merci
    avatar
    sica3
    MasculinAge : 43Messages : 135

    le Mar 2 Déc - 5:45

    thank's
    avatar
    Chanira
    FémininAge : 19Messages : 18

    le Jeu 29 Jan - 10:08

    Merci !
    avatar
    Inamio
    FémininAge : 24Messages : 218

    le Sam 28 Fév - 13:47

    Merci =)



    avatar
    pimslady
    FémininAge : 27Messages : 69

    le Ven 24 Avr - 20:41

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

    le Sam 9 Mai - 4:00

    Merci Very Happy



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

    le Mer 5 Aoû - 19:06

    merci
    avatar
    Kelalin
    FémininAge : 24Messages : 1516

    le Jeu 6 Aoû - 10:20

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

    le Jeu 7 Jan - 14:27

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

    le Mer 9 Mar - 17:55

    Merci !
    avatar
    The baily gossip
    FémininAge : 31Messages : 36

    le Mer 11 Mai - 19:36

    merci
    avatar
    Hige'
    FémininAge : 18Messages : 8

    le Dim 5 Juin - 15:30

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Sam 22 Juil - 18:40