setInterval()

**van___fanel** · 06/10/2008, 13h53

Bonjour,

j'ai un petit problème avec une boucle sur un getElementsByClassName().

J'ai une fonction, que voici :

Code :

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

1
2
3
4
5
6
7
8
function rollNews() {
	//alert(document.getElementById('newsContent').getElementsByClassName('news').length);
	var cursor = 0;
	for(var i = 0; i <= document.getElementById('newsContent').getElementsByClassName('news').length; i++) {
		document.getElementById('newsContent').getElementsByClassName('news')[i].style.display = 'none';
	}
	//document.getElementById('newsContent').getElementsByClassName('news')[cursor].style.display = 'block';
}

qui va intéragir sur l'HTML suivant :

Code :

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

1
2
3
4
5
6
7
8
<div class="actualites">
	<div class="title"></div>
    <div class="content" id="newsContent">
    <p class="news">Les solutions pour d&eacute;crocher les meilleurs cr&eacute;dits. Pour faire plier les banques, qui pr&ecirc;tent de...</p>
    <p class="news">Test 2</p>
    </div>
    <div class="more"></div>
</div>

Lancée par un onload sur le <body>, elle me renvoie l'erreur :

document.getElementById('newsContent').getElementsByClassName('news')[i] is undefined

Ce qui est étrange, c'est que quand je fait un

Code :

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

alert(document.getElementById('newsContent').getElementsByClassName('news')[0].innerHTML);

la fonction me renvoie bien le contenu de la première news.

Comment ce fait'il que la fonction n'arrive pas à interpréter correctement la variable i, dans ma boucle ?

**bigboomshakala** · 06/10/2008, 13h56

mauvais test

Code :

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

for(var i = 0; i <= document.getElementById('newsContent').getElementsByClassName('news').length; i++)

bon test

Code :

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

for(var i = 0; i < document.getElementById('newsContent').getElementsByClassName('news').length; i++)

meilleur code

Code :

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

1
2
var tab = document.getElementById('newsContent').getElementsByClassName('news');
for(var i = 0; i < tab.length; i++)

**van___fanel** · 06/10/2008, 17h18

Effectivement, ça marche mieux. je pensais que comme PHP, Javascript comprenait les signes <= et >= .

Un

<= var

en javascript se transforme donc en

< var +1

j'imagine.

Merci en tout cas.

**E.Bzz** · 06/10/2008, 17h43

Bonjour,

Envoyé par van___fanel

Effectivement, ça marche mieux. je pensais que comme PHP, Javascript comprenait les signes <= et >= .

le problème n'est pas celui-là.
JS comprend <= et >=
Ce que te signale bigboomshakala, c'est que le dernier indice d'un tableau est length-1 (et non pas length)

A+

**van___fanel** · 06/10/2008, 19h09

Effectivement.

Je suis maintenant en train d'utiliser ma boucle dans une fonction, dont le but ultime est de réussir à reproduire le système de news défilante placé juste en dessous de la bannière du site http://www.credixia.com/

Voici mon code 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 class="actualites">
	<div class="title"></div>
    <div class="content" id="newsContent">
    <p class="news">Les solutions pour d&eacute;crocher les meilleurs cr&eacute;dits. Pour faire plier les banques, qui pr&ecirc;tent de...</p>
    <p class="news">Test 2</p>
    </div>
    <div class="more"></div>
</div>
 
<div id="debug"></div>
<script type="text/javascript" language="javascript">
rollNews('0');
</script>

et ma fonction rollNews() :

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
function rollNews(news) {
	var elem = document.getElementsByClassName('news');
	var i = 0;
	for(i = 0; i < elem.length; i++) {
		elem[i].style.display = 'none';
	}
	//document.getElementById('debug').innerHTML = 'on affiche la news #'+news+'<br />';
	elem[news].style.display = 'block';
 
	news = parseInt(news) + 1;
	if(news >= elem.length) {
		news = 0;
	}
 
	//document.getElementById('debug').innerHTML += 'on lance rollNews(\''+news+'\')<br />';
	window.setInterval("rollNews('"+news+"')", 5000)
}

Ca marche pas trop mal pour le moment, sauf que parfois ça bug un peu, on dirait que le script lance deux fois de suite la fonction, sans attendre intervalle de 5 secondes. Et bout d'un certains temps (une dizaine d'intervalles je dirais, ça bug complètement, et plus rien ne bouge, et Firefox plante). Une idée d'où ça peut venir ?

**E.Bzz** · 07/10/2008, 09h37

Avec cette ligne

Code :

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

window.setInterval("rollNews('"+news+"')", 5000)

tu lances plusieurs setInterval() en parralèlle : l'appel étant à l'intérieur de la fonction, elle se rappelle elle-même.
Dans ce cas, il faut utiliser un simple setTimeout() qui ne lance qu'une fois l'instruction au bout du délai (même syntaxe que setInterval() )...

Sinon, tu peux continuer à utiliser setInterval(), mais en le sortant de la fonction. Tu peux appeler cette instruction sur le onload du body, par exemple (ce serait préférable à

Code :

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

1
2
3
<script type="text/javascript" language="javascript">
rollNews('0');
</script>

) ...

A+

**SpaceFrog** · 07/10/2008, 09h54

code plus rapide :

Code :

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

1
2
3
4
5
6
7
 
var tab = document.getElementById('newsContent').getElementsByClassName('news');
i=0
while( tab[i]){
              .../...
              i++;
             }

**van___fanel** · 07/10/2008, 13h16

Merci à vous 2, ça marche nickel.

Il ne me reste plus qu'a créer un petit effet visuel sympa, plutôt qu'un simple display:none, display:block.

Pour reproduire l'effet de défilement vertical, il faut que je m'oriente vers des boucles sur la propriété margin-bottom ? autre chose ?

**E.Bzz** · 07/10/2008, 14h01

Envoyé par van___fanel

Pour reproduire l'effet de défilement vertical, il faut que je m'oriente vers des boucles sur la propriété margin-bottom ? autre chose ?

Plutôt sur height (de 0 à sa hauteur finale), sinon, ton div apparaitra quand même "d'un coup" ...

A+

**van___fanel** · 07/10/2008, 15h07

Bon je galère un peu sur l'effet de défilement vertical. J'ai tenté en modifiant l'attribut height, comme tu me le conseilles :

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
function rollNews(news) {
	var elem = getElementsByClassName('news');
 
	var h = 0;
	var tab = getElementsByClassName('news');
	var i = 0;
 
	while(tab[i]){
		tab[i].style.display = 'none';
		//tab[i].style.height = 0+'px';
		i++;
	}
 
	if(news > 0) {
		for(h = 18; h > 0; h--) {
			tab[news-1].style.height = h+'px';
		}
	}
 
	tab[news].style.display = 'block';
	for(h = 0; h < 18; h++) {
		tab[news].style.height = h+'px';
	}
 
 
	news = parseInt(news) + 1;
	if(news >= elem.length) {
		news = 0;
	}
 
	window.setTimeout("rollNews('"+news+"')", 2000)
}

Je fais donc une boucle pour l'élément qui va partir, et une pour celui qui va arriver. Mais il apparait tout de même d'un seul coup.

Où est mon erreur ?

**E.Bzz** · 07/10/2008, 15h29

Pour que la modif soit visible, il me semble qu'il faut que la fonction "rende la main".
Essaye de passer par un (autre) setTimeout(), ce qui désynchronise la mise à jour de l'affichage de la fin de la fonction :

Code :

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

setTimeout("document.getElementById('"+tab[news-1].id+"').style.height = '" + h + "px'", 10);

A+

**van___fanel** · 07/10/2008, 17h28

Bon vu que je galérais trop, je suis passé à un système de FadeIn / FadeOut, qui me convient bien aussi.

Je poste le code, si ça peut servir à quelqu'un un jour :

La fonction rollNews(), et les 2 fonctions permettant le changement d'opacité :

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
function rollNews(news) {
	var h = 0;
	var tab = document.getElementById('hiddenNews').getElementsByClassName('news');
	var i = 0;
 
 
	//document.getElementById('debug').innerHTML = 'on affiche la news #'+ news;
 
	document.getElementById('newsContent').innerHTML = '<p class="news" id="currentNews">'+tab[news].innerHTML+'</p>';
	opacity(document.getElementById('currentNews'), 0, 100, 1000);
 
	setTimeout("opacity(document.getElementById('currentNews'), 100, 0, 1000)", 3000);
 
	news = parseInt(news) + 1;
	if(news >= tab.length) {
		news = 0;
	}
 
	window.setTimeout("rollNews('"+news+"')", 5000)
}
 
function opacity(news, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
 
 
    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + news + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + news + "')",(timer * speed));
            timer++;
        }
    }
}
 
//change the opacity for different browsers
function changeOpac(opacity, news) {
	//var tab = getElementsByClassName('news');
    var object = document.getElementById('currentNews').style;
	//var object = tab[news].style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

Le code HTML des news :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="actualites">
	<div class="title"></div>
    <div class="content" id="newsContent">
    </div>
    <div class="more"><a href=""><img src="img/actualitesMore.png" alt="" border="0" /></a></div>
</div>
 
<div id="hiddenNews" style="display:none;">
	<p class="news">Les solutions pour d&eacute;crocher les meilleurs cr&eacute;dits. Pour faire plier les banques, qui pr&ecirc;tent de...</p>
    <p class="news">Test 2</p>
    <p class="news">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a arcu. Donec laoreet. Aliquam sed felis sit amet nisl facilisis</p>
</div>

Sujet résolu, merci pour les aides : )

setInterval()

JavaScript

Discussions similaires

Partager

Partager