Avec cette action vous pouvez faire défiler verticalement les données saisies entre les shortcodes
{up scroller}suite d'éléments{/up scroller}Attention :
- définir un style="height:..." aux images (pas de height="...")
- scroller: nombre d'élément ou hauteur du bloc en px
Style CSS
- id: Identifiant
- class: classe(s) pour la balise principale
- style: style inline pour la balise principale
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
paramètres Javascript pour configuration
- newsPerPage = 4: nombre de blocs par page. Idem option principale
- navigation = true: affiche la navigation haut/bas
- autoplay = true: active la lecture automatique
- direction = up: sens de défilement (up/down)
- animationSpeed = normal: normal, slow ou fast
- newsTickerInterval = 4000: autoplay interval en ms
- pauseOnHover = true: arrêt défilement lors survol souris
Saisie du contenu
Les éléments à scroller sont insérer entre le shortcode ouvrant et le shortcode ferment. Nous allons voir comment les saisir.
du contenu HTML
Le résultat
Ligne 1
Ligne 2
Ligne 3
Ligne 4
Ligne 5
Ligne 6
Ligne 7
Ligne 8
Le shortcode
{up scroller=4
| class=bd-gris ph1
| css-head=#id p[margin:0]}
<p>Ligne 1</p>
<p class="bg-bleuPale tr">Ligne 2</p>
<div style="background:yellow">Ligne 3</div>
<p>Ligne 4</p>
<p>Ligne 5</p>
<p>Ligne 6</p>
<p>Ligne 7</p>
<p>Ligne 8</p>
{/up scroller}
Les explications
L'action scroller reçoit comme paramètre le nombre de ligne à afficher.
class ajoute un filet gris et un padding à gauche et à droite.
css-head est une règle générale à cette instance de l'action (#id) qui supprime les marges pour les lignes du contenu entre les shortcodes
Tous les blocs de premier niveau sont considérés comme des éléments par scroller.
un élément structure (ul, ol, dl, ...)
Le résultat
Le shortcode
{up scroller=60px | class=bg-beige}
<ul style="list-style:inside square; padding-left:0">
<li class="t-rouge list-none">{up icon=ok,green}Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
<li>Ligne 4</li>
<li>Ligne 5</li>
<li>Ligne 6</li>
<li>Ligne 7</li>
<li>Ligne 8</li>
</ul>
{/up scroller}
Les explications
Pour cet exemple, nous indiquons la hauteur du scroller en pixel et non en nombre de lignes.
Le contenu ne comportant qu'un bloc de premier niveau, il est utilisé comme bloc principal pour le scroller et ses blocs internes deviennent les lignes.
Le style de la balise UL est conservé. Ce qui permet de changer la puce et supprimer la marge gauche
Avec tag séparateur
Le résultat
Bloc 1
Bloc 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna. Fusce nibh.
Bloc 3
Très peu de texte
Le shortcode
{up scroller=1 | class=bg-beige}
<h5>Bloc 1</h5>
{up lorem-placeimg=tech | style=height:200px}
{===}
<p><strong>Bloc 2</strong></p>
<p>Lorem ...</p>
{===}
<p>Bloc 3</p>
{/up scroller}
Les explications
Chacune des parties séparées par les tags {====} (minima 3 signes égal) est considérée comme un élément à scroller. Le début de chaque élément s'arrête bien en haut du bloc scroller.
Le nombre d'éléments à afficher simultanément étant précisé, la hauteur du bloc est celle du premier élément.
Avec d'autres actions
csv2list
Le résultat
Le shortcode
{up scroller=5}
{up csv2list=https://lomart.fr/images/demo/android-version.csv | leaders}
{/up scroller}
Les explications
On ne peut guère faire plus simple. L'action csv2list retourne une structure HTML liste à partir d'un fichier CSV. Ce code est ensuite pris en charge par scroller
jcontent-by-categories
Le résultat
18 December 2022 par lomart
18 December 2022 par lomart
1 October 2022 par lomart
15 September 2022 par lomart
17 August 2022 par lomart
17 September 2022 par lomart
25 November 2022 par lomart
10 October 2022 par lomart
Le shortcode
{up scroller=5
| style=border:2px solid #369
| css-head=#id .treadmill-unit[outline:1px solid #369;padding-left:5px]}
{up jcontent-by-categories=8 | maxi=8 | main-tag=0}
<b>{title}</b> {subtitle}<br><small>{date-crea} par {author}</small>
{/up jcontent-by-categories}
{/up scroller}
Les explications
Nous utilisons l'action jcontent-by-categories pour récupérer les 8 derniers articles. La seule subtilité est de récupérer chaque élément séparément. Pour cela nous utilisons main-tag=0
Au niveau des options scroller, juste des ajouts de CSS pour soigner la présentation.
Le résultat
meteo-concept
des prévisions sur mesure
affiche les prévisions météo à la date choisie pour un lieu donné.
Lire la suite crée le 18 December 2022 par lomart
gotop
bouton pour retour haut de page
affiche un bouton pour retour au début de la page avec un cercle indiquant la position dans la page
Lire la suite crée le 18 December 2022 par lomart
ajax-view
Permet le chargement ultérieur de contenu dans une page.
Lire la suite crée le 1 October 2022 par lomart
file-office-view
Affiche des fichiers créés par la suite Microsoft Office
Lire la suite crée le 15 September 2022 par lomart
file-in-content
affiche un bloc selon un template à partir d'un fichier texte et d'une image.
Lire la suite crée le 17 August 2022 par lomart
Le shortcode
{up scroller=230px
| css-head=#id .treadmill-unit:nth-of-type(even)[opacity:0.2]}
{up jcontent-by-categories=8 | maxi=5 | main-tag=0
| template=article-avec-image}
{/up scroller}
Les explications
Pour cet exemple, hormis l'utilisation d'un template défini dans le prefs.ini de l'action jcontent-by-categories, nous utilisons les mêmes options.
La difficulté est de ne pas maitriser la hauteur des différents éléments. L'action utilise la hauteur du premier pour tous les éléments. Comme cela peut poser des problèmes, j'utilise une hauteur en pixels scroller=230px et une astuce CSS qui diminue l'opacité du 2ème élément (qui est pair).
et les autres
Potentiellement, toutes les actions qui retournent un contenu structuré sont utilisables
😉Au besoin, créez ou modifiez une action pour obtenir vos données dans un format accepté par scroller
upactionslist (1) tabslide (1) toc (1) scroller (6) icon (2) lorem-placeimg (1) csv2list (1) jcontent-by-categories (2) jcontent-info (1)