jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Plugins > Bandeau d’actualité

Newsticker

Bandeau d’actualité

dimanche 3 décembre 2006, par allergie

Texotela propose sur son site un petit script très simple en jQuery pour vous permettre d’afficher dynamiquement des titres de brèves (ou des "objets" de ce que vous voulez d’ailleurs) qui se renouvellent en alternance avec un joli effet de "fading". Voyons ensemble ce que cela donne en Français.


Source : http://www.texotela.co.uk/code/jque...

Il existe de nombreuses solutions javascript pour faire défiler un bandeau d’informations ou d’actualités ou pour faire alterner l’affichage d’images dans une page web. Il est logique que jQuery permette lui aussi de réaliser ceci simplement.

L’intérêt de ce script par rapport à d’autres est l’accessibilité de la liste des images ou liens proposés : ils sont tous présents dans le code source et les personnes dont le javascript est désactivé verront toutes les propositions (nb : cela signifie que vous devez avoir prévu dans votre présentation que l’aspect visible n’est plus le même avec ou sans javascript).

Après avoir installé jQuery sur votre site et l’avoir appelé dans votre entête html [1], suivez les instructions suivantes :

Des news qui ont de la class

Cette classse "newsticker" déterminera l’aspect extérieur de la partie qui sera affichée. Ici des caractères blancs, un bord en pointillé avec un fond bleu.

.newsticker {
      color : white;
        list-style-type: none;
        border: 1px dashed #fff;
        background: #050c44;
        padding: 3px;
        margin: 0;
}

Cette classe sera attribuée aux éléments de l’id news qui suit.

Votre code html dans la page web

Dans votre page html, créez maintenant une liste (ul) dont les éléments (li) seront les différents objets que vous voule alterner à l’affichage.

<ul id="news">
        <li>Visitez <a href="http://www.spip.net/">SPIP</a> pour découvrir le meilleur CMS du monde</li>
        <li>Visitez <a href="http://doc.spip.org/">Doc.spip.org</a>pour un voyage dans les arcanes des fonctions du code de spip</li>
        <li>Visitez <a href="http://www.spip-contrib.org/">Spip-contrib</a> pour apprendre à personnaliser votre spip</li>
        <li>Visitez the <a href="http://jquery.info/">jQuery.info</a> pour comprendre ce que jQuery apporte à votre site</li>
</ul>

Ou plus précisement si vous êtes un spipeur (bravo !) et que vous souhaitez afficher les logos de trois articles pris au hasard :

<ul id="news">
<BOUCLE_NEWS(ARTICLES){par hasard}{0,3}>
        <li><a href="#URL_ARTICLE" alt="[(#TITRE|texte_script)]">#LOGO</a></li>
</BOUCLE_NEWS>
</ul>

Le jQuery script qui fait tout

/*
*
* Copyright (c) 2006 Sam Collett (http://www.texotela.co.uk)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
*/

/*
* Un affichage d'actus simple
*
* @nom     newsticker (ou newsTicker)
* @param    delay      Delai (en millisecondes) entre les iterations. Par default 4 secondes (4000ms)
* @autheur   Sam Collett (http://www.texotela.co.uk)
* @adaptation Allergie aka Philippe Auriol
* @exemple  $("#news").newsticker(); // ou jQuery("#news").newsticker(5000);
*
*/
jQuery.fn.newsTicker = jQuery.fn.newsticker = function(delay)
{
        return this.each(
                function()
                {
                        if(this.nodeName.toLowerCase()!= "ul") return;
                        delay = delay || 4000;
                        var self = this;
                        self.items = jQuery("li", self);
                        // cache tous les items (sauf le premier)
                        self.items.not(":eq(0)").hide().end();
                        //  item courant
                        self.currentitem = 0;
                        var doTick = function()
                        {
                                jQuery.newsticker(self);
                        }
                        setInterval(doTick,delay);
                }
        )
        .addClass("newsticker")
        .hover(
                function()
                {
                        // se met en pause si on passe la souris dessus
                        this.pause = true;
                },
                function()
                {
                        // stop la pause quand on enleve la souris de l'item
                        this.pause = false;
                }
        );
}
jQuery.newsticker = function(el)
{
        // retour si la souris passe dessus
        if(el.pause) return;
        // cache l'item courant
        jQuery(el.items[el.currentitem]).fadeOut("slow",
                function()
                {
                        jQuery(this).hide();
                        // passe a l'objet suivant et le montre
                        el.currentitem = ++el.currentitem % (el.items.size());
                        jQuery(el.items[el.currentitem]).fadeIn("slow");
                }
        );
}

Vous pouvez voir le résultat final sur cette page de démonstration.

Documents joints

Notes

[1] Avec spip dans ses dernières versions, il suffit d’ajouter #INSERT_HEAD dans le <head>pour l’inclure dans vos headers html

Répondre à cet article

25 Messages de forum

  • (logo)

    Bandeau d’actualité

    31 décembre 2006 10:38, par goetsu

    pour être réellement accessible il manque un bouton pour pouvoir arrêter l’animation et la reprendre

    Répondre à ce message

    • (logo)
      Bandeau d’actualité 1er janvier 2007 18:35

      Je ne comprends pas trop ce que tu dis : pour moi l’accessibilité c’est qu’il soit utilisable (le contenu visible) quelle que soit la configuration du lecteur (avec ou sans js) et pas forcément que l’on puisse contrôler la manière dont il s’affiche.

      Le contrôle du fading existe d’ailleurs déjà "onhover" donc le bouton en soit n’est pas vraiment difficile à ajouter en cas de besoin mais je ne pense pas que celà rendrait quoi que ce soit plus accessible, si ? Si oui : expliques moi stp.

      Répondre à ce message

  • (logo)

    Bandeau d’actualité

    21 février 2007 17:44, par ced

    Sur Firefox 2.0, le bandeau tourne pas.

    Répondre à ce message

  • (logo)

    Bien !

    2 mars 2007 14:10, par Christophe Boucher

    Merci beaucoup ! super chouette... je vais adapter ça pour un site en SPIP 1.9.2

    Cependant, voici des questions de newbie (or not newbie ?) :
    - la classe "newsticker" c’est dans un css que je la déclare ?
    - le "Le jQuery script qui fait tout" c’est ou qu’j’y met ce bazar ?
    - ça consomme beaucoup de piles ? faut que je rebranche mon ordi ? (non non non... c’était pas une vrai question...)

    @+, et encore merci et bravo !

    Répondre à ce message

    • (logo)
      Bien ! 2 mars 2007 14:26

      Bonjour,

      la classe "newsticker" c’est dans un css que je la déclare ?

      Oui, tout à fait.

      le "Le jQuery script qui fait tout" c’est ou qu’j’y met ce bazar ?

      Dans l’entête par exemple, ou dans un fichier js appelé dans l’entête, ou dans le corps de la page avec les balises adequat.

      hope it helps :-)

      Répondre à ce message

      • (logo)
        Bien ! 19 mars 2007 19:51, par Christophe Boucher

        Quelque chose doit m’échapper...

        j’ai mis le script dans un fichier newsjquery.js que j’appelle par <SCRIPT LANGUAGE=Javascript SRC="#CHEMIN_SQUELETTE/newsjquery.js"></SCRIPT> (un coup dans head, un coup dans body), ajouté le newsticker dans le css, mais ça ne produit tout le temps qu’une simple liste... et même quand j’insère le script direct dans la page entre les balises adéquates...
        (La liste est, pour la mise en place, le copier coller du code donné ici en exemple).

        Pourtant j’utilise 1.9.2 (si j’ajoute #INSERT_HEAD ça me renvoie bien le fait qu’il est déclaré 2 fois, donc jQuery semble bien présent)

        J’ai fait une erreur quelque part ? (j’ai testé en désactivant tous les plugs)
        J’ai loupé une étape ?

        Répondre à ce message

        • (logo)
          Bien ! 17 avril 2007 18:23, par Aymeric jacquet

          En fait, il manque un bout du script dans la version proposée dans l’article, bout que l’on retrouve dans la démo en ligne ;)

          soit :

          $(document).ready(
          function()

          $("#news").newsTicker() ;

          ) ;

          Avec la mise en forme qui va bien, désolé le module d’édition de commentaire m’a reformaté tout ça. :(

          Ce qui lance le script. ;)

          A coller à la fin du code js.

          Répondre à ce message

  • (logo)

    Firefox

    2 janvier 2008 16:56, par Flopy

    Salut salut,

    moi j’ai un ti probleme, j’ai l’impression que ça merde avec firefox (2.0.0.11)
    sa s’affiche une fois, puis apres ça affiche tout la liste !

    donc je comprend pas bien, si ça vous le fait vous aussi :

    http://www.over-book.com

    Répondre à ce message

    • (logo)
      Firefox 3 janvier 2008 20:06, par jmica

      j’ai exactement le même problème sur la même version de firefox sur PC
      avec un site en spip 1.9.2.
      Sur le mien cela n’affiche pas toute la liste mais 2 éléments de la liste
      avec firebug je vois bien le problème mais je ne sais pas pourquoi il fait cela :

      <li style="opacity: 0.9999; display: block;">
      </li>
      <li style="display: block; opacity: 0.9999;">
      </li>
      <li style="display: none; opacity: 0.9999;">
      </li>
      <li style="display: none; opacity: 0.9999;">

      on voit bien qu’il met deux des éléments en display : block
      et quand cela arrive il y a un ralentissement juste avant dans le passage du code au niveau de l’overflow et systématiquement il y a deux éléments en même temps.

      par contre, j’ai regardé ton code et l’on a pas du tout la même chose !!

      <li style="">
      Visitez
      <a href="http://www.art-touch.com/?u=florent">Art-Touch</a>
      , agence création site internet, créer un site internet administrable (php/MySQL)
      </li>
      <li style="display: list-item;">Merci pour votre visite.</li>

      mais le problème est le même.
      si quelqu’un a une idée, je suis preneur.

      désolé je ne peux mettre de lien car les clients refusent la diffusion tant que le site n’est pas fini

      Répondre à ce message

      • (logo)
        Firefox 4 janvier 2008 17:33

        encore moi :-)

        j’ai toujours le même problème mais j’ai fait du cache misére :-(

        BIDOUILLE :
        mon ID news je lui ai rajouté "overflow:hidden ;"
        et maintenant je n’ai plus la deuxième image qui s’affiche.

        par contre cela passe une image de temps en temps (celle qui se mettait en deux)

        Je cherche toujours la solution !!

        Répondre à ce message

  • (logo)

    Bandeau d’actualité

    4 janvier 2008 18:44, par Flopy

    voici ton bonheur :

    http://jqueryjs.googlecode.com/svn/trunk/plugins/newsticker/

    ça devrai marché ;)

    le code est erroné ici !!

    Répondre à ce message

    • (logo)
      Bandeau d’actualité 23 janvier 2008 11:39, par jmica

      Merci Flopy :-)

      en résumé :

      j’ai pris "jquery.newsticker.js" sur le lien que tu as mis,
      j’y ai rajouté la ligne :

      $(document).ready(function(){$("#news").newsTicker();} )

      et cela fonctionne très bien :-)

      Répondre à ce message

  • (logo)

    Bandeau d’actualité

    12 février 2008 12:06, par jmica

    Après différents tests navigateur,
    je me rend compte qu’il ne fonctionne pas sur MAC avec Safari 3.0.4
    Sur safari il affiche la première image, ensuite il la masque mais il n’affiche pas la suivante.
    si quelqu’un a une idée sur le problème, je suis preneur.

    Bonne journée

    jmica !

    pour info, cela fonctionne sous

    PC :
    IE6, IE7, Firefox 2.0.12

    MAC :
    Firefox 1.5
    Opéra 9.24
    et même Netscape 7.2

    Répondre à ce message

  • Pour un défilement de gauche à droite ou de droite à gauche c’est possible ????
    c’est un autre code ? ou c’est celui la mais bidouillé
    Merci à vous

    Répondre à ce message

  • (logo)

    Bandeau d’actualité

    23 mars 2008 01:11, par igedmedia

    Si je souhaite mettre plusieurs bandeaux d’actus en utilisant spip, je constate que un affichage incoherent.
    Ci dessous le script que j’ai testé , avez vous une idée comment resoudre le bug ???
    merci par avance

    jQuery.fn.newsTicker = jQuery.fn.newsticker = function(delay)

    return this.each(
    function()

    if(this.nodeName.toLowerCase() != "ul") return ;
    delay = delay || 5000 ;
    var self = this ;
    self.items = jQuery("li", self) ;
    // hide all items (except first one)
    self.items.not(":eq(0)").hide().end() ;
    // current item
    self.currentitem = 0 ;
    var doTick = function()

    jQuery.newsticker(self) ;

    setInterval(doTick,delay) ;

    )
    .addClass("newsticker")
    .hover(
    function()

    // pause if hovered over
    this.pause = true ;
    ,
    function()

    // unpause when not hovered over
    this.pause = false ;

    ) ;

    jQuery.newsticker = function(el)

    // return if hovered over
    if(el.pause) return ;
    // hide current item
    jQuery(el.items[el.currentitem]).fadeOut("slow",
    function()

    jQuery(this).hide() ;
    // move to next item and show
    el.currentitem = ++el.currentitem % (el.items.size()) ;
    jQuery(el.items[el.currentitem]).fadeIn("slow") ;

    ) ;

    $(document).ready(
    function()

    $("#news1").newsTicker() ;
    $("#news2").newsTicker() ;
    $("#news3").newsTicker() ;

    ) ;

    Répondre à ce message

  • (logo)

    Bandeau d’actualité

    23 mai 2008 11:01

    juste une petite question (je débute désolé) dans l’exemple il y a un appel à "jquery-bandeau.js".. on le trouve où ?
    Merci !

    Répondre à ce message

  • (logo)

    Bandeau d’actualité

    1er octobre 2008 14:08, par Suzanne B.

    S’il vous plait, que dois-je faire ou ajouter pour que ce script fonctionne sur Internet Explorer 7 lorsqu’il est installé dans un spip1.9.2e ?
    Aussitôt que j’installe ce script, IE m’indique en bas à gauche qu’il y a une erreur sur cette page.

    Je sais que ce script dans un spip 1.9.2e fonctionne très bien sur Mozilla. Allez voir sur ce lien dans Mozilla3.0.3 :

    Voir en ligne : http://http://www.conceptvirtuel.ca...

    Répondre à ce message

  • (logo)

    Bandeau d’actualité

    15 octobre 2008 11:42

    Bonjour,

    Très bon script !
    Cependant, comment pourrait-on y ajouter une pagination ?
    En fait, coupler Texotela et Wslide (http://www.webinventif.fr/wslide-plugin/) ;)

    Une idée, un script ?

    Librement,
    Olivier

    Répondre à ce message

  • (logo)

    Bandeau d’actualité

    12 août 2010 11:59, par ChristianD.

    Bonjour,

    Je suis sous Spip 2.1.0, Firefox et j’ai un souci avec le bandeau. A l’affichage, je n’ai qu’un point, comme le début d’une liste et rien d’autre. Tout ça sur fond blanc.

    Quand je regarde le code source, la brève ou l’article apparaissent pourtant bien dans le code mais en plus clair par rapport au texte, comme en arrière plan.

    J’ai pourtant bien créé le fichier newsticker.js, copié le css, ajouté le bout de code ")(jQuery) ;
    " $(document).ready(function()$("#news").newsTicker() ; )" "en fin de page js.... rien n’y fait.

    Comment faire pour faire fonctionner ce bandeau ?

    Merci d’avance.

    Répondre à ce message

    • (logo)
      Bandeau d’actualité 12 août 2010 20:00, par ChristianD.

      Je me réponds à moi-même en partie.

      J’ai réussi à faire apparaitre le titre, le fond mais, mais... ça ne défile pas :-(.

      Y-a un truc que j’ai pas fait ?

      Répondre à ce message


Derniers commentaires