Une brève qui défile

Publié le : 31 mai 2007 – Dernière modification le 21 décembre 2021 – par vianatalia – 26 commentaires

1
2
3
4
5
13 votes
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 :

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

[<script type="text/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>

Nous trouvons dans les première et dernière ligne les [ et ] appartenant à (#TITRE), qui se trouve sur la 4e 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 :

<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>

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) :

#actus { position: relative; background: #ed8400; padding: 10px; color: #FFFFFF; font-weight: bold; top: -50px; text-align: left; left: 254px; width: 650px; }
#actus input { font-weight: bold; color: #FFFFFF; border: thin solid #ed8400; background: #ed8400; text-align: left; width: 100%; }
#actus input:hover {cursor:pointer; }

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

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

21 discussions

  • Steph en Bretagne

    Bonjour,

    Merci pour cette contrib.
    Je me posais une question : est-il possible que ce texte défilant apparaisse sur toutes les pages de mon site ? Et si oui, comment faire ?

    Mon but : signaler pendant quelques jours qu’il va y avoir des travaux sur mon site (qui n’affecteront pas bcp le contenu mais rendre des liens inopérants).

    Pour info, je suis sous Sarka-SPIP.

    Par avance, je vous remercie de vos réponses.

    Répondre à ce message

  • bonjour,

    ca fonctionne bien ;
    mais comment afficher plusieurs breves ?
    quand on change le critere de la boucle et qu’on supprime la clause ne faisant appel qu’à une seule breve, plutot que de faire défiler les breves les unes à la suite des autres cela créé un bandeau défilant par breve.

    comment faire pour qu’elles défilent les unes derriere les autres dans le meme bandeau ?

    merci

    Répondre à ce message

  • manue

    Est ce qu’il serait possible d’appliquer la même solution pour faire défiler en page d’accueil les articles les plus récents ?
    Merci d’avance pour vos réponses
    Manue

    Répondre à ce message

  • Finnh

    Voilà, j’ai trouvé : c’était {doublon} qui empêchait le fonctionnement sur la page sommaire.

    Dans le head :

    <!-- ajout pour défilement -->
<BOUCLE_Actu(BREVES) {titre_mot==^defilement} {par date} {inverse} {0,1}>

[<script type="text/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()",150);
}
window.onload = textdefil;
//-->
</script>]

</BOUCLE_Actu>
<!-- fin ajout -->

    Dans « body » :

    <!-- ajout défilement brève -->

<BOUCLE_ReActu(BREVES) {titre_mot==^defilement} {par date} {inverse} {0,1}>
<div id="defiltext">
<form name="actus" action="#URL_BREVE" method="post">			
<input name="deftext" type="submit" value="deftext" size="80">
</form></div> </BOUCLE_ReActu>

<!-- fin ajout -->

    J’ai emprunté une partie du code « éditorial » dans le squelette MiniGriSpip : c’est la brève la plus récente à laquelle est attribué le mot-clé « defilement » qui défile.

    Ce que j’aimerais maintenant c’est arriver à faire défiler à la suite les deux ou trois dernières brèves possédant ce mot-clé... Si quelqu’un a une idée ?

    Répondre à ce message

  • Finnh

    Bonjour,

    J’ai essayé plein d’options pour faire défiler ma brève dans le sommaire (pas eu encore le temps de le tester dans une rubrique - je n’en ai pas l’usage), mais le défilement refuse de s’afficher. Dans la source, le script fonctionne dans le « head », mais rien dans body.

    Le script dans le head :

    <!-- ajout pour défilement -->
<BOUCLE_Actu(BREVES) {titre_mot==^defilement} {doublons} {par date} {inverse} {0,1}>

[<script type="text/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>
<!-- fin ajout -->

    Résultat dans la source :

    <!-- ajout pour défilement -->

<script type="text/javascript">
<!-- //PLF-http://www.jejavascript.net/
var position=0;
var msg="Entretien sur Radio Activ Radio Activ, basée à Langueux (101.9) a diffusé un entretien (une heure) avec trois membres du Collectif Urgence Réchauffement Climatique.";
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>

<!-- fin ajout -->

    Le script dans « body » :

    <!-- ajout défilement brève -->

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

<!-- fin ajout -->

    Résultat dans le source : (Rien à part les commentaires avant et après)

    <!-- ajout défilement brève -->


<!-- fin ajout -->

    Mon site : http://centrale-ploufragan.org

    Si quelqu’un y voit plus clair que moi...

    Merci

    Répondre à ce message

  • emakom

    salut,
    il n’y a pas de d’apostrophes ou de guillemets dans la brève mais le problème persiste toujours.

    Répondre à ce message

  • vianatalia

    Bonjour, vérifiez que votre brève ne contient pas d’apostrophes ou de guillemets, comme je l’indique dans la contrib. Ce peut être un élément bloquant.

    Répondre à ce message

  • emakom

    merci ! de votre apport cas s’affiche mais
    seulement « deftext » et non le texte de la brève quand je précise l’identifiant de la rubrique
    voici le code que j’ai mis a l’endroit voulu :




    avez vous une idée ?

    Répondre à ce message

  • emakom

    salut, j’utilise spip 1.9.2e
    dans le squelette sommaire.html quand j’insère le code sa ne s’affiche sur la page d’accueil , mais cela marche parfaitement avec rubrique.html ,cela veut dire que le texte défilant ne se voit que sur la page de la rubrique dans laquelle se trouve la brève ,peut-on le mettre sur la page d’accueil ?

    Répondre à ce message

  • vianatalia

    Bonjour, une idée : le code se trouve-t-il bien à l’intérieur d’une boucle rubrique ? Cordialement.

    Répondre à ce message

  • vianatalia

    Tout est dans cette ligne :

    var msg="(#TITRE|texte_script|textebrut) [(#TEXTE|texte_script|textebrut)]";

    On ne peut pas faire n’importe quoi car il s’agit de javascript et pas d’HTML, mais n’hésite pas à essayer et nous donner des résultats si tu en as ! Bon courage :-)

    Répondre à ce message

  • josé

    ni avec les logo d’article

    quelqu’un saurait comment faire ?

    Répondre à ce message

  • josé

    en fait ca ne marche pas pour les images dans le texte

    Répondre à ce message

  • josé

    hey
    ça ne defile pas chez moi..
    suis en 1.9.2e, est ce du à ma version de spip ?

    help me please

    Répondre à ce message

  • 1
    Loiseau2nuit

    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

  • 1

    Une petite idée du pourquoi sur mon site rien de 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

  • 3
    Joseph LARMARANGE

    Il existe une balise HTML toute simple pour faire défiler du texte : <marquee></marquee>. (plus d’infos).

    Ne serait-ce pas plus simple que du javascript ?

    • Valentin

      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 ?

    • mailou

      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.

    • Martin circus

      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

  • assobachant

    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

  • cergem

    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

  • 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

  • marabbeh

    Je pense qu’il y a une demande pour ce type d’effet, à laquelle répond cette contrib. Mais je m’étonne que l’auteur n’ait pas précisé que :
    -  la brève ne sera pas visible, si l’utilisateur navigue avec javascript désactivé (cas de certains handicapés)
    -  le défilement peut être génant pour certaines personnes.

    Donc cette contrib paraît intéressante, si votre but n’est pas de faire des sites accessibles.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom