Deux news défilantes

[Paul-75]

Bonjour à tous,

Je rencontre un soucis avec le code d'une news défilante depuis que j'ai voulu le dupliquer pour afficher 2 blocs de news sur la même page.

Voici le code initial :

Dans le body :

Code html :

1
2
3
4
5
6
7
<DIV id='newsbox'>
  <DIV id='newslist' style='visibility: hidden; float:left;'>
Ma news défilante (...)
Ma news défilante (...)
Ma news défilante (...)
  </DIV>
</DIV>

Dans la CSS :

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
#newsbox {
height:100px;
width:535px;
float:left;
position: relative;
overflow: hidden;
border-top-style: none;
}
#newslist { 
position: absolute; 
padding: 0 0.7m 0 0.2em; 
}

Et le JS :

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
<SCRIPT language="javascript" type="text/javascript">
var pos;
var speed = 1;
var pos_initial;
 
function startAnim() {
	var e = document.getElementById('newsbox');
	pos_initial = e.clientHeight + 0;
	pos = pos_initial;
	setInterval('anim()', 70);
}
function anim() {
	var e = document.getElementById('newslist');
	e.style.visibility = 'visible';
	e.style.top = Math.floor(pos) + 'px';
	pos = pos - speed;
	if(pos < -e.clientHeight) pos = pos_initial;
}
window.onload = function() {
  var e = document.getElementById('newsbox');
  e.onmouseover = function() { speed = 0; };
  e.onmouseout = function() { speed = 1; };
  startAnim()
};
</SCRIPT>

Jusque ici tout va bien.

Mais plus rien ne marche dès que je veux créer une 2eme liste en dupliquant à l'identique le code dans le BODY.

Comme je me suis dit qu'il y avait certainement un problème de variables, j'ai dupliquer le code en rajoutant 1 et 2 à la fin des variables pour différencier complètement les 2 branches de code, ce qui donne ceci :

Dans le body :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<DIV id='newsbox1'>
<DIV id='newslist1' style='visibility: hidden; float:left;'>
Ma news défilante (...)
Ma news défilante (...)
Ma news défilante (...)
</DIV>
</DIV>
 
<DIV id='newsbox2'>
<DIV id='newslist2' style='visibility: hidden; float:left;'>
Ma news défilante (...)
Ma news défilante (...)
Ma news défilante (...)
</DIV>
</DIV>

Dans la CSS :

Code css :

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
#newsbox1 {
height:100px;
width:535px;
float:left;
position: relative;
overflow: hidden;
border-top-style: none;
}
#newslist1 { 
position: absolute; 
padding: 0 0.7m 0 0.2em; 
}
 
#newsbox2 {
height:100px;
width:535px;
float:left;
position: relative;
overflow: hidden;
border-top-style: none;
}
#newslist2 { 
position: absolute; 
padding: 0 0.7m 0 0.2em; 
}

Et le JS :

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
<SCRIPT language="javascript" type="text/javascript">
var pos1;
var speed1 = 1;
var pos_initial1;
 
function startAnim1() {
	var e1 = document.getElementById('newsbox1');
	pos_initial1 = e1.clientHeight + 0;
	pos1 = pos_initial1;
	setInterval('anim1()', 70);
}
function anim1() {
	var e1 = document.getElementById('newslist1');
	e1.style.visibility = 'visible';
	e1.style.top = Math.floor(pos1) + 'px';
	pos1 = pos1 - speed1;
	if(pos1 < -e1.clientHeight) pos1 = pos_initial1;
}
window.onload = function() {
  var e1 = document.getElementById('newsbox1');
  e1.onmouseover = function() { speed1 = 0; };
  e1.onmouseout = function() { speed1 = 1; };
  startAnim1()
};
</SCRIPT>
 
<SCRIPT language="javascript" type="text/javascript">
var pos2;
var speed2 = 1;
var pos_initial2;
 
function startAnim2() {
	var e2 = document.getElementById('newsbox2');
	pos_initial2 = e2.clientHeight + 0;
	pos2 = pos_initial2;
	setInterval('anim2()', 70);
}
function anim2() {
	var e2 = document.getElementById('newslist2');
	e2.style.visibility = 'visible';
	e2.style.top = Math.floor(pos2) + 'px';
	pos2 = pos2 - speed2;
	if(pos2 < -e2.clientHeight) pos2 = pos_initial2;
}
window.onload = function() {
  var e2 = document.getElementById('newsbox2');
  e2.onmouseover = function() { speed2 = 0; };
  e2.onmouseout = function() { speed2 = 1; };
  startAnim2()
};
</SCRIPT>

Hélas ca fonctionne toujours pas

Qqun voit-il l'erreur SVP ?

Un grand merci d'avance pour votre aide !

[Paul-75]

Apparemment le problème vient d'un conflit entre les 2 window.onload ...

Savez-vous comment on peut éviter çà ?

Merci.

[NoSmoking]

Bonsoir,
lorsque tu écris

Code :

1
2
3
var a = "Bonjour";
a = "une autre chaine";
a =  12;

tu t'attends à ce que a vaille 12 et tu as raison.
Comme tu redéclares window.onload il faut s'attendre à ce qu'il vaille la dernière affectation faite.

Pour éviter cela il faut mettre TOUT le code que tu veux voir s'exécuter dans la même affection

Code :

1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function() {
  // premiere animation
  var e1 = document.getElementById('newsbox1');
  e1.onmouseover = function() { speed1 = 0; };
  e1.onmouseout = function() { speed1 = 1; };
  startAnim1();
  // deuxieme animation
  var e2 = document.getElementById('newsbox2');
  e2.onmouseover = function() { speed2 = 0; };
  e2.onmouseout = function() { speed2 = 1; };
  startAnim2();
};

Mais tout ceci est factorisable, regardes ce qui change entre la fonction originale et celle dupliquée et tu trouveras ce que tu pourrais en paramètre.

[Paul-75]

Bien vu !

Tout baigne... un TRÈS GRAND merci à toi

[NoSmoking]

n'oublies quand même pas...

Mais tout ceci est factorisable.

[Paul-75]

Bon j'ai encore un soucis : le script ne marche pas sur IE9 (mais il marche sur IE8 par contre...)

Je recherche la cause, mais si on peut m'aider ca sera avec un grand plaisir !

[NoSmoking]

Envoyé par Paul-75

Bon j'ai encore un soucis : le script ne marche pas sur IE9 (mais il marche sur IE8 par contre...) !

oui mais encore ...
essaies déjà de passer la fonction à setTimeout par référence comme cela setInterval( anim(), 70);

[Paul-75]

essaies déjà de passer la fonction à setTimeout par référence comme cela setInterval( anim(), 70);

Je ne comprends pas...

Bon ca ne marche pas (la 2eme news ne s'affiche pas) seulement avec les versions IE6 et IE7, ca marche bien par contre pour IE8 et IE9 ... je m'en contenterai.