11540 sujets

JavaScript, DOM et API Web HTML5

Problème sur un script rollover js

Bonjour,
J’ai un site qui fonctionne avec un infinite scroll et donc je charge les éléments (des box) de mes pages extérieures dans la page principal.
Mon problème, j’ai une animation Rollover sur mes box qui fonctionne très bien sur mes box déjà présentes dans la page principal mais qui ne fonctionne pas sur les autres box des pages externes.
Est-ce que cela vient de mon script rollovers ?
Débutant seulement en javascript, c’est pourquoi je sollicite votre aide.

L'url de mon site :
http://gillesn.perso.sfr.fr/isotope/index.html

Code html :


<div id="container_box">
<div class="clear"></div>
 
 


<!------------------------------------------------------------------- BOX ------------------------>
 


<!------------------------------- APPEL DES AUTRES PAGES ---------------->

<nav id="page_nav">
<a href="pages/2.html"></a>
</nav>
  
  
<!-- end container des box -->
</div>



Mon script javascript :
$(document).ready(function() {

//*** Rollover effect box xl ***//

	
	$('#container_box #box_picture_xl').append('<div class="overlay_xl"></div>');
	$('#container_box #box_picture_xl').append('<div class="overlayPicto"></div>');
	$('#container_box #box_picture_xl').hover(function() {
		
		$(this).children('.overlay_xl').stop().fadeTo(200,0.6);
		$(this).children('.overlayPicto').stop().fadeTo(200,1);
		
	},
	function() {
		
		$(this).children('.overlay_xl').stop().fadeTo(200,0);
		$(this).children('.overlayPicto').stop().fadeTo(200,0);
		
	});
	

});


$(document).ready(function() {

//*** Rollover effect box xl ***//

	
	$('#container_box #box_picture_l').append('<div class="overlay_l"></div>');
	$('#container_box #box_picture_l').append('<div class="overlayPicto"></div>');
	$('#container_box #box_picture_l').hover(function() {
		
		$(this).children('.overlay_l').stop().fadeTo(200,0.6);
		$(this).children('.overlayPicto').stop().fadeTo(200,1);
		
	},
	function() {
		
		$(this).children('.overlay_l').stop().fadeTo(200,0);
		$(this).children('.overlayPicto').stop().fadeTo(200,0);
		
	});
	

});


$(document).ready(function() {

//*** Rollover effect box xl ***//

	
	$('#container_box #box_picture_m').append('<div class="overlay_m"></div>');
	$('#container_box #box_picture_m').append('<div class="overlayPicto"></div>');
	$('#container_box #box_picture_m').hover(function() {
		
		$(this).children('.overlay_m').stop().fadeTo(200,0.6);
		$(this).children('.overlayPicto').stop().fadeTo(200,1);
		
	},
	function() {
		
		$(this).children('.overlay_m').stop().fadeTo(200,0);
		$(this).children('.overlayPicto').stop().fadeTo(200,0);
		
	});
	

});



$(document).ready(function() {

//*** Rollover effect box xl ***//

	
	$('#container_box #box_picture_s').append('<div class="overlay_s"></div>');
	$('#container_box #box_picture_s').append('<div class="overlayPicto"></div>');
	$('#container_box #box_picture_s').hover(function() {
		
		$(this).children('.overlay_s').stop().fadeTo(200,0.6);
		$(this).children('.overlayPicto').stop().fadeTo(200,1);
		
	},
	function() {
		
		$(this).children('.overlay_s').stop().fadeTo(200,0);
		$(this).children('.overlayPicto').stop().fadeTo(200,0);
		
	});
	

});
Le problème c'est que ton script ne s'exécute que sur les éléments présent du dom a sa lecture. Si tu change ce DOM, ton script ne fonctionne pas sur ces nouveaux éléments.
la fonction .live() résolvera ton problème :

 $(document).ready(function() {
 
    $('#container_box #box_picture_s').append('<div class="overlay_s"></div>');
    $('#container_box #box_picture_s').append('<div class="overlayPicto"></div>');

    $('#container_box #box_picture_l').live("hover", function(){
     
        $(this).children('.overlay_s').stop().fadeTo(200,0.6);
        $(this).children('.overlayPicto').stop().fadeTo(200,1);
        
    },
    function() {
        
        $(this).children('.overlay_s').stop().fadeTo(200,0);
        $(this).children('.overlayPicto').stop().fadeTo(200,0);
        
    });
});


Par contre, pour .append(), il faudrait l'insérer autrement. Peut-être directement sur ton template ?
Merci, ça marche nickel.......j'ai ajouté un background no repeat et une margin left.
Mais du coup dans IE et firefox , j'ai un décalage horizontal entre mes deux menus, celui de gauche et celui de droite....
Je ne vois pas quoi faire !
Le message précédent était destiné à un autre post ! Désolé...


Donc tu me conseilles de mettre mon javascript dans la page principal ?
J'ai testé le code que tu m'as donné mais malheureusement, cela ne fonctionne pas sur les box externes mais aussi sur les box présentes dans ma page principale. Une idée ou cela peut provenir ?
Hello

Je n'ai effectivement pas testé, mais ce sont des pistes car je ne compte pas non plus le faire a ta place.

Ceci étant dit, que te dis la console d’erreur de firebug ?
As tu pris en compte cette histoire avec .append() ? je pense que tu devrais mettre ces divs en dur dans ton template html.
Merci pour ta réponse....et si je demande de l'aide en javascript, c'est que mes notions dans ce langage sont très limitées....et pour vraiment bien programmer ce langage, il faut de l'expérience, ce que je n'ai pas.

Mais merci de ton aide
et concernant :
saajuck a écrit :

que te dis la console d’erreur de firebug ?
As tu pris en compte cette histoire avec .append() ? je pense que tu devrais mettre ces divs en dur dans ton template html.

?
Merci pour ton aide
Etant un utilisateur de Chrome, je n'ai pas trop l'habitude de firefox et donc de firebug.

Quand tu dis de mettre mes divs en dur ? tu veux dire les intégrer toutes dans mon index ?



PS : je refais un post plus explicite sur ce problème ainsi qu'un autre rencontré avec mon code javascript.
Sujet clos
Aller à