[jQuery] - Stopper le changement de valeur au clique

Laznet
Javascript

Bonsoir,

En faite je suis en train de créer un menu qui se déploie en maintenant le clique.
Le début du menu se trouve sur le côté gauche de l'écran. Quand on maintient le clique dessus je fais en sorte d'augmenter sa largeur en fonction du déplacement de la souris.
J'ai fais en sorte de limiter la largeur avec maxwidth en css.

Mais j'aimerais savoir comment lui dire de s'arrêter on atteint cette limite (par exemple avec un clique)
ou avant (par exemple lui dire que quand il atteint 200 px et que j'ai cliqué il arrête de faire changer la valeur "width")
car il suit le mouvement de ma souris mais ne s'arrête pas.

Donc se déplie > se replie > se déplie etc...

Auriez-vous une idée ?

7 réponses

SLK

Salut,

J'ai fais en sorte de limiter la largeur avec maxwidth en css.
Ça doit venir de là.
Je ne pense pas que le CSS et le javascript communiquent.
C'est dans le javascript, pendant que tu maintient le clic et que tu agrandi la div,
que tu dois mettre cette contrainte de largeur maximale.

Si ça ne résous pas ton problème,
montre nous le code que tu as déjà fais pour voir.

Laznet
Auteur

Bonjour,

Donc si je comprend bien je devrais lui dire que quand il atteint tel largeur il doit arrêter de grossir..
Mais ma question est justement comment lui dire "Arrête d'augmenter la largeur" ?

SLK

Ah,
moi je ne sais pas, il va falloir chercher.

En jQuery,
je commencerai par essayer un truc du style :

var width = 0;

// pendant le maintien du clic, et déplacement souri
    $width = $(' this ').css(width);
    if ($width >= 200)
    {
        break;
    }

C'est une amorce...

EDIT :
Tiens d'ailleurs j'y pense...
Je ne sais pas si tu as des contraintes qui font que tu es OBLIGÉ d'agrandir ton menu de cette façon (au maintient du clic + déplacement souri), mais si tu n'es pas obligé, tu pourrai te passer du javascript, et utiliser juste le CSS avec un :hover, et transition sur width par exemple.

un truc dans ce genre :

#menu {
    width: 5px;
    transition: width 1s;
}

#menu:hover {
     width: 200px;
}
Laznet
Auteur

Je comprend que tu ne veux / peux pas me donner la solution (c'est normal) ^^, mais alors une dernière question c'est quoi ce "Break" ?
Je ne trouve rien sur la doc jQuery ^^.

EDIT :

Je ne suis pas obligé ^^, c'est juste un défi perso de réaliser un menu comme ça :D
Histoire d'apprendre jQuery (oui on est en 2016 et je ne connais pas jQuery).

EDIT 2 :
Si, j'ai remarqué voilà pourquoi j'ai écris le premier edit ^^

SLK

Je ne connais pas la réponse surtout ^^

Le break, j'avais vu ça pour sortir d'une boucle,
http://www.w3schools.com/js/js_break.asp
je me suis demandé si ça pouvait fonctionner pour "sortir" de ta fonction,
j'en sais rien du tout, à tester.

PS : je ne sais pas si tu as pu le remarquer, mais j'étais en train d'éditer mon post précédent pendant que tu as répondu. (pour le CSS).

SLK

Ah ouais c'est super propre !
Bien vu.

je crois qu'il faut rajouter mouseleave

$(".menu").mousedown(function(event) {
    pressed = true;
    startWidth = $(this).width();
    startClientX = event.clientX;
}).mousemove(function(event) {
    if (pressed) {
        $(this).width(Math.max(50, Math.min(300, startWidth + (event.clientX - startClientX))));
    }
}).mouseup(function(event) {
    pressed = false;
}).mouseleave(function(event) {
    pressed = false;
});
SLK

Ah ben en plus ça répond à une question que je me posais :
Je ne pense pas que le CSS et le javascript communiquent.
Apparemment si.
Merci Advancid.

Mais je ne comprend pas pourquoi tu as rajouté un wrapper,
ça fonctionnait très bien sans.