setInterval()

Version imprimable

setInterval()

Bonjour,

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

J'ai une fonction, que voici :
Code:

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:

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écrocher les meilleurs crédits. Pour faire plier les banques, qui prê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 :

Citation:

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

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

Code:

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 ?

06/10/2008, 13h56
bigboomshakala
mauvais test

Code:

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

bon test

Code:

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

meilleur code
Code:

1 2 var tab = document.getElementById('newsContent').getElementsByClassName('news'); for(var i = 0; i < tab.length; i++)
:D
06/10/2008, 17h18
van___fanel

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

Un

Citation:

<= var

en javascript se transforme donc en

Citation:

< var +1

j'imagine.

Merci en tout cas.
06/10/2008, 17h43
E.Bzz

Bonjour,

Citation:

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+

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:

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écrocher les meilleurs crédits. Pour faire plier les banques, qui prê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:

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 ?

07/10/2008, 09h37
E.Bzz
Avec cette ligne

Code:

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:

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

A+

code plus rapide :

Code:

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

07/10/2008, 13h16
van___fanel

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 ?
07/10/2008, 14h01
E.Bzz

Citation:

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+

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:

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 ?

07/10/2008, 15h29
E.Bzz

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:

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

A+

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:

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:

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 : )