[Résolu] [HELP?]Passer de Javascript à Jquery ce bout de code

Merci pour ton aide!
ce qui me manquait : la manière d'utiliser $(this)...
j'avais à peu près tout trouvé pour le reste.

voici donc le code une fois finalisé :

//Lorsque la page est chargée on déclenche la fonction
$(window).load(function(){  ///aa
  $(function(){   ///bb
	
	//Au scroll dans la fenetre on déclenche la fonction
	$(window).scroll(   ///cc
	  function () {  ///dd    
	  
	  //on est obligé de faire une variable top qui va permettre à tous les navigateurs de comprendre le scrollTop
	  var top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; 
	  //récupérer la hauteur de la fenêtre
	  var windowHeight = $(window).height();

//###### ICI LE BOUT DE CODE REECRIT #######///	  
	  //pour chaque div .image trouvée dans le document
	  $('.image').each(function(){ ///ee  
	  
		  //si le haut de la div .image est au minimum au centre de l'écran
		  if (top >= $(this).offset().top - windowHeight + $(this).height()/1){ 
			$(this).children('img').css('margin-right', '0%');
		  } else { // le contraire de la manip précédente
			$(this).children('img').css('margin-right', '-100%');
		  }
		
		});  ///ee
//###########################################//
	  }  ///dd
	);	///cc
  }); ///bb
}); ///aa

au passage, autant donner la manip complète, ça aidera peut être quelqu'un!
Merci beaucoup et bon week end

Salut,

Je viens un peu après la bataille. C'est pour dire que le code que je lis, c'est du grand n'importe quoi !

2 instructions qui veulent dire la même chose et une boucle inutile.

1. Pour répondre au souci initial :

$('.image img').css('right',0);

2. Soit tu utilises :

window.addEventListener('load',function(){
//etc.
});

soit

window.onload = function(){

}

soit pour jQuery :

$(function(){
//etc.
});

mais pas ce genre de chose :

$(window).load(function(){
  $(function(){
//etc. 

Bonsoir,

Désolé si j'ai été un peu dur. Je suis pas tous les jours en forme. Là où je voulais en venir, une méthode each est intéressante dans le cas où on veut traiter au cas par cas un élément. Suivant l'énoncé du sujet :

Passer de Javascript à Jquery ce bout de code :

var image = document.getElementsByClassName("image");
for (var j = 0; j < image.length; j++) {
var img = image[j].getElementsByTagName("img");
for (var i = 0; i < img.length; i++) {
img.style.marginRight = "0%";
}
}

En JQuery, ce code donne :

$('.image img').css('margin-right',0);

Par contre, je n'ai pas lu tout ton message. Je n'avais pas fait attention à ceci :

Claire39 a écrit :
je voudrais qu'il arrive quelque chose aux images quand la div arrive au milieu de l'écran.
j'y arrive bien tant que j'appelle chaque div par son id, mais je préfèrerai les appeler par la class.

Cependant, l'intitulé de ton sujet n'est pas clair.

Donc oui, je suis d'accord avec toi qu'il faille traiter avec each ou une boucle en natif puisque suivant ton scroll apparement, tu veux donner un comportement spécifique à chaque image.

En ce qui concerne le double évènement, ça peut être vraiment problématique.
1 tu demandes des ressources inutiles
2. bogues potentiels (C'est comme si jattribue un click sur un élément et à un autre endroit je fais pareil. Je me retrouve avec deux cliques....

De mémoire, il y a une petite différence entre un document ready et un window load. C'est la même chose entre un mouseover et mouseenter. Mais là pour le coup, tu dis la même chose.

Prend cette habitude, si ton script nécessite que le document soit chargé, écris ceci (on doit le voir une fois dans le fichier) :

(function($){
//etc.
})(jQuery)

Cette écirture permet deux choses :
1. d'appeler jQuery et lui dire quand le document est chargé, tu fais ....
2. d'éviter les conflits entres librairies comme Mootools.

Pour t'expliquer ce que cela veut dire : c'est une fonction anonyme qui s'execute elle même et prend en paramètre jquery. Ce qui revient à charger jQuery dans la fonction qui s'auto exécute.

Tu ne peux pas écrire ceci :

$(this 'img').css('right',0);

mais tu peux écrire cela :

$('...').each(function(){
	var obj = $(this);
	//etc.
	$('img',obj).quelquechose();
});

ce qui revient à faire un
$(this).find('img').quelquechose();

Le find est plus intéressant. Il prend le premier enfant qu'il trouvera. Avec children, il prend tous les enfants. Children demande plus de ressources puisqu'il va chercher tous les enfants. find VS children. Dans ton cas il y a pas d'incidence sur le comportement. Dans d'autres cas, c'est pas pareil...

ex :

<li><span>quelque chose <span> autre chose</span></span></li>

$('li').each(function(){
	$(this).children('span').css({'position':'absolute','left':0});
});

Modifié par niuxe (22 Apr 2014 - 02:50)