Discussion :

[boutmos]

bonjour,

Je suis entrain de développer un slideShow avec l'aide de Jquery. Ça avance plutôt bien et vite mais là je me heurte a un bug sous IE6&7 (pas testé IE8)

Lorsque j'utilise cette fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function slideLeft(){
	marge = $("#items").css("marginLeft");
	marge = parseInt(marge);
	marge = marge-164;
	marge = marge+"px";
	$("#items").css("position", "relative");
 
	$("#items").animate({
		marginLeft : marge
	}, 350 );
 
	$("#items").css("position", "static");
}

Dans le animate, le fait d'affecter une variable a marginLeft; cela me fait planter Jquery sous IE.

Comment affecter cette propriété avec une variable proprement ? Merci

[boutmos]

J'ai peut etre une piste; j'ai placé un alert(marge) juste apres marge = marge+"px";

et sous IE , mon alert m'affiche NaNpx

Not a Number :/

[boutmos]

en fait cela vient de

Code :

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

marge = $("#items").css("marginLeft");

qui sous IE, me retourne la valeure AUTO, alors que j'attends une valeur string suivie de px que je converti.

et donc la conversion via le parseInt ne peut pas s'effectuer

[boutmos]

Bon j'ai compris.

dans le CSS , ma div #items etait definie ainsi :

Code :

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

1
2
3
4
 
#items {
	width: 1600px;
}

et donc pour FF, Safari , implicitement les marges sont a 0px;

tandis que sous IE, elles sont définies sur auto.

J'ai donc explicitement initialisé mes marges dans mon CSS et çà fonctionne :

Code :

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

1
2
3
4
5
#items {
	margin: 0px;
	width: 1600px;
}

[boutmos]

Si j'avais lu ce passage plus tot, j'aurais pu eviter mon erreur :

Depuis jQuery 1.2, vous pouvez animer les propriétés en utilisant les mesures em et % (lorsqu'elles sont applicables).De plus, vous pouvez créer des animations relatives en utilisant "+=" ou "-=" devant la valeur de la propriété. Cela va faire évoluer l'élément positivement ou négativement depuis sa position actuelle.

Mais hélas je n'arrive pas appliquer ceci a mon code :

Code :

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

1
2
3
4
	$("#items").animate({
		marginLeft += 164
	}, 150 );

Avez vous deja utilisé cette notation dans un .animate ?

[boutmos]

c'est bon c'est ainsi :

$("#items").animate({
marginLeft : "+=164"
});