marquee
Décrié, mais pratique et demandé, une action pour mettre du texte défilant dans vos articles

Sur un script de script JS limarquee de omcg33 (licence MIT)

🆙 marquee : contenu HTML défilant horizontalement ou verticalement

Cliquer pour lire la documentation

{up marquee=label} texte du message défilant {/up marquee} *
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: script JS limarquee de omcg33 @tags: layout-dynamic
  • marquee: le texte de l'etiquette
  • model = base: style CSS dans .upmq-*style*. 0=aucun
  • height (h,hauteur) = 100px: hauteur defaut pour scroll vetical

Style CSS

  • out-class: classe(s) pour div out
  • out-style: style inline pour div out
  • msg-class: classe(s) pour div msg
  • msg-style: style inline pour div msg
  • lbl-class: classe(s) pour div label
  • lbl-style: style inline pour div label
  • lbl-pos: position label : left, right, top, bottom, none
  • lbl-nowrap: 1 = label sur une ligne

Divers

  • id: identifiant
  • filter: conditions. Voir doc action filter (v1.8)

Paramètres Javascript pour configuration

  • direction = left: right, up, down
  • loop = - 1: nombre d'affichage, -1 : infini
  • scrolldelay: delai en millisecondes
  • scrollamount = 50: vitesse
  • circular = 1: mode carousel. si contenu plus large que .str_wrap
  • drag = 1: deplacement msg avec souris
  • runshort = 1: scroll si texte court (visible sans scroll)
  • hoverstop = 1: pause lors survol
  • inverthover: scroll uniquement lors survol

Syntaxe minimale

{up marquee}le texte défilant{/up marquee}
le texte défilant

Les modèles fournis avec le plugin

info-img

{up marquee | model=info-img | lbl-pos=left }
  <strong style="font-size:24px">le texte défilant</strong>
{/up marquee}

Attention: pour afficher la zone label en l'absence d'un titre, il faut indiquer sa position par lbl-pos

le texte défilant

info

{up marquee=infos | lbl-pos=right | model=info | lbl-style=color:yellow}le texte défilant{/up marquee}
le texte défilant
infos

ok

{up marquee=infos| lbl-pos=right | model=ok | lbl-style=color:yellow}
  <strong style="color: red;">le texte défilant</strong>
{/up marquee}
le texte défilant
infos

cahier

{up marquee=une demo de défilement vertical | direction=up 
  | model=cahier | inverthover 
  | H=300px | lbl-nowrap | circular=0 
  | out-class=ombre 
  | out-style=border:#aaa 1px solid; margin-top:10px
}
<p>{up lorem}</p>
<p>{up lorempixel=cats | h=100 | L=800}</p>
<p>{up lorem=decorate,link,ul}</p>
{/up marquee}

inverthover fait que le texte défile uniquement lors du survol par la souris. lbl-nowrap empêche les retours à la ligne pour le libellé

une demo de défilement vertical

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Nam, ut paulo ante docui, augendae voluptatis finis est doloris omnis amotio. Utrum igitur tibi litteram videor an totas paginas commovere? Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Duo Reges: constructio interrete. Quis enim potest ea, quae probabilia videantur ei, non probare? Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Quare attende, quaeso. Hanc ergo intuens debet institutum illud quasi signum absolvere. Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Quid est igitur, inquit, quod requiras?

Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Restatis igitur vos; Ut proverbia non nulla veriora sint quam vestra dogmata. De ingenio eius in his disputationibus, non de moribus quaeritur. Quid nunc honeste dicit? Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. Sed ego in hoc resisto;

Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Ut in voluptate sit, qui epuletur, in dolore, qui torqueatur. Age sane, inquam. Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur. Sed non alienum est, quo facilius vis verbi intellegatur, rationem huius verbi faciendi Zenonis exponere. Explanetur igitur. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Ergo, si semel tristior effectus est, hilara vita amissa est?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non potes, nisi retexueris illa. Eaedem res maneant alio modo. Que Manilium, ab iisque M. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia;

Si enim, ut mihi quidem videtur, non explet bona naturae voluptas, iure praetermissa est; Si alia sentit, inquam, alia loquitur, numquam intellegam quid sentiat; Quae diligentissime contra Aristonem dicuntur a Chryippo. Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur. Quis enim redargueret? At certe gravius.

  • Sapiens autem semper beatus est et est aliquando in dolore;
  • Nihil minus, contraque illa hereditate dives ob eamque rem laetus.
  • Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae.

Utrum igitur tibi litteram videor an totas paginas commovere? Duo Reges: constructio interrete. Quid enim de amicitia statueris utilitatis causa expetenda vides. Eiuro, inquit adridens, iniquum, hac quidem de re; Verum audiamus. Universa enim illorum ratione cum tota vestra confligendum puto. Utilitatis causa amicitia est quaesita. Facile pateremur, qui etiam nunc agendi aliquid discendique causa prope contra naturam vígillas suscipere soleamus. Quam ob rem tandem, inquit, non satisfacit?

promo

{ up marquee | model=promo| <span style="color: #800000;">lbl-pos=left</span>}le texte défilant{ /up marquee}
le texte défilant

Vous pouvez très facilement créer vos modèles en vous inspirant des fichiers css dans /plugins/content/up/actions/marquee/styles

Un bandeau déroulant de logos

Cet exemple correspond à un besoin courant: les logos des sponsors. Il est fait sans modèle, juste quelques options pour l'action Marquee.

{up marquee=<img src="/images/admin/joomla-logo-32.png" width="32px" height="32px"><br>Mes<br>extensions<br>Joomla! 
| lbl-pos=left | height=100px
| out-style=border:2px #069 solid 
| lbl-style=background-color:#069;color:#FFF;font-size:12px;padding:0 10px 
| msg-style=padding:0}
<div style="height:100px">
<a href="http://lomart.fr/extensions/adminorder" target="_blank"><img src="/images/logo-lomart/logo-adminorder.png" alt="adminorder" title="Ordre de tri par défaut des tables articles, plugins, modules et extensions." height="100px" width="100px"></a><!--
--><a href="http://lomart.fr/extensions/bgmax" target="_blank"><img src="/images/logo-lomart/logo-bgmax.png" alt="bgmax" title="Facilite la mise en place d'une image de fond pour votre site." width="100px"></a>
</div>
{/up marquee}

J'ai surligné dans le code, les difficultés rencontrées.

  • Il faut préciser la hauteur des images à la fois pour le script JS, mais également mettre toutes les images dans un bloc avec la hauteur définie. Cela a pour but de réserver la place tant que les images ne sont pas en cache.
  • Il faut également que toutes les images soient sur une seule ligne de code pour éviter les espaces entre-elles. Ce problème classique du HTML est résolu en mettant un commentaire pour simuler le saut de ligne.
MesextensionsJoomla!
adminorderbgmaxLM-PrismCustomCSSJViewerJSContentlistLM-MailModifArtPlugLM-FilterLM-CustomLM-MemoLM-MetaDataLM-ProverbLM-ZoomSCSS-Compiler

Contenu défilant avec des images

Si le texte défilant contient des images, il se peut que la hauteur soit mal calculée car l'image n'est pas encore chargée

Il va falloir user de 2 astuces pour s'en prémunir :

  1. Ajouter un espace de grande taille pour forcer la hauteur de la ligne : <b style="font-size:42px"> </b>
  2. justifier verticalement l'image : style="vertical-align:bottom"

Le code complet avec les 2 astuces surlignées

{up marquee=TEXTE AVEC IMAGE | model=info | lbl-nowrap=1}
<b style="font-size:66px"> </b><strong style="font-size: 16px; color: #be0d34;">Des idées de cadeaux ! 
<img src="/images/icon/rond-rouge.gif" alt="Idées de cadeaux de fin d'année" title="Image cadeau"  style="vertical-align:bottom">
</strong>
{/up marquee}

TEXTE AVEC IMAGE
Des idées de cadeaux ! Idées de cadeaux de fin d'année

On y arrive aussi en fixant un line-height dans le style du texte

<b>{</b>/up marquee<b>}</b></code></pre>
{up marquee=TEXTE AVEC IMAGE | model=info | lbl-nowrap=1}
<strong style="font-size: 16px; line-height:60px; color: #be0d34;">Des idées de cadeaux ! 
<img src="/images/icon/rond-rouge.gif" alt="Idées de cadeaux de fin d'année" title="Image cadeau"  style="vertical-align:middle">
</strong>
{/up marquee}

version 1.8

Pour info, cette page utilise 16 action(s) :
marquee (9) upactionslist (1) lorem (2) lorempixel (1) readmore (1) modal (1) jcontent-info (1)