11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] [jQuery] Each & drupal

Bonjour,

Tout d'abord, je voulais vous remercier d'avoir par le passé répondu à mes questions. J'ai pu énormément apprendre grace a votre communauté! Merci!

Je vais devoir faire appel a vos connaissance une nouvelle fois.

Je n'arrive pas a faire une boucle "each" avec mon script. Voici deux des éléments sur une 20aine qui devrais pouvoir mis en boucle.

   jQuery(".field-name-field-p-st-txt-paysage-1").hide();
   jQuery(".field-name-field-p-st-img-paysage-1").mousemove(function(e){
      jQuery(".field-name-field-p-st-txt-paysage-1").show();
      var sxPointer = e.pageX - jQuery(this).offset().left - parseInt(jQuery(this).css('padding-left'));
      var syPointer = e.pageY - jQuery(this).offset().top - parseInt(jQuery(this).css('padding-top'));

      jQuery(".field-name-field-p-st-txt-paysage-1").css({
         top: (syPointer+220) + "px",
         left: (sxPointer+250) + "px"
      });
   });
   
   jQuery(".field-name-field-p-st-img-paysage-1").mouseout(function(e){
      jQuery(".field-name-field-p-st-txt-paysage-1").hide();
   });
	
   jQuery(".field-name-field-p-st-txt-paysage-2").hide();
   jQuery(".field-name-field-p-st-img-paysage-2").mousemove(function(e){
      jQuery(".field-name-field-p-st-txt-paysage-2").show();
      var sxPointer = e.pageX - jQuery(this).offset().left - parseInt(jQuery(this).css('padding-left'));
      var syPointer = e.pageY - jQuery(this).offset().top - parseInt(jQuery(this).css('padding-top'));

      jQuery(".field-name-field-p-st-txt-paysage-2").css({
         top: (syPointer+715) + "px",
         left: (sxPointer+250) + "px"
      });
   });
   
   jQuery(".field-name-field-p-st-img-paysage-2").mouseout(function(e){
      jQuery(".field-name-field-p-st-txt-paysage-2").hide();
   });


Le code actuel fonctionne mais il est lourd et surtout il me limite à images aux dimensions fixes.

Comment pourrais-je améliorer mon script pour qu'il trouve la largeur/hauteur de l'image insérée, puis en fonction, placer la boite d'information en fonction du top de la page et que le script ne soit plus qu'une boucle qui va chercher les différents éléments ?

J'espère que je suis assez clair. Si vous avez des questions, je vais tacher d'y répondre rapidement.

S'il vous faut le site pour y voir plus clair: c'est par ici
et la mon script

Bien cordialement
Charly
Modifié par Chum (31 May 2012 - 09:38)
Salut,

j'ai jeter un coup d'oeil a ton balisage html, tu pourrais itérer sur les div ayant une class "field-type-image" et pour la legende prendre la div suivante. Y a surement mieux mais vite fait j'ai vu que ça. Après il n'y a plus qu'a reproduire le pattern a chaque passage. Automatisé, ça pourrait donner quelque chose comme ça:


jQuery('.field-type-image:not(.field-name-field-p-st-bg-paysage)').each(function () {
   var that = jQuery(this),
       divLabel = that.next().hide(),
       offsetLeft = that.offset().left;

   that.mousemove(function(e) {
      var sxPointer = e.pageX - offsetLeft - parseInt(divLabel.css('padding-left'), 10),
          syPointer = e.pageY - parseInt(divLabel.css('padding-top'), 10);

      divLabel.css({
         top: (syPointer+170) + "px",
         left: (sxPointer+250) + "px"
      });
   }).mouseout(function(e){
      divLabel.hide();
   });

});


Y a surement d'autres optimisation a prendre, j'ai vite fait testé ça a l'air ok, je te laisse le soin de peaufiner mais c'est la voie que je suivrais.
Merci beaucoup !

J'ai pu un peu mieux saisir la "logique" a prendre pour cette boucle.
Je l'ai testé vite fait. Je vais prendre bien plus de temps ces prochains jours. Je te remercie déjà d'avance pour l'aide précieuse que tu m'as apporté.

Je laisse le sujet ouvert au cas ou je tomberais sur une coquille.
Mais il est déjà grandement résolu.

Merci martint !
Finalement et après quelques documentation sur certains passages (parseInt et compagnie) j'ai compris comment tu as pensé ce code.

Merci beaucoup !

Sujet résolu !

Cordialement
Charly
Sujet clos
Aller à