Discussion :

[Webcorp]

Bonsoir,je débute en javascript et jquery.
Je suis entrain de me faire un site portfolio.
J'ai voulu faire une gallerie avec jquery et effet de slider.
Sous firefox,c'est ok.pas de message d'erreur ou mème d'avertissement avec firebug.
Par contre sous IE7,pas de message d'erreur,mais malgré sa ,le slider ne fonctionne pas.

voici la partie html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
			<div id="galerie">
				<div class="slider">
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
					<a href="#"><img src="image/facebook.png"></img></a>
				</div>
				<div class="suiv"></div>
				<div class="prec"></div>
			</div>

la partie css

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
#galerie
{
	position:relative;
	background:#fff;
	width:150px;
	height:370px;
	float:right;
	margin:70px 10px 0 0;
	border:2px solid #000;
	overflow:hidden;
 
}
 
.slider
{
	height:5000px;
	position:absolute;
	margin-top:20px;
}
 
img
{
	height:80px;
	width:120px;
	margin:5px 10px;
}
 
.suiv
{
	position:absolute;
	height:17px;
	width:150px;
	bottom:0;
	background:url(template/flechebas.png) no-repeat;
}
 
.suiv:hover
{
	position:absolute;
	height:17px;
	width:150px;
	bottom:0px;
	background:url(template/flechebashover.png) no-repeat;
}
 
.prec
{
	position:absolute;
	height:17px;
	width:150px;
	background:url(template/flechehaut.png) no-repeat;
}
 
.prec:hover
{
	position:absolute;
	height:17px;
	width:150px;
	background:url(template/flechehauthover.png) no-repeat;
}

et enfin la partie 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
 
$(document).ready(function()
{
	s= new slider("#galerie");
});
var slider = function(id)
{
	var self=this;
	this.div=$(id);
	this.slider=this.div.find(".slider");
	this.largeurCache=this.div.height();
	this.largeur=0;
	this.div.find('a').each(function()
		{
			self.largeur+=$(this).height();
			self.largeur+=parseInt($(this).css("padding-top"));
			self.largeur+=parseInt($(this).css("padding-bottom"));
			self.largeur+=parseInt($(this).css("margin-top"));
			self.largeur+=parseInt($(this).css("margin-bottom"));		
		});
 
	this.prec=this.div.find(".prec");
	this.suiv=this.div.find(".suiv")
	this.saut=this.largeurCache/2;
	this.nbEtapes=Math.ceil(this.largeur/this.saut);
	this.courant=0;
 
 
	this.suiv.mouseover(function()
		{
			if(self.courant<=self.nbEtapes)
				{
 
					self.courant++;
 
					self.slider.animate(
						{
							top:-self.courant*self.saut
 
						}
						,1000);
				}
		});
 
	this.prec.mouseover(function()
		{
			if(self.courant>0)
				{
 
					self.courant--;
 
					self.slider.animate(
						{
							top:-self.courant*self.saut
 
						}
						,1000);
				}
		});
}

mon seul probleme c'est avec IE7.
J'ai essayer avec des outils comme IETester,DebugBar.
Mais aucun ne me dit ceux qui ne va pas.

Un petit coup de pouce,please.

[danielhagnoul]

Bonsoir.

Code :

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

1
2
3
4
 
this.nbEtapes = Math.ceil(this.largeur/this.saut);
 
alert("this.saut = " + this.saut + "\nthis.nbEtapes = " + this.nbEtapes);

Le problème est que this.nbEtapes = NaN avec IE8.

[EDIT] Le problème vient d'ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
            this.div.find('a').each(function(i, item){    
                if (i == 0) alert($(item).css("marginTop"));
 
                self.largeur += $(item).height();
                self.largeur += parseInt($(item).css("paddingTop"));
                self.largeur += parseInt($(item).css("paddingBottom"));
                self.largeur += parseInt($(item).css("marginTop"));
                self.largeur += parseInt($(item).css("marginBottom"));        
            });

Comme les marges (marginTop et marginBottom) ne sont pas définies dans le code, IE8 retourne la valeur "auto" ce qui provoque self.largeur = NaN.

[Webcorp]

merci,c'est operationel maintenant.
c'etait une erreur toute bête

[Webcorp]

il me reste un petit problème.
Dans IE le défilement des images ne s'arrete pas.
alors,que dans Firefox,il s'arréte trop tôt.