Discussion :

[Gilles_73]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 code Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
$(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);
 
	});
 
 
});

Merci pour votre aide.

[SpaceFrog]

jette un oeil sur live() on() ou delegate() ...

[Gilles_73]

Merci pour ta réponse mais le problème, je débute en javacript donc j'ai du mal à comprendre ce que je dois faire.....Pourrais tu m'aiguiller un peu plus ?

Merci d'avance