SPIP - Contrib

SPIP - Contrib

[ar] [en] [es] [fr] [it]

229 visiteurs en ce moment

[12 commentaires]

Une brève qui défile

jeudi 31 mai 2007, par vianatalia

  • Digg
  • Del.icio.us
  • Facebook
  • Google
  • Technorati

Le but de cette contrib est de permettre à l’équipe de rédaction de faire défiler une brève au choix sans l’intervention du webmestre. Exemple ici.

Principe

Pour faire défiler quelque chose nous ne pouvons pas nous passer de javascript (merci au site jejavascript !). Le principe est très simple : dans le squelette en question (rubrique.html par exemple), il faut procéder en deux étapes :
- Demander le défilement de la brève en question dans la partie du squelette (boucle + javascript)
- Placer la brève à l’endroit choisi dans la partie body et la personnaliser dans la feuille de style correspondante.

Partie head

Dans cette partie nous allons d’abord aller chercher la brève, puis faire appel à javascript et programmer le défilement :

Nous trouvons dans les première et dernière ligne les [ et ] appartenant à (#TITRE), qui se trouve sur la 4ème ligne. Ainsi, s’il n’y a pas de titre, le code javascript ne s’affiche pas. Dans cet exemple, j’ai inclus le titre et le texte dans le défilement (c’est le choix de l’équipe de rédaction). Les deux filtres texte_script et textebrut permettent au texte de s’afficher sans encombre quelque soit la langue et les signes de ponctuation utilisés, sauf les guillemets ("...") qui sont interdits dans ces brèves-là.

Vous pouvez régler la vitesse de défilement à la ligne 13 setTimeout("textdefil()",100);, en remplaçant le chiffre 100. Plus le chiffre est petit, plus le défilement est rapide.

Si vous souhaitez donner le choix à votre équipe de rédaction de faire défiler ou pas une brève parmi d’autres, vous pouvez y ajouter un mot-clef, "faire défiler" par exemple. Dans ce cas, il faudra le créer (dans un groupe de mots-clef "techniques"), en relever l’ID et la placer dans votre boucle : <BOUCLE_Actu (BREVES){id_rubrique}{id_mot=X}{par date}{inverse}{0,1}>.

Partie body

Dans la partie body, nous allons utiliser un formulaire pour afficher la brève en question, en utilisant strictement la même boucle que dans la partie head, sans oublier de la renommer :

Lorsqu’on clique sur la brève, on va à l’URL choisie par l’équipe de rédaction. Si vous souhaitez qu’on arrive à la brève en question, il suffit de changer #URL_SITE par #URL_BREVE dans l’attribut action du formulaire.

Et le CSS correspondant à placer dans votre feuille de style (celle ci-dessous correspond à notre exemple) :

Et voilà votre brève qui défile !

Retour en haut de la page

12 Messages de forum

Voir toute la discussion

1 | 2

  • Répondre à ce message

    31 août 20:26 , par vianatalia
    Une brève qui défile

    Salut, merci pour la correction, que j’ai appliqué dans l’article.

  • Répondre à ce message

    22 août 19:49 , par Loiseau2nuit
    Une brève qui défile

    Hello :)

    Sympa l’idée.

    Mais juste pour pinailler un peu je signale à l’attention de l’aimable assemblée que la syntaxe <script language="JavaScript"> est aussi obsolète et peu standard que la balise <marquee> dont il est question quelques posts plus bas.

    La syntaxe à préférer est la suivante : <script type="text/javascript">

    Et allez comprendre pourquoi, je pense que ca va débloquer pas mal d’erreur parmis celles que j’ai pu lire sur le forum de cet article :)

  • Répondre à ce message

    28 mai 16:12 , par Martin circus
    Pourquoi ne pas utiliser la balise MARQUEE

    Moi perso j ai fait avec marquee j ai eu aucun probleme, ca marche tres bien sous Ie 6 et 7 ainsi que sous firefox 2.

    Si ca peux interressé quelqu un

    <marquee BGCOLOR="red">
            <BOUCLE_Bando(ARTICLES){id_secteur}{titre_mot=bando}>
            <FONT COLOR="white"> [(#TITRE)] </font>
            </BOUCLE_Bando>
    </Marquee>

    mettre ca a l endroit ou on veux et le bandeau et ajouter le mot clef bando dans spip puis. Ensuite suffit de crée un article avec le texte désirer dans le titre et de lui mettre le mot clef bando.

  • Répondre à ce message

    28 mai 08:43 , par asso.bachant
    Une brève qui défile

    Voila je trouve l’idée interessante et je souhaite l’exploiter mais que neni, cela ne fonctionne pas chez moi.

    si vous avez une idée ; Merci.

    Ce que j’ai fait.

    Dnas ma page sommaire.html ; un inclure :

    [(#REM) Entete de la page + titre du site ]

    dans le fichier inc-entete

    dans le fichier inc-menu-deroulant

    <html>
    <head>
    <BOUCLE_Actu (BREVES){id_rubrique}{par date}{inverse}{0,1}>

    [<script language="JavaScript">
    <!-- //PLF-http://www.jejavascript.net/
    var position=0;
    var msg="(#TITRE|texte_script|textebrut) [(#TEXTE|texte_script|textebrut)]";
    var msg="          "+msg;
    var longue=msg.length;
    var fois=(100/msg.length)+1;
    for(i=0;i<=fois;i++) msg+=msg;
    function textdefil() {
    document.actus.deftext.value=msg.substring(position,position+100);
    position++;
    if(position == longue) position=0;
    setTimeout("textdefil()",100);
    }
    window.onload = textdefil;
    //-->
    </script>

    ]

    </BOUCLE_Actu>
    </head>

    <body>

    <div id='nav-container'>
            <B_rubriques>
            <ul id="nav">
                    <ul>
                    <BOUCLE_rubriques(RUBRIQUES) {racine}{titre_mot = menu_haut } {par num titre, titre}>
                            <li>
                            <a href="#URL_RUBRIQUE" class="intitule">[(#TITRE|supprimer_numero|couper{80})]</a>
                            </li>
                    </BOUCLE_rubriques>
                    </ul>
            </ul>
            </B_rubriques>
    </div>

    <BOUCLE_ReActu(BREVES){id_rubrique}{par date}{inverse}{0,1}>
    <div id="actus">
    <form name="actus" action="#URL_SITE" method="post">                       
    <input name="deftext" type="submit" value="deftext" size="100">
    </form></div> </BOUCLE_ReActu>

    </body>
    </html>

    sinon j’ai essayé aussi

    <SCRIPT LANGUAGE=JavaScript>
    /*
    SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
    http://www.editeurjavascript.com
    */
    ejs_box2_message = new Array;
    ejs_box2_message[0] = '<BOUCLE_appolitiquea_breves(BREVES){tous}{par date}{inverse}{0,1}>#TITRE :[(#INTRODUCTION)]BOUCLE_appolitiquea_breves
    ejs_box2_message[1] = '<BOUCLE_appolitiqueb_breves(BREVES){tous}{par date}{inverse}{1,1}>#TITRE :[(#INTRODUCTION)]BOUCLE_appolitiqueb_breves

    ejs_box2_actual = 0;
    ejs_box2_html_flag = 0;

    function ejs_box2_go()
    {
    if(document.getElementById)
    {
    ejs_box2_char = 1;
    ejs_box2_affich(ejs_box2_actual)
    ejs_box2_actual++;
    if(ejs_box2_actual >= ejs_box2_message.length)
    ejs_box2_actual = 0;
    }
    }

    function ejs_box2_affich(lactual)
    {
    var pix = ejs_box2_message[lactual].charAt(ejs_box2_char);
    if(pix == "<")
    ejs_box2_html_flag = 1;
    if(pix == ">")
    ejs_box2_html_flag = 0;
    var texte = ejs_box2_message[lactual].substring(0,ejs_box2_char);
    document.getElementById("ejs_box2_box").innerHTML = texte;
    if(ejs_box2_char < ejs_box2_message[lactual].length)
    {
    ejs_box2_char++;
    if(ejs_box2_html_flag == 1)
    ejs_box2_affich(lactual);
    else
    setTimeout("ejs_box2_affich("+lactual+")",50)
    }
    else
    setTimeout("ejs_box2_go()",3000)
    }

    window.onload = ejs_box2_go;
    </SCRIPT>

    Mais même résultat ; ou est mon erreur ??

    @micalement

  • Répondre à ce message

    22 février 22:49 , par cergem
    Une brève qui défile

    bon moi j’ai aussi un breve qui defile trés bien mais seulement je ne sais pas avec le spip 1.92 cela ne marche pas quand je lance cela sur le net mais dans le local ça marche trés bien si vous en savez qlq chose je voudrais bien que vous puissiez m’aider, quelqu’un a dit que dans site/ecrire/inc/texte.php3 dans la ligne 375 je crois il a une interdiction pour le script mais pourquoi à la maison (dans le local sa marche mais pas sur le net ? je suis hebergé chez free.fr voici le script c’est vraiment cool et trés beau, je l’ai moi tripoter pour l’adapter au spip

    <SCRIPT LANGUAGE=JavaScript>
    /*
    SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
    http://www.editeurjavascript.com
    */
    ejs_box2_message = new Array;
    ejs_box2_message[0] = '<BOUCLE_appolitiquea_breves(BREVES){tous}{par date}{inverse}{0,1}><B><u>#TITRE</u> :</b>[(#INTRODUCTION)]</BOUCLE_appolitiquea_breves>';
    ejs_box2_message[1] = '<BOUCLE_appolitiqueb_breves(BREVES){tous}{par date}{inverse}{1,1}><B><u>#TITRE</u> :</b>[(#INTRODUCTION)]</BOUCLE_appolitiqueb_breves>';

    ejs_box2_actual = 0;
    ejs_box2_html_flag = 0;

    function ejs_box2_go()
    {
    if(document.getElementById)
    {
    ejs_box2_char = 1;
    ejs_box2_affich(ejs_box2_actual)
    ejs_box2_actual++;
    if(ejs_box2_actual >= ejs_box2_message.length)
    ejs_box2_actual = 0;
    }
    }

    function ejs_box2_affich(lactual)
    {
    var pix = ejs_box2_message[lactual].charAt(ejs_box2_char);
    if(pix == "<")
    ejs_box2_html_flag = 1;
    if(pix == ">")
    ejs_box2_html_flag = 0;
    var texte = ejs_box2_message[lactual].substring(0,ejs_box2_char);
    document.getElementById("ejs_box2_box").innerHTML = texte;
    if(ejs_box2_char < ejs_box2_message[lactual].length)
    {
    ejs_box2_char++;
    if(ejs_box2_html_flag == 1)
    ejs_box2_affich(lactual);
    else
    setTimeout("ejs_box2_affich("+lactual+")",50)
    }
    else
    setTimeout("ejs_box2_go()",3000)
    }

    window.onload = ejs_box2_go;
    </SCRIPT>

    je compte sur votre participation

    moi c’est Cerge Hello’MBO

  • Répondre à ce message

    29 septembre 2007 10:56
    Une brève qui défile

    Bonjour a tous ... C’est fou mais tout marche bien et dès que je rajoute un doctype XHTML en début de ma page, ben ca marche plus ... Vraiment, je ne comprends pas. Vous auriez une idée ?

  • Répondre à ce message

    25 juin 2007 14:36
    Rien ne défile

    J’ai trouvé la solution... j’ai enlevé le id-rubrique. Par contre, seul le titre défile... quand j’essaye de faire défiler le texte, cela ne fonctionne pas... :-(

  • Répondre à ce message

    25 juin 2007 13:10
    Rien ne défile

    Une petite idée du pourquoi sur mon site rien de défile ?

  • Répondre à ce message

    6 juin 2007 12:31 , par mailou
    Pourquoi ne pas utiliser la balise MARQUEE

    Bonjour, Je rejoins Valentin, jusqu’à présent pour certaines informations j’utilisais <marquee></marquee>, mais il est vrai que cette proposition peut être utilisée de façon intelligente car le défilement d’un texte permanent et répété est assez gênant, mais bienvenue à cette proposition de brève défilante.

  • Répondre à ce message

    4 juin 2007 11:27 , par Valentin
    Pourquoi ne pas utiliser la balise MARQUEE

    Cette balise est une balise propriétaire microsoft IE. Donc elle n’est pas prévu pour les autres navigateurs même si elle est aujourd’hui aussi (mal) interprétée par certains navigateurs modernes. De plus, cette balise n’a jamais rejoint les spécifications html du W3C depuis son introduction, déjà ancienne... un signe pour ne pas l’utiliser ?

1 | 2

Répondre à cet article

Retour en haut de la page

Mots-clés

Ça discute par ici

Ça Spip par là

SPIP Blog

1 | 2 | 3 | 4

SPIP Party

1 | 2 | 3 | 4 | 5

SPIP Forums

1 | 2 | 3 | 4 | 5

SPIP-Zone

1 | 2 | 3 | 4 | 5

SPIP Svn

1 | 2 | 3 | 4 | 5

SPIP | Squelette | | Plan du site | Suivre la vie du site RSS 2.0