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 du moment : -26%
369€ PC Portable HP 15-fd0064nf – ...
Voir le deal
369.99 €

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

    Anonymous
    Invité

    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 :

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

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


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

    Jeu 9 Mai 2013 - 18:39

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

    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
    Miss_Karma
    FémininAge : 34Messages : 58

    Jeu 16 Mai 2013 - 8:23

    Han cool! Very Happy

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

    Mer 29 Mai 2013 - 18:19

    Trop cool ! Merci Very Happy
    Ab0utxMe
    Ab0utxMe
    FémininAge : 29Messages : 186

    Mar 8 Oct 2013 - 11:09

    Merci, je vais voir ça :3



    [Template + CSS + JS] Infos de profil en spoiler 878302signaturevegeta
    So-chan
    So-chan
    FémininAge : 34Messages : 61

    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
    ketchup
    FémininAge : 26Messages : 11

    Ven 31 Jan 2014 - 18:23

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

    Jeu 20 Fév 2014 - 22:54

    merci
    John Parker
    John Parker
    MasculinAge : 42Messages : 58

    Ven 13 Juin 2014 - 23:49

    Merci beaucoup pour l'astuce !



    [Template + CSS + JS] Infos de profil en spoiler Ange_s10
    Loukoum
    Loukoum
    FémininAge : 30Messages : 1497

    Mar 17 Juin 2014 - 18:23

    Merci beaucoup pour le partage!



    Times.
    Times.
    FémininAge : 28Messages : 14

    Sam 9 Aoû 2014 - 20:20

    merci
    sica3
    sica3
    MasculinAge : 51Messages : 135

    Mar 2 Déc 2014 - 6:45

    thank's
    Chanira
    Chanira
    FémininAge : 27Messages : 18

    Jeu 29 Jan 2015 - 11:08

    Merci !
    Inamio
    Inamio
    FémininAge : 32Messages : 252

    Sam 28 Fév 2015 - 14:47

    Merci =)



    [Template + CSS + JS] Infos de profil en spoiler 2014_p10
    pimslady
    pimslady
    FémininAge : 35Messages : 71

    Ven 24 Avr 2015 - 22:41

    merci !!!!
    avatar
    Lupa
    FémininAge : 28Messages : 183

    Sam 9 Mai 2015 - 6:00

    Merci Very Happy



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

    Mer 5 Aoû 2015 - 21:06

    merci
    Anonymous
    Invité

    Jeu 6 Aoû 2015 - 12:20

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

    Jeu 7 Jan 2016 - 15:27

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

    Mer 9 Mar 2016 - 18:55

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

    Mer 11 Mai 2016 - 21:36

    merci
    Hige'
    Hige'
    FémininAge : 25Messages : 8

    Dim 5 Juin 2016 - 17:30

    Merci !
    Deed01
    Deed01
    MasculinAge : 46Messages : 343

    Sam 16 Sep 2017 - 18:33

    merci Very Happy
    jelayde
    jelayde
    MasculinAge : 36Messages : 18

    Jeu 16 Nov 2017 - 22:50

    très bon tuto et code simple à utiliser merci bien
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 12:38