Bonjour !

J'ai une question concernant ce tuto : http://www.css-actif.com/t9431-afficher-cacher-les-infos-du-profil .

J'ai réussi à installer correctement la fonction "Afficher/Cacher" , mais es-ce que c'est possible de faire en sorte que quand on clique sur le bouton "En savoir +" le profil s'affiche en se déroulant ? :3

( Moi , enquiquineuse ? Jamais ! O: )

Voilà ,
Bonne journée ^^

Bonjour,

C'est possible, mais je ne sais pas comment faire. Il faudrait sans doute rajouter une pincée de jquery pour que ça marche, mais mes connaissances en javascript sont insuffisantes. Faudrait demander à l'auteur du tuto, ou bien à Espeon XD

Ben au moins je sais que c'est possible o/
Merci pour ta réponse ^^

Bonsoir,

Effectivement c'est faisable (facilement) en jQuery (merveilleuse librairie que celle-ci).
De plus, elle est nativement chargée dans Forumactif.

Je me penche sur la question demain et vous explique comment ça fonctionne (et comment faire !) =)

Bonne nuit !

Bonjour ^^

D'accord, merci pour ta réponse ^^

Bonjour ! =)

Oui , ma question est toujours d'actualité ^^

Bonne journée ,

Désolé de mon énorme retard, j'ai relu un peu le tutoriel pour voir. En fait, il y a deux options selon moi :

• Soit de le faire en CSS avec les propriétés d'animation, mais ça pose des soucis de compatibilité
  
• Soit de le faire en Javascript (avec jQuery effectivement) mais il faudrait modifier un peu le code du coup

Une préférence ?

C'est pas grave , ce n'est pas urgent ^o^

Je préfère le faire en Javascript , puisque visiblement c'est la méthode la plus efficace , et ça e me dérange pas de modifier le code . ^^

Il a oublié de préciser que le JQuery c'est aussi plus lourd au chargement XD

C'est pas grave , ^^

'Christa a écrit:

Il a oublié de préciser que le JQuery c'est aussi plus lourd au chargement XD

C'est vrai. Cela dit, vu la taille du code nécessaire pour appliquer un effet de scroll down/up sur un élément, ça sera négligeable (et comme la librairie est chargée nativement, pas de soucis de ce côté là).

Dès que j'ai un peu de temps devant moi je t'explique le principe de fonctionnement pour que tu puisse le mettre en place dans ton forum

D'accord =)

Bonjour,

Alors avec du retard, voici qui devrait fonctionner, je vais t'expliquer c'est assez simple :

• Tout d'abord, il s'agit de modifier le HTML pour retirer le Javascript qui était placé dans la balise

Code:

<div class="bouton-profil">En savoir plus</div>
<div class="profil-cache" style="display: none">
   <!-- 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>

• Ensuite, il s'agit de rajouter ce script (dans un fichier à part ou bien dans le header, entre 2 balises script, en prenant garde de ne pas le charger avant la librairie jQuery).

Code:

$(function(){$('.bouton-profil').click(function(){var a=$(this).next();a.slideToggle('slow');});});

Ce code est assez simple :

• $('.bouton-profil').click définit la fonction que l'on va appliquer lorsqu'il y aura un click sur un élément de classe bouton-profil
  
• var a=$(this).next() j'ai pris le temps de séparer pour bien montrer que je sélectionne ici l'élément qui suit l'élément cliqué (c'était le rôle de nextSibling dans l'ancien code intégré au HTML d'ailleurs).
  
• a.slideToggle('slow') j'applique l'effet slideToggle qui fera apparaître l'élément (lentement car j'ai fixé le paramètre à slow) lorsqu'il est caché et vice-versa, fonctionnalité de la librairie jQuery qui permet de rendre l'effet désiré sans plus de problème

Si tu as un quelconque problème (code qui ne fonctionnerait pas, difficulté à mettre le script dans ton code, etc.) n'hésites pas.
Tiens moi au courant également si ça fonctionne sans accro (chez moi oui en tout cas ).


Bonne journée !

Merci beaucoup , ça fonctionne parfaitement o/

Hello Lunia, ton problème est-il définitivement résolu ?

Hello ,

Oui mon problème est résolu , merci encore ^^

OK je classe.