Pbm avec 2 news défilantes

Pbm avec 2 news défilantes - HTML/CSS - Programmation

Marsh Posté le 24-11-2011 à 19:14:43    

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


 
Dans la CSS :

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


 
Et le JS :

Code :
  1. <SCRIPT language="javascript" type="text/javascript">
  2. var pos;
  3. var speed = 1;
  4. var pos_initial;
  6. function startAnim() {
  7. var e = document.getElementById('newsbox');
  8. pos_initial = e.clientHeight + 0;
  9. pos = pos_initial;
  10. setInterval('anim()', 70);
  11. }
  12. function anim() {
  13. var e = document.getElementById('newslist');
  14. e.style.visibility = 'visible';
  15. e.style.top = Math.floor(pos) + 'px';
  16. pos = pos - speed;
  17. if(pos < -e.clientHeight) pos = pos_initial;
  18. }
  19. window.onload = function() {
  20.   var e = document.getElementById('newsbox');
  21.   e.onmouseover = function() { speed = 0; };
  22.   e.onmouseout = function() { speed = 1; };
  23.   startAnim()
  24. };
  25. </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 :
  1. <DIV id='newsbox[b]1'>
  2. <DIV id='newslist1' style='visibility: hidden; float:left;'>
  3. Ma news défilante (...)
  4. Ma news défilante (...)
  5. Ma news défilante (...)
  6. </DIV>
  7. </DIV>
  9. <DIV id='newsbox2'>
  10. <DIV id='newslist2' style='visibility: hidden; float:left;'>
  11. Ma news défilante (...)
  12. Ma news défilante (...)
  13. Ma news défilante (...)
  14. </DIV>
  15. </DIV>


 
Dans la CSS :

Code :
  1. #newsbox1 {
  2. height:100px;
  3. width:535px;
  4. float:left;
  5. position: relative;
  6. overflow: hidden;
  7. border-top-style: none;
  8. }
  9. #newslist1 {
  10. position: absolute;
  11. padding: 0 0.7m 0 0.2em;
  12. }
  14. #newsbox2 {
  15. height:100px;
  16. width:535px;
  17. float:left;
  18. position: relative;
  19. overflow: hidden;
  20. border-top-style: none;
  21. }
  22. #newslist2 {
  23. position: absolute;
  24. padding: 0 0.7m 0 0.2em;
  25. }


 
Et le JS :

Code :
  1. <SCRIPT language="javascript" type="text/javascript">
  2. var pos1;
  3. var speed1 = 1;
  4. var pos_initial1;
  6. function startAnim1() {
  7. var e1 = document.getElementById('newsbox1');
  8. pos_initial1 = e1.clientHeight + 0;
  9. pos1 = pos_initial1;
  10. setInterval('anim1()', 70);
  11. }
  12. function anim1() {
  13. var e1 = document.getElementById('newslist1');
  14. e1.style.visibility = 'visible';
  15. e1.style.top = Math.floor(pos1) + 'px';
  16. pos1 = pos1 - speed1;
  17. if(pos1 < -e1.clientHeight) pos1 = pos_initial1;
  18. }
  19. window.onload = function() {
  20.   var e1 = document.getElementById('newsbox1');
  21.   e1.onmouseover = function() { speed1 = 0; };
  22.   e1.onmouseout = function() { speed1 = 1; };
  23.   startAnim1()
  24. };
  25. </SCRIPT>
  27. <SCRIPT language="javascript" type="text/javascript">
  28. var pos2;
  29. var speed2 = 1;
  30. var pos_initial2;
  32. function startAnim2() {
  33. var e2 = document.getElementById('newsbox2');
  34. pos_initial2 = e2.clientHeight + 0;
  35. pos2 = pos_initial2;
  36. setInterval('anim2()', 70);
  37. }
  38. function anim2() {
  39. var e2 = document.getElementById('newslist2');
  40. e2.style.visibility = 'visible';
  41. e2.style.top = Math.floor(pos2) + 'px';
  42. pos2 = pos2 - speed2;
  43. if(pos2 < -e2.clientHeight) pos2 = pos_initial2;
  44. }
  45. window.onload = function() {
  46.   var e2 = document.getElementById('newsbox2');
  47.   e2.onmouseover = function() { speed2 = 0; };
  48.   e2.onmouseout = function() { speed2 = 1; };
  49.   startAnim2()
  50. };
  51. </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
Reply

Marsh Posté le 24-11-2011 à 19:14:43   

Reply

Marsh Posté le 24-11-2011 à 21:43:19    

Apparemment le problème vient d'un conflit entre les 2 window.onload ...
 
Savez-vous comment on peut éviter çà ?
 
Merci.

Reply

Marsh Posté le 25-11-2011 à 00:28:07    

ben regroupe le code du premier onload dans le second :o


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

Marsh Posté le 25-11-2011 à 08:38:45    

en effet c'était la bonne solution,
 
merci à toi !

Reply

Marsh Posté le 25-11-2011 à 10:30:53    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed