11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] [jQuery] slideUp et slideDown inversés

Modérateur
Bonjour,

La fonction slideUp() de jQuery permet de donner un effet de slide pour fermer un élément, cela se fait en général vers le haut. Pour slideDown, on a l'effet inverse (ouverture vers le bas). Je souhaiterais fermer un élément vers le bas et l'ouvrir vers le haut. Concrètement voici mon code html :
<article>[...]</article>

<aside>
      <header>
            <h3><span id="contact-toggle" title="Toggle the contact form">Nous contacter</span></h3>
      </header>
        
      <div id="contact">
        [...]
      </div>

</aside>
    
<footer>[...]</footer>


Ma css (ou plutôt la partie qui nous intéresse) :
aside h3 {
    margin: 0;
    padding: 0 5%;
    color: #FFF;
    font-size: 1.5em;
    border-bottom: rgb(89, 20, 44) solid 1px;
}

aside h3 span#contact-toggle {
    color: rgb(89, 20, 44);
    padding: 2px 1%;
    border-left: rgb(89, 20, 44) solid 5px;
}

#contact {
    position: relative;
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
    background: rgb(211, 211, 211);
    border-bottom: rgb(89, 20, 44) solid 1px;
}


Je voudrais donc qu'en cliquant sur le bouton #contact-toggle, la div #contact se ferme en descendant vers le footer et pour la rouvrir en remontant vers l'article (enrepoussant le h3 bien évidemment).
J'ai tenté plusieurs choses sans succès pour l'instant. J'ai finalement tenté avec la fonction .animate() qui semblait être la solution, mais l'animation ne se fait pas.
Le fiddle pour voir et proposer : https://jsfiddle.net/k5n8atw2/2/ (cliquer sur "Nous contacter")

Merci d'avance !
Modifié par jojaba (25 Mar 2015 - 20:45)
Bonjour.

Pour moi, ce que tu demandes est par logique impossible avec ton css actuel.

Le display:table empêche déjà l'animation, et ensuite le position:relative fait que ton élément est forcément "collé" vers le haut de ta page.
C'est normal, si tu veux réduire ton élément de haut en bas, l'espace ainsi créé va disparaître au fur et à mesure (je ne sais pas si je me fais bien comprendre), donc ton animation sera visuellement identique à une réduction de bas vers le haut.

Donc la seule solution pour moi, serait de positionner ton élément en absolute avec un positionnement en bottom, et par conséquent de définir une hauteur fixe à ton parent.

NB: j'ai pas réussi à forker ton travail sur jsFiddle, d'où la page codepen !
Administrateur
Si l'élément est positionné en absolu bottom alors il faudra inverser l'appel aux fonctions slide.
slideDown sera utilisé pour déployer vers le haut et slideUp pour remballer vers le bas. Sinon rien ne se produira. En réalité ces fonctions ne devraient pas contenir de notion up/down mais plutôt open/close.
Modérateur
OK SolidSnake, merci pour cette contribution.
C'est presque ce qu'il me faut (je m'arrangerai pour ne pas utiliser le table-layout) sauf que j'aimerais que le footer se retrouve près du h3 qui reste affiché.
J'ai tenté quelque chose en m'inspirant de ton exemple (Merci dew pour le rappel d'inversion Up et Down, je m'en souvenais bien, tu me l'avais appris Smiley cligne ).
Le résultat : https://jsfiddle.net/jojaba/vjff42wy/
Bon c'est pas top, mais c'est déjà ça hein Smiley cligne
L'idéal serait que lors de la fermeture du formulaire de contact (donc slideUp()), le h3 et ce qui est au-dessus "suive" la descente vers le footer (et par aux enfers Smiley langue ). Je ne sais pas si vous arrivez à comprendre ce que je veux dire...
Ce qui est un peu problématique aussi c'est que je dois fixer une hauteur pour l'élément parent (vous aurez constaté que j'ai créé un <div class="cont"> en position relative). Peut-être pourrai-je faire cela à la volée en modifiant après chargement de la page le DOM (je pense à ajouter ce div.cont et modifier la css de chaque élément), cela me permettrait de ne pas toucher à ma feuille de style actuel... Votre avis également là-dessus svp. Merci.
Modifié par jojaba (26 Mar 2015 - 13:21)
jojaba a écrit :
L'idéal serait que lors de la fermeture du formulaire de contact (donc slideUp()), le h3 et ce qui est au-dessus "suive" la descente vers le footer (et part aux enfers Smiley langue ).

Ah ben là, c'est pas la même, il faut revoir de nouveau l'architecture et le css tout le bordel. Smiley ravi
Modérateur
Aïe, recommencer tout ! Bof !
J'ai amélioré ce que j'ai fait en détectant d'abord la hauteur du cont et en changeant les css de cont et de #contact après le chargement de la page. Cela permet au script de s'adapter à toute hauteur de contenu à la volée (je ne suis plus obligé de fixer une fois pour toute la hauteur de cont.
Le fiddle mis à jour : http://jsfiddle.net/jojaba/vjff42wy/2/
Tu peux me donner une direction à prendre pour modifier tout afin d'obtenir ce que je voudrais (un petit laïus me suffirait je pense) ?
Ne peut-on pas tout simplement réduire la hauteur du .cont de manière progressive (avec un animate) ?
Modifié par jojaba (26 Mar 2015 - 15:42)
Déjà qu'est-ce que tu appelles "le h3 et ce qui est au-dessus" ?
Et le footer il resterait positionné comme ça ? Où il sera en position:fixed en bas de la page, ou autre... ?
Modérateur
Pour faire simple, il faudait que la hauteur du conteneur du formulaire soit ramenée à 0px (avec une jolie transition), ce qui rapprocherait le titre h3 (qui est en fait également le déclencheur) du footer.
Euh... mais, je... euh...

C'est totalement l'opposé de ce que tu voulais faire au début, et donc tout ton code revient à faire à la fin un slide normal ! Smiley biggol
Modifié par SolidSnake (26 Mar 2015 - 17:03)
Modérateur
Arggggh ! Smiley biggol
A force de se triturer les méninges, on arrive à mettre en oeuvre des procédures complexes pour des choses ultra-simples ! J'avais pourtant essayé au début, et ça ne fonctionnait pas (c'était mon table-layout je suppose).
En tout cas, merci pour ton soutien technique et désolé de t'avoir fait perdre du temps.
Sujet clos
Aller à