IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Deux news défilantes


Sujet :

JavaScript

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut Deux news défilantes
    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 !
    Dernière modification par Bovino ; 24/11/2011 à 19h24. Motif: Ne pas utiliser le préfixe [Encodage] s'il est sans rapport + indiquer le langage utilisé ([code=html] si ce n'est pas du JavaScript + pas de balise [b] dans le code !!!

Discussions similaires

  1. Insérer deux news propriétés dans une unité !
    Par cincap dans le forum Débuter
    Réponses: 5
    Dernier message: 18/12/2009, 10h07
  2. Plusieurs news défilantes sur une même page
    Par fixbraun dans le forum jQuery
    Réponses: 6
    Dernier message: 15/09/2009, 16h53
  3. deux bandeaux défilants
    Par laurentSc dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 06/07/2009, 13h55
  4. Texte défilant vertical (boite de news)
    Par julio02200 dans le forum Flash
    Réponses: 1
    Dernier message: 02/09/2008, 16h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo