Discussion :

[Invité]

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 :

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

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 :

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

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 :

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

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

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 :

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

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
<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 !

[Invité]

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 :

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

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 :

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

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.

[Invité]

Bien vu !

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

[NoSmoking]

n'oublies quand même pas...

Mais tout ceci est factorisable.

[Invité]

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 !