Discussion :

[Neji44]

Salut à tous.
J'ai réalisé une fonction qui permet de scroller progressivement en X et Y jusqu'a une position. Tout marche bien, mais quand je regarde sous mac ca ne défile pas progressivement, mais d'un coup et c'est assez gênant car le défilement progressif servait à montré les autres images du site.
Ce n'est pas un problème de navigateur car j'ai testé le site avec Firefox sur Mac et Windows.
Vous pouvez voir ce que ca donne --> ICI.

Voici ma 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
15
16
17
18
19
20
 
function Scroll(x,y)
{	
	var Y = 0;
	var X = 0;
	for(Z=0;Z<=y;Z++)
	{
		if(Y<=y)
		{
			scrollTo(X,Y);
			Y = Y + 6;
		}
		if(X<=x)
		{
			scrollTo(X,Y);
			X = X + 3;
		}
	}
 
}

Est ce que vous savez comment je peux faire pour que ça marche sous MAC.

[Neji44]

Personne n'a d'idée???

[sekaijin]

c'est normal il n'y a aucune tempo dans ton code et sur mac ça va vite

traive de plaisenterie le scroll est en fait asynchrone sur mac donc dans ta boucle l'appel scrollTo(X,Y); n'attends pas la fin du déplacement il passe immédiatement dans la boucle et le rappelle instantanément du coup visuellement tu as l'impression que le fait tout d'un coup.

il faudrait que tu mette une temporisation apres chaque appel à scrollTo

sous windows l'appel etant synchronne l'interprete JS attend le déplacement effectif pour passer à la suite d'ou un effet de progrésivité.

c'est un peu comme si sur PC tu tavaillait tout seul
tu fais ton calcul tu déplace le contenu puis tu passe à la suite
alors que sur mac on travaille à deux tu fais ton calcul et tu dit au moteur d'affichage déplace toi et tu continu au final tu dit très rapidement plussieurs fois déplace toi

A+JYT

[Neji44]

Merci de ta réponse SekaiJin.
Tu pense qu'en utilisant un setInterval ca marcherais mieux?

[brunocatteau]

J'ai vu ça passer il y a quelques jours : http://tobielangel.com/examples/auto...age-navigation

par contre, je ne sais pas si ça marche sous Mac, mais je pense. c'est basé sur Prototype.

Bruno CATTEAU

[Neji44]

Merci de réponse brunocatteau, mais j'ai l'impression que la fonction ne fonctionne que sur un Scroll en Y alors qu'il me faut une fonction qui scroll en X et en Y.
J'aimerais modifier ma fonction pour qu'elle utilise un setInterval à la place d'une boucle for.
Voici ma 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
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
 
function getElementYpos(el)
{
	var y = 0;
	while(el.offsetParent)
	{
		y += el.offsetTop
		el = el.offsetParent;
	}
	return y;
}
function getElementXpos(el)
{
	var x = 0;
	while(el.offsetParent)
	{
		x += el.offsetLeft
		el = el.offsetParent;
	}
	return x;
}
 
function goodScroll(idAncre){
	var ySize = document.documentElement.clientHeight;
	var xSize = document.documentElement.clientWidth;
	var xPos = document.documentElement.scrollLeft;
	var yPos = document.documentElement.scrollTop;
        pos = document.getElementById(idAncre);
	ancreLeft = getElementXpos(pos);
	ancreTop = getElementYpos(pos);
	ScrollAnchor(xPos,yPos,ancreLeft,ancreTop);
	//alert("Position Ancre left: "+ancreLeft+ " Top: "+ancreTop);
}
 
function ScrollAnchor(beginX,beginY,x,y){
	var Y = 0;
	var X = 0;
	if(y>x)
	{
		for(Z=beginY;Z<=y;Z++)//mouvement diagonal
		{
			if(Y<=y)
			{
				scrollTo(X,Y);
				Y = Y + 6;
			}
			if(X<=x)
			{
				scrollTo(X,Y);
				X = X + 3;
			}
		}
	}
 
}

On l'utilise de la façon suivant :
<a href="javascript:goodScroll('block1')">Section 1</a>
(Block 1 <== id de l'élément à atteindre)

[Neji44]

Personne ne saurait comment faire pour que ma fonction utilise un setInterval à la place d'une boucle for
Nan parce que moi j'ai essayé, mais tous ce que j'ai réussi à faire c'est planter mon firefox (et mon PC par la même occasion...).

[brunocatteau]

J'ai modifié plusieurs trucs :

Pour les scrolls :

Code :

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

1
2
var xPos = document.body.scrollLeft;
var yPos = document.body.scrollTop;

J'ai aussi mis des variables globales qui se reinitialisent à chaque fois que tu cliques sur un lien

Code :

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

1
2
3
4
5
 
X = xPos;
Y = yPos;	
nbPas = 300;	
tempo = 10

Je l'ai aussi fait fonctionner dans les deux sens (sur le coucou rouge, tu peux cliquer, et ça revient sur départ)

c'est compatible IE et FF

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
 
<script>
	function getElementYpos(el)
	{
		var y = 0;
		while(el.offsetParent)
		{
			y += el.offsetTop
			el = el.offsetParent;
		}
		return y;
	}
	function getElementXpos(el)
	{
		var x = 0;
		while(el.offsetParent)
		{
			x += el.offsetLeft
			el = el.offsetParent;
		}
		return x;
	}
 
	function goodScroll(idAncre){
		/*
		var ySize = document.documentElement.clientHeight;
		var xSize = document.documentElement.clientWidth;
		var xPos = document.documentElement.scrollLeft;
		var yPos = document.documentElement.scrollTop;
		*/
		var xPos = document.body.scrollLeft;
		var yPos = document.body.scrollTop;
	             pos = document.getElementById(idAncre);
		ancreLeft = getElementXpos(pos);
		ancreTop = getElementYpos(pos);
		//variables globales
		X = xPos;
		Y = yPos;	
		nbPas = 300;	
		tempo = 10
		compteur = 0;
		ScrollAnchor(xPos,yPos,ancreLeft,ancreTop);
	}
 
	function ScrollAnchor(beginX,beginY,x,y){
			scrollTo(X,Y);
			Y += (y-beginY)/nbPas;
			X += (x-beginX)/nbPas;			
			compteur++;
			if (compteur < nbPas) setTimeout(function(){ScrollAnchor(beginX,beginY,x,y);},tempo)
	}
</script>
 
<a id="depart" href="javascript:goodScroll('block1')">Section 1</a>
<br><br><br><br><bR><br><br><br><br><br><bR><br><br><br><br><br><bR><br>
<nobr> rez re zrez rez re rez rez rez rze rez rze rez rez rez rez re zrze rze re zr ezrz er
<span id="block1" style="background-color:red;" onclick="goodScroll('depart')">coucou</span>
rez re zrez rez re rez rez rez rze rez rze rez rez rez rez re zrze rze re zr ezrz errez re zrez rez re rez rez rez rze rez rze rez rez rez rez re zrze rze re zr ezrz errez re zrez rez re rez rez rez rze rez rze rez rez rez rez re zrze rze re zr ezrz er
</nobr>
<br><br><br><br><bR><br><br><br><br><br><bR><br><br><br><br><br><bR><br><br>
<br><br><br><bR><br><br><br><br><br><bR><br><br><br><br><br><bR><br><br><br>
<br><br><bR><br>

[Neji44]

Merci Bruno,
Je viens de tester ta solution sur Mac et tout marche nikel.
T'est un BOSS!!!

[brunocatteau]

Merci et de rien !

tu as compris ce qui n'allait pas ?