déplacement div

[eric84]

Bonjour

J'ai un slider consitué d'un curseur carré susceptible de se déplacer sur un axe horizontal (grâce un cliquer-tirer), pour cela j'ai utilisé un plugin car je n'arrivais pas à le faire autrement. Mon problème est le suivant :

Je cherche un moyen (sans passer par un plugin) de déplacer une div donnée en fonction du déplacement du curseur carré, en gros que leur mouvement soit liés en temps réel. (quel que soit la fonction mathématique qui relie leurs coordonnées, ce n'est pas le plus important, après j'adapte...)

ya t-il un moyen en jquery de faire cela ?

Merci

(je suis débutant)

[captain_torche]

A priori oui, mais ça va dépendre du plugin que tu as utilisé et de quel HTML il génère.

Si derrière il y a un champ input, il suffit de détecter les changements dans ce champ pour déplacer le div, avec quelque chose du genre :

$('#ton_input').change(function() {
//	Le code qui déplace le div
});

Avec plus d'infos sur le plugin en question, ça serait plus simple de répondre

[Kulgar]

Côté mathématique, ça ne va pas cherche bien loin non plus

C'est simple tu as l'axe des abscisses (les X donc), ton curseur peut se déplacer d'un point A à un point B (de xa à xb).

Ton image c'est pareil, elle se déplace d'un point C à un point D (xc à xd).

Tu connais ces coordonnées puisque c'est toi qui les définis. Pour récupérer la position de ton élément, en JQuery tu as la fonction .position() qui renvoie un objet contenant les propriétés top et left.
/>http://api.jquery.com/position/

Le plus simple est de raisonner en pourcentage.

Considérant x la position du curseur et X celle du div synchronisé, le calcul n'est pas compliqué, tu récupères où est ton curseur sur sa barre en % (qu'on écrit Y):

Y = (xb - x) / (xb - xa)

Et ensuite tu peux calculer où doit être ton div:

X = (xc - xd) * Y + xd

Après il ne te reste plus qu'à modifier la position du div dans la fonction "change" de captain_torche à l'aide de:

$(this).css("left", X)
/>http://api.jquery.com/css/

Je n'ai pas testé le code mais ça te donne l'idée.

Pour être bien sûr que les déplacements sont synchro je te conseille d'afficher quelque part la position sur l'axe des x en % de tes éléments vis à vis des abscisses min et max.

Par contre fais bien attention que "position" retourne la position de ton élément relativement à son parent.

Si tu veux la position absolue (par rapport au document) c'est .offset().

[eric84]

A priori oui, mais ça va dépendre du plugin que tu as utilisé et de quel HTML il génère.

Si derrière il y a un champ input, il suffit de détecter les changements dans ce champ pour déplacer le div, avec quelque chose du genre :

$('#ton_input').change(function() {
//	Le code qui déplace le div
});

Avec plus d'infos sur le plugin en question, ça serait plus simple de répondre

Merci pour ta réponse. Je crois finalement que je vais changer mon fusil d'épaule car je ne comprends pas la plupart des commandes du plugin, du coup je ne suis pas maître de mon code; je vais essayer de faire moi même un slider, puis je reviendrai ensuite.

Merci en tout cas

[eric84]

Salut Kulgar

Merci pour ta réponse !

J'ai pigé ta formule mathématique, c'est de la proportionnalité en fait. Pigé aussi le transfert de coordonnées du curseur à la div liée;

Maintenant, étant donné que je souhaite déplacer mon curseur d'un point A à un point B d'abscisse xa et xb données (même ordonnées) et ce sans passer par un plugin que je ne maîtrise pas, je voudrais trouver un moyen (je connais juste un peu le javascript et jquery) de déplacer mon curseur par un cliquer-tirer. y-a t-il un une commande dans ces langages qui comprenne ce mouvement de la souris ? Merci encore

Modifié 8 Avril 2012 par eric84

[Kulgar]

Malheureusement tu n'as pas 36 solutions que de mettre les mains dans le cambouis et de chercher les méthodes adéquates. '

Mais je peux te donner l'idée générale en JQuery d'un "Drag and Drop".

En gros il faut :

Détecter quand l'utilisateur clic sur ton curseur, ça se fait simplement grâce à "mousedown": http://api.jquery.com/mousedown/

Détecter quand l'utilisateur relâche la souris ou sort la souris de la surface du curseur afin de "relâcher" le curseur, pour ça tu as : mouseout et mouseup. Tu peux après peaufiner à ce niveau.

Détecter le mouvement de la souris lorsque l'utilisateur est bien en train de cliquer sur le curseur, pour ça tu as "mousemove". Ne pas oublier de "desactiver" l'écouteur d'événement "mousemove" lorsque l'utilisateur relâche le curseur (pour plus de propreté).

Récupérer les coordonnées X / Y (en fait là juste X puisque tu te déplaces selon l'axe des X) de la souris pour pouvoir les réutiliser pour bouger le curseur, moi j'utiliserais event.pageX et event.pageY lorsque mousemove est déclenché.

Et voilà l'idée générale du drag and drop.

Ce sont toutes des fonctions JQuery, je te conseille de les regarder de plus près. Je pense aussi qu'il doit y avoir un grand nombre de tutoriel pour faire un Drag & Drop en JQuery, ça doit pouvoir se trouver très rapidement sous Google, c'est le genre de fonctionnalités que tout le monde souhaite programmer.

Je t'avouerais que je n'en ai jamais fait moi-même en JQuery (mais je vais certainement bientôt en faire un), mais je suis tout de même très familier du concept grâce à mes compétences de développeur Flash. Donc si tu as des questions, n'hésite pas.

[eric84]

Merci Kulgar pour ces précisions.

Avec de l'aide d'un autre forummeur, j'ai en effet commencé à créer un slider avec les mouseup, mousemove et mouse up. J'y suis presque !

Encore un détail que je n'arrive pas à régler : En fait, je veux faire un portfolio horizontal (dont la longueur dépasse la longueur de l'écran) qui puisse être actionné par une tirette (le slider qui a une longueur fixe de 500px, c'est le xb-xa dont tu parlais. Maintenant il me faut récupérer la longueur de la div contenant les photos ( c'est ton xd-xc) qui sera contrôlée par le slider. Cette longueur est variable suivant le nombre de photos que cette div contient. J'ai voulu récupérer sa width par un :

$("#div1").whidth() en jquery ou un document.getElementById('div1').offsetWidth en javascript. Dans les deux cas j'obtiens 40px, alors que la div a une width de 4000px environ !! En fait je crois comprendre qu'il ne compte que les quelques pixels entre les photos et qu'il ignore la longueur de photos !

Aurais tu une idée ?

Merci

[Kulgar]

J'imagine que tu as des balises img donc pour les photos dans ton #div1.

Ce que je fais c'est que je calculerais directement la largeur.

En faisant un truc du genre :

var total_width = 0;

$("#div1 img").each(function(i){
  total_width += $(this).width(); // Récupère la largeur de chaque image et l'ajoute à total_width
  total_width += $(this).css('marginRight'); // Récupère la marge à droite de chaque image et l'ajoute à total width
});

En faisant ça pour chaque propriété qui va bien (je ne connais pas tes padding / margin ) tu devrais finir par obtenir la largeur réelle de ton div.

Sinon, je pense que $("#div1").width() te fournit la largeur du div si les images ne s'affichaient pas. Ce qui est normal, puisque les images se chargent dynamiquement et la largeur du div est donc mise à jour dynamiquement au cours de ce chargement. Et, par défaut, le javascript s'éxécute dès lors que la page HTML est chargée et affichée, donc avant le chargement des images.

D'ailleurs mon code ne fonctionne que si tu as bien spécifié une largeur dans le CSS de tes balises "img" de ton div (enfin me semble, j'ai pas testé).

Si tes photos ont une largeur fixe et qu'elle est égale entre toutes les photos tu peux aussi directement additionner cette largeur à la place de $(this).width().

J'ai pas testé le code, il y a donc peut-être 2/3 trucs à modifier mais tu as l'idée.

Sinon tu peux aussi utiliser .ready(): http://api.jquery.com/ready/

C'est un événement exécuté dès lors que toutes les images de la page ont été chargées.

Je pense qu'au final c'est ce qu'utilise la plupart des sliders en ligne et le temps que les images se chargent ils mettent un preloader.

[eric84]

Oui j'ai des balises img dans la div. en fait j'y suis arrivé, à vrai dire je ne sais pas trop ce que j'ai changé, peut être la position d'une variable ou d'une fonction, mais en tout cas ça marche maintenant. Je retiens quand même ton code qui pourra ma resservir. J'aurais pu effectivement multiplier la largeur des photos par leur nombre mais malheureusement elles n'ont pas la même width, juste la même height.

Merci encore pour ton aide