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
- 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 !
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
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.
Suivre les commentaires : |