[POO] Variation de la hauteur d'une liste en fonction du temps passé

Version imprimable

Hello, :)

Je souhaite faire varier la hauteur d'une liste en fonction du temps passé.

Pour cela, j'ai écrit le code suivant :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Exemple</title>
		<script type="text/javascript"><!--
 
var connect = function(oEl, sEvType, fn, bCapture) {
	return document.addEventListener ?
		oEl.addEventListener(sEvType, fn, bCapture || false):
		oEl.attachEvent ?
			oEl.attachEvent('on' + sEvType, fn):
			false;
};
 
var load = function() {
 
	var oUl = document.getElementsByTagName('ul')[0];
 
	var initAnim = function() {
		oUl.style.height = 0;
		oUl.style.overflow = 'hidden';
		oUl.start = (new Date()).getTime();
		oUl.opened = oUl.start + 1000;
	};
 
	var stopAnim = function() {
		oUl.style.height = 'auto';
		oUl.style.overflow = 'visible';
		oUl.start = oUl.opened = null;
		clearInterval(oUl.exe);
	};
 
	var anim = function() {
		if(!oUl.opened) initAnim();
		var currentTime = (new Date()).getTime();
		var currentHeight = parseInt(oUl.style.height);
		if(currentHeight < oUl.scrollHeight && currentTime < oUl.opened ) {
			currentHeight = currentTime * oUl.scrollHeight / oUl.opened;
			oUl.style.height = parseInt(currentHeight) + 'px';
		}
		else stopAnim();
	};
 
	oUl.exe = setInterval(anim, 1);
 
};
 
connect(window, 'load', load);
 
		//--></script>
	</head>
	<body>
 
<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li>item 5</li>
</ul>
 
	</body>
</html>

Actuellement, la liste s'ouvre d'un coup sans tenir compte de mon code. Sauriez-vous pourquoi et d'où provient mon erreur ? :?

25/05/2008, 21h29
le_chomeur

il y a plusieurs erreur dans ton script , notamment au moment de l'appel :

connect(window, 'load', load); tu n'instancies pas ton objet exemple :

Code:

var toto = new connect(window, 'load', load);

puis ça , d'ou cela provient : oUl.exe = setInterval(anim, 1); ????
25/05/2008, 21h49
Chakra Spirit

Ah ?! 8O

connect est une fonction et je n'ai ici qu'à l'éxécuter au lieu de l'instancier au chargement de la page.

Quant à oUl.exe, je ne fais qu'ajouter une propriété exe sur la liste qui consiste en l'éxécution d'un setInterval.

A preuve du contraire, ça fonctionne bien tout ça mais je suis toute ouïe si tu es sûr que je me trompe. :)

A mon avis, l'erreur provient d'ailleurs... au sein de la fonction anim je dirais. ;)

Eureka ! ;)

En fait, la logique était correcte mais en travaillant sur les valeurs obtenues par (new Date()).getTime(); Javascript perdait les pédales lors du calcul du fait que les valeurs étaient trop grandes.

Conclusion : Il faut travailler sur l'interval de temps plutôt que directement sur les timestamps.

Au final, ça donne :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Exemple</title>
		<style type="text/css"><!--
 
@media screen, projection {
	ul {margin-left:0; padding-left:0; width:200px; list-style-type:none; background-color:#5564EF; color:white; border:1px solid black;}
	li {padding:5px 10px;}
}
 
		--></style>
		<script type="text/javascript"><!--
 
var connect = function(oEl, sEvType, fn, bCapture) {
	return document.addEventListener ?
		oEl.addEventListener(sEvType, fn, bCapture || false):
		oEl.attachEvent ?
			oEl.attachEvent('on' + sEvType, fn):
			false;
};
 
var load = function() {
 
	var oUl = document.getElementsByTagName('ul')[0];
 
	var initAnim = function() {
		oUl.style.height = 0;
		oUl.style.overflow = 'hidden';
		oUl.start = (new Date()).getTime();
		oUl.interval = 250;
		oUl.opened = oUl.start + oUl.interval;
	};
 
	var stopAnim = function() {
		oUl.style.height = 'auto';
		oUl.style.overflow = 'visible';
		oUl.start = oUl.interval = oUl.opened = null;
		clearInterval(oUl.exe);
	};
 
	var anim = function() {
		if(!oUl.opened) initAnim();
		var currentTime = (new Date()).getTime();
		var diff = oUl.interval - (oUl.opened - currentTime);
		if(parseInt(oUl.style.height) < oUl.scrollHeight && currentTime < oUl.opened )
			oUl.style.height = parseInt(diff * oUl.scrollHeight / oUl.interval) + 'px';
		else stopAnim();
	};
 
	oUl.exe = setInterval(anim, 1);
 
};
 
connect(window, 'load', load);
 
		//--></script>
	</head>
	<body>
 
<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li>item 5</li>
</ul>
 
	</body>
</html>

Merci tout de même le_chomeur de t'être penché sur mon problème; bonne fin de soirée. :)