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

jQuery Discussion :

texte qui défile


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé Avatar de oceane751
    Profil pro
    Intégrateur Web
    Inscrit en
    Novembre 2004
    Messages
    1 280
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Novembre 2004
    Messages : 1 280
    Par défaut texte qui défile
    Bonjour à tous,

    J'ai un code qui me permet de faire défiler du texte verticalement.
    Jusqu'ici tout va bien.
    Il marche pour un évenement un par un
    On me demande de faire le défilement pour 2 evenements..
    Et là je sèche
    voici le code :

    le jquery :

    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
    var headline_count;
    var current_headline=1;
     
    $(document).ready(function(){
      headline_count = $("div.headline").size();
      $("div.headline:eq("+current_headline+")").css('top', '5px');
      setInterval(headline_rotate,7000); //time in milliseconds et plus c'est petit plsu ça va vite
    });
     
    function headline_rotate() {
      old_headline = current_headline % headline_count;
      new_headline = ++current_headline % headline_count;
      $("div.headline:eq(" + old_headline + ")").css('top', '210px');
      $("div.headline:eq(" + new_headline + ")").show().animate({top: 1},"slow");     
    }
    le css :

    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
     #scrollup {
    	  position: relative;
    	   overflow: hidden;
    	   padding-left:5px;
    	   height: 100px;
    	   width: 210px;
     
    	 }
    	 .headline {
    	   position: absolute;
    	   top: 100px;
         	left: 5px;
    	   height: 100px;
    	   width:190px;
     
    	 }
    et le code xhtml :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="scrollup">
    <BOUCLE_agenda (EVENEMENTS){age_fin <0}{par date}{statut=publie}>
      <div class="headline"> 
     #TITRE
      </div>
      </BOUCLE_agenda>   
    </div>
    Je galère pas mal.
    Donc je voudrais 2 évènements au lieu de 2..

    merci beaucoup pour votre aide

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    le faire défiler deux par deux tu veux dire ?

    Mets en deux dans le même conteneur

    là ou les annonces sont géres par ce bout de code qui n'est pas du js ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <BOUCLE_agenda (EVENEMENTS){age_fin <0}{par date}{statut=publie}>
      <div class="headline"> 
     #TITRE
      </div>
      </BOUCLE_agenda>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éprouvé Avatar de oceane751
    Profil pro
    Intégrateur Web
    Inscrit en
    Novembre 2004
    Messages
    1 280
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : Novembre 2004
    Messages : 1 280
    Par défaut
    voici le code jquery à remplacer :

    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
    <script type="text/javascript">
    var headline_count;
    var current_headline=0;
    var current_headline2=1;
     
    $(document).ready(function(){
      headline_count = $("div.headline").size();
      $("div.headline:eq("+current_headline+")").css('top', '5px');
      $("div.headline:eq("+current_headline2+")").css('top', '105px');
      setInterval(headline_rotate,7000); //time in milliseconds et plus c'est petit plsu ça va vite
    });
     
    function headline_rotate() {
      old_headline = current_headline % headline_count;
      old_headline2 = current_headline2 % headline_count;
      ++current_headline;
      ++current_headline2;
      new_headline = ++current_headline % headline_count;
      new_headline2 = ++current_headline2 % headline_count;
      $("div.headline:eq(" + old_headline + ")").css('top', '410px');
      $("div.headline:eq(" + old_headline2 + ")").css('top', '410px');
      $("div.headline:eq(" + new_headline + ")").show().animate({top: "5px"},"slow");
      $("div.headline:eq(" + new_headline2 + ")").show().animate({top: "105px"},"slow");
     
    }
    </script>
    et là c'est bien 2 par 2!

    Merci quand même pour ta réponse.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    C'est une autre façon de faire plus gourmande, vu qu'elle modifie deux elements à la suite, au lieu d'un seul ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Texte qui défile "sacadé"
    Par skeut dans le forum Flash
    Réponses: 3
    Dernier message: 22/11/2009, 23h53
  2. texte qui défile
    Par Nayila dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 25/08/2008, 13h58
  3. Texte qui défile de haut en bas.
    Par womannosky dans le forum AWT/Swing
    Réponses: 2
    Dernier message: 13/08/2007, 15h20
  4. [Technique] Texte qui défile avec temps de pause
    Par AnGe7s dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 15/04/2007, 01h57
  5. Comment Insérer un texte qui défile???
    Par Jayceblaster dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 18/04/2006, 13h25

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