Deux news défilantes

Invité · 24/11/2011, 19h10

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é · 24/11/2011, 21h43

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

Savez-vous comment on peut éviter çà ?

Merci.

**NoSmoking** · 24/11/2011, 22h23

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é · 24/11/2011, 22h43

Bien vu !

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

**NoSmoking** · 24/11/2011, 22h45

n'oublies quand même pas...

Mais tout ceci est factorisable.

Invité · 25/11/2011, 10h30

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** · 25/11/2011, 14h09

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

Invité · 25/11/2011, 14h24

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.

Deux news défilantes

JavaScript

Discussions similaires

Partager

Partager