Un slider de bas en haut

Eléphanteau du PHP | 37 Messages

04 janv. 2016, 18:55

Bonjour,

Je m’intéresse à une fonction jQuery pour afficher une DIV du bas vers la haut, tout à fait comme ce site : http://www.lac-annecy.com.
La partie qui m'intéresse est le, lien "Actualités", barre rouge vers le bas de l'écran, qui affiche une fenêtre de bas en haut, contenant des infos.
Je parviens à faire à peu près la même chose, en utilisant "slideToggle".

Voici le code :

Code : Tout sélectionner

<script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); }); }); </script> <div class="row actualites"> <div id="panel"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div> <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> </div>
Deux choses me chiffonnent là dedans :
Tout d'abord, le slider va du haut vers le bas (existe-t-il une fonction de type slideToggle("slow",[vers-le-haut]); ???
Ensuite, et là ce sera sans doute une autre fonction, le bouton "slide" reste ici fixe à l'écran, alors que pour le site d'Annecy, c'est le haut de la fenêtre qui sert de bouton... l'ensemble se déplace vers le haut au clic, puis reviens vers le bas au re-clic.

Ainsi, si par intuition, quelqu'un avait sous la main un exemple équivalent, mais plus simple à comprendre, je serais preneur !
Tous les exemples vus sur les forums utilisant "slideToggle" affichent des trucs de haut en bas. Jamais dans l'autre sens ; ou alors je ne tape vraiment pas les bons mots clés.

Donc je sèche.

Merci
-- Ecumastor

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

04 janv. 2016, 19:33

Bonjour,

Sur la page du site d'Annecy, fais Ctrl+i dans Firefox, puis clique sur l'icone en haut à gauche qui représente le curseur de souris noir.
Puis clic sur le menu "ACTUALITES", ça va te permettre d'inspecter cet élément pour voir comment ils ont fait.

Dans notre cas, le javascript qui réalise cette action est générée par un JS donc il faut que tu clic sur la petite icone grise "ev" qui va te montrer les évènements javascript sur cet élément.

Et là surprise, tu découvriras qu'ils ont le bon goût d'utiliser jquery comme toi et qu'ils appellent la fonction slideUp()

Une image pour te montrer comment on inspecte l'élément :
https://i.imgur.com/7bzDlI9.png
Quand tout le reste a échoué, lisez le mode d'emploi...