Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Gotop
Cette action affiche, en bas à droite de votre page, un bouton rond qui remplit 2 fonctions :

  • montrer votre position dans la page
  • remonter au début de la page

Elle est basée sur un script de Ivan Grozdic adapté pour UP

 

🆙 gotop : Affiche un bouton avec indicateur de position pour revenir en haut de page.

Cliquer pour lire la documentation

syntaxe {up gotop}
@version: UP-2.9 @license: GNU/GPLv3 @credit: script Ivan Grozdic de https://codepen.io/ig_design/pen/yrwgwO @tags: Expert
  • gotop: texte ou caractère unicode pour la flèche. ex \25b2, \21ea ou top
  • circle-bgcolor: couleur de fond du cercle
  • circle-color: couleur de la bordure du cercle
  • circle-color-active: couleur de la bordure pour la partie activé
  • icon-color: couleur pour l'icone ou le texte
  • icon-color-hover: couleur pour l'icone ou le texte lors du survol

Divers

  • id: identifiant
  • css-head (base-css): style ajouté dans le HEAD de la page

Ce site en exemple

Comme il est impossible d'utiliser plusieurs fois cette action sur une page, observez le rendu dans cet article.

Pour le mettre en  œuvre sur toutes les pages, j'ai ajouté ce shortcode dans un module personnalisé en position debug.

{up gotop| circle-color-active=#369 | icon-color=#369 | icon-color-hover=#369A}

J'ai modifié les couleurs pour être en accord avec ce site.
Je vous laisse découvrir les autres options dans le petit bandeau bleu en haut de cette démo.

Quelques variations de style

{up gotop}

Par défaut, nous avons une palette de gris

{up gotop=TOP
 | circle-color-active=#F00
 | icon-color=#F00
 | icon-color-hover=#F00A
 | css-head=.progress-wrap::after[font-size:20px;font-weight:bold;]}

L'argument principal est le texte affiché au centre du cercle.
Les 3 options suivantes définissent les couleurs. Notez l'ajout d'une transparence par #F00A ou #FF0000AA dans sa version longue
css-head permet d'ajuster la taille et la graisse du texte

{up gotop=\27a7
| css-head=.progress-wrap::after[
  font-size:40px; font-weight:bold;
  transform:rotate(-90deg);
  left: -2px;   top: 0px;
]}

Ici, j'utilise un caractère Unicode qui est une flèche qui pointe vers la droite.
Je vais donc le tourner vers le haut avec l'option css-head. J'en profite pour ajuster sa taille et sa position.
A vous de déterminer les bonnes valeurs avec l'inspecteur de code de votre navigateur.

Pour info, cette page utilise 6 action(s) :
box (1) listup (1) upactionslist (1) flexbox (1) icon (1) jcontent-info (1)