Voici comment afficher du contenu (texte, HTML, JS, CSS ou tout autre contenu) dans un bloc DIV, après un délai que vous aurez préalablement défini, le tout en JavaScript.

Javascript : afficher le contenu d'un bloc HTML après un délai variable photo

C'est écrit en JavaScript pur (vanilla JavaScript), c'est-à-dire sans librairies supplémentaires, et donc compatible avec tous les navigateurs. On utilise innerHTML pour faire apparaître la div après le délai imparti.

Exemple de contenu affiché après un délai

Le texte suivant apparaît 7 secondes après le chargement de la page :

Le code : afficher le contenu d'une DIV après un délai

Voici le style CSS à placer dans l'entête de la page (HEAD) :

<style>
.centered {
    margin:0 auto;
    text-align:center;
}
</style>

Et voici le contenu à placer dans le corps de la page (BODY):


<div class="centered" id="example_div"></div>

<script>
/*
|-----------------------------------------------------------------------
| Delayed DIV text in vanilla JavaScript by Matt 
| URL : https://www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns predefined text in a DIV after a delay.
|
*/
(function(){
var element_id = 'example_div' ; /* name of div containing delayed text */
var delayed_text = "Ceci est un texte d'illustration pour tester l'affichage d'un bloc DIV après un délai défini.<br /><a href='https://www.skyminds.net/'>Codé par Matt <\/a>."; 
var time = 6; /* time in seconds until display */
setTimeout(function(){document.getElementById(element_id).innerHTML = delayed_text;},time*1000);
})();</script>

Fonctionnement du script

Voici comment fonctionne le script : on recherche le bloc DIV qui possède l'identifiant #exemple_div et on lui injecte le contenu de la variable delayed_text après le délai en secondes défini dans la variable time.

Ne pas oublier d'échapper les slash par des antislash dans les balises de fermeture (liens, paragraphes etc) dans la variable delayed_text.

Simple et efficace.

Pour développer votre projet WordPress ou Woocommerce, faites appel à mon expertise pour réaliser un site rapide, performant et fonctionnel.

Contactez-moi

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît.

Articles en rapport:

JavaScript : afficher du contenu dans un bloc DIV après un délai défini

par Matt Lecture: 2 min
0

Pin It on Pinterest

Share This

Spelling error report

The following text will be sent to our editors: