Menu défilant verticalement

**papyreno** · 08/07/2009, 18h21

Bonjour à tous,

Je dois réaliser un menu défilant verticalement en Javascript. Ce menu est composé de logos, qui doivent défiler de bas en haut. Le principe est que quand un logo arrivé en haut n'est plus visible ((logo.style.top + logo.clientHeight) < conteneur.style.top ), il doit être repositionné à la fin, après le dernier élément.

J'ai réalisé le code suivant:

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>
			Test menu défilant
		</title>
		<style type="text/css">
			img {
				border: none;
			}
 
			.menuItem {
				position: relative;
				top: auto;
				margin-top: 2px;
				margin-bottom: 2px;
				visibility: visible;
			}
 
			#container {
				background-image: url(bg_logoDefil.gif);
				background-repeat: no-repeat; 
				background-position: center;
				width: 200px;
				height: 360px;
			}
 
			#menu {
				overflow: hidden;
				position: relative;
				left: 8px;
				top: 0px;
				width: 200px;
				height: 360px;
			}
		</style>
		<script type="text/javascript">
			var timer = null;
			var shift = 1;
			var timeToWait = 20;
 
			function init() {
				var menu = document.getElementById("menu");
 
				// Sous Firefox, les sauts de ligne sont considérés comme des noeuds enfants. La boucle ci-dessous les supprime
				for(var i = 0; i < menu.childNodes.length; i++) {
					if(menu.childNodes[i].nodeName.indexOf("DIV") == -1) {
						menu.removeChild(menu.childNodes[i]);
					}
				}
 
				// Lancement du menu défilant
				setTimeout(function() { scroll() }, 1000);
			}
 
			function getTop(item) {
				var top = item.style.top;
 
				if(top == null) {
					top = 0;
				} else if(top.indexOf("px") != -1) {
					top = top.substring(0, top.indexOf("px"));
				} else if(top.indexOf("auto") != -1) {
					top = item.offsetTop;
				}
 
				return top;
			}
 
			function isVisible(item) {
				var posY = getTop(item);
				var height = item.clientHeight;
				var tmp = parseInt(posY) + parseInt(height);
				var visible = true;
 
				if(tmp < -2) {
					visible = false;
				}
 
				return visible;
			}
 
			function scroll() {
				var menu = document.getElementById("menu");
				var last = null;
				var toHide = null;
				var toAdd = null
 
				for(var i = 0; i < menu.childNodes.length; i++) {
					var item = menu.childNodes[i];
 
					if(!isVisible(item)) {
						last = menu.lastChild;
						toHide = item;
						toAdd = item.cloneNode(true);
 
						break;
					} else {
						var posY = getTop(item);
						var newPosY;
 
						newPosY = posY - parseInt(shift);
 
						item.style.top = newPosY + "px";
					}
				}
 
				// Si un élément n'est plus visible
				if(toHide != null) {
					var lastPosY = last.offsetTop;
 
					menu.removeChild(toHide);
					menu.appendChild(toAdd);
 
					toAdd.style.visibility = "hidden";
					toAdd.style.top = (parseInt(lastPosY) + parseInt(last.clientHeight)) + "px";
				}
 
				timer = setTimeout(function() { scroll() }, timeToWait);
			}
 
			window.onload = function() {
				init();
			};
		</script>
	</head>
	<body>
		<div id="container">
			<div id="menu">
				<div class="menuItem" id="menuItem1">
					<a href="#">
						<img src="logo1.gif" />
					</a>
				</div>
				<div class="menuItem" id="menuItem2">
					<a href="#">
						<img src="logo2.gif" />
					</a>
				</div>
				<!-- ... -->
			</div>
		</div>
	</body>
</html>

Malheureusement, le résultat est assez improbable

Je ne comprend pas d'où cela peut venir, je m'arrache les cheveux là-dessus depuis 2, 3 jours...

Si quelqu'un parmi vous a une idée pour que tout ça fonctionne correctement, je suis fortement intéressé

D'avance merci !

**SpaceFrog** · 08/07/2009, 21h04

il n'y en a pas un viable dans les contributions ?

**papyreno** · 09/07/2009, 10h31

Envoyé par SpaceFrog

il n'y en a pas un viable dans les contributions ?

Je n'y suis pas encore aller voir, j'aimerais auparavant vraiment comprendre ce qui coince dans ce que j'ai fait ! Bien que ne me considérant pas comme 1 expert en javascript (loin de là), je pense que ma logique est bonne. Mais comme j'ai la tête dans le guidon depuis lundi à cause de ça, je suis peut être passé à côté d'une énormité...

Cependant, si ce post n'aboutissait pas, j'irais piocher dans les contributions.

**SpaceFrog** · 09/07/2009, 10h39

je pense que cela peut provenir de l'utilisation de style.top au lieu offsetTop ..

**Auteur** · 09/07/2009, 20h04

moi c'est le

Code css :

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

position: relative;

cette propriété m'a toujours donné des résultats aléatoires

(peut-être aussi que cela vient du fait que je n'ai jamais bien su l'utiliser

)

**micetf** · 10/07/2009, 16h01

YES ! J'y suis arrivé... enfin je crois.

J'ai d'abord supprimé la ligne de commentaire
qui indiquait qu'il pouvait y avoir plusieurs div id="menuItemX".

Ensuite, j'ai réécrit la fonction scroll() de cette manière :

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
function scroll() {
 
	var menu = document.getElementById("menu");
	var item = menu.firstChild;
 
	while (item != null) {					
		if(!isVisible(item)) {
			for (i=0; i < menu.childNodes.length; i++) {
				menu.childNodes[i].style.top = null;
			}
			menu.appendChild(item.cloneNode(true));
			menu.removeChild(item);
		} else {
			item.style.top = getTop(item) - parseInt(shift) + "px";
		}
		item = item.nextSibling;					
	}
	setTimeout(function() { scroll() }, timeToWait);
}

Et ça marche sous Firefox 3.0.

Fred

Menu défilant verticalement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager