• [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 
    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\" />" +
    "&nbsp;Bonjour, ceci est une fen&ecirc;tre personnalis&eacute;e <strong>avec une image</strong> centrée.&nbsp;</p>" +
    "<p>Elle va rester affichée trois secondes.</p>";
    mySplashArticle(html,3000);
    Exécuter ce code

       

     

    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

    1
    Mercredi 16 Novembre 2016 à 08:31

    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 :

              cool

     

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :