Pbm avec 2 news défilantes

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Pbm avec 2 news défilantes

paulo75

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 :

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

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

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

<DIV id='newsbox[b]1'>
<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 :

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

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

Qqun voit-il l'erreur SVP ?

Un grand merci d'avance pour votre aide !

Message édité par paulo75 le 24-11-2011 à 19:17:28

Publicité

paulo75

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

Savez-vous comment on peut éviter çà ?

Merci.

SICKofitALL

misanthrope

ben regroupe le code du premier onload dans le second

---------------
We deserve everything that's coming...

paulo75

en effet c'était la bonne solution,

merci à toi !

paulo75

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

Message édité par paulo75 le 25-11-2011 à 21:31:01

FORUM HardWare.fr

Programmation

HTML/CSS

Pbm avec 2 news défilantes

Sujets relatifs
Téléchargement d'images pour formulaire de news	JS affichage de news les unes après les autres
Module de news en diapo d'images	[java][PrintWriter] Pbm d'arrêt non commandé
Comment creer un rectangle en flash avec des news info?	Problème avec news pour site web
Récupérer nom auteur d'une table news	News Box
VBA Access! Pbm déclaration application Excel	Flux RSS sur news
Plus de sujets relatifs à : Pbm avec 2 news défilantes

Page générée en 0.076 secondes