Comment fermer un evenement après 5 secondes

Bonjour à tous,

débutante, pouvez vous me dire comment je peux fermer cet événement ("Votre réservation a bien été prise en compte.") au bout de 5 secondes???
Grand merci d'avance.

HTML

Code:

---

<div id="signature"></div>

---

JS

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//creation d evenement (fonction bouton valider "signature" ) validate.addEventListener("click", function() { if (clickX.length > 0) { timerControl.init(); reservation.activation(); domMaster.loadCanv(); domMaster.loadResa(); domMaster.hideInfo(); popupMaster.hideCanv(); popupMaster.validation("Votre réservation a bien été prise en compte."); } else if (clickX.length == 0) { popupMaster.erreur("Vous devez signer pour valider la réservation."); } });

---

1 - tu places le code qui referme le message dans une fonction.
2 - dans le clic qui ouvre ton message tu termines par l'appel de cette fonction, en utilisant un setTimeout => https://developer.mozilla.org/fr/doc...ope/setTimeout
qui te permet d'indiquer intervalle de temps à attendre avant son déclenchement

Bonjour,

Un truc du genre :

Code:

---

popupMaster.validation("Votre réservation a bien été prise en compte.").delay( 5000 ).validation(""); // (5000 : 5 secondes)

---

Attention à la terminologie : l’évènement c’est le "click". Ce que tu veux fermer ça s’appellerait plutôt une popup / popover (tout le monde n’est pas d’accord sur le terme), et personnellement je dirais une boîte de message / d’information.

Le code que tu montres fait appel à des objets (domMaster, popupMaster, etc.) qui semblent provenir de bibliothèques tierces. Si tu ne nous montre pas de quelle(s) bibliothèque(s) il s’agit, nous ne pourrons pas t’aider précisément.

Enfin, attention à l’accessibilité : peut-être que 5 secondes est un délai trop court pour les personnes ayant un handicap visuel ou cognitif.
Autre scénario, si l’utilisateur ou l’utilisatrice a changé d’onglet pendant l’opération, il ou elle risque de ne pas voir le message. À la place, je rajouterais un bouton permettant de fermer le message à la main.

Note, j’ai vu ton message sur Alsacréations. Si l’un ou l’autre des sites où tu as posé ta question t’apporte une solution, ce serait sympa si tu prenais le temps de revenir sur les autres pour indiquer comment tu as résolu ton problème :)

Bonjour à tous,

Code:

---

popupMaster.validation("Votre réservation a bien été prise en compte.").delay( 5000 ).validation(""); // (5000 : 5 secondes)

---

Malheureusement ce code ne fonctionne pas.

Watilin à raison, c'est plutôt une message d'information. mais cette information doit se fermer après x secondes. sans perturber la condition else

il est vrai qu'il y a une fonction validation. c'est peut être la que je dois rectifier???

Code:

---

1 2 3 4 5 6 7 8 9

//STATION OUVERTE- Position et style appliquées au texte validation: function(text){   alertElm.style.backgroundColor = "#32C400"; this.show(); alertElm.innerHTML = text; //gestionnaire d'évènements pour click alertElm.addEventListener("click",this.hide); }

---

Citation:

---

Envoyé par Watilin

Attention à la terminologie : l’évènement c’est le "click". Ce que tu veux fermer ça s’appellerait plutôt une popup / popover (tout le monde n’est pas d’accord sur le terme), et personnellement je dirais une boîte de message / d’information.

Le code que tu montres fait appel à des objets (domMaster, popupMaster, etc.) qui semblent provenir de bibliothèques tierces. Si tu ne nous montre pas de quelle(s) bibliothèque(s) il s’agit, nous ne pourrons pas t’aider précisément.

Enfin, attention à l’accessibilité : peut-être que 5 secondes est un délai trop court pour les personnes ayant un handicap visuel ou cognitif.
Autre scénario, si l’utilisateur ou l’utilisatrice a changé d’onglet pendant l’opération, il ou elle risque de ne pas voir le message. À la place, je rajouterais un bouton permettant de fermer le message à la main.

Note, j’ai vu ton message sur Alsacréations. Si l’un ou l’autre des sites où tu as posé ta question t’apporte une solution, ce serait sympa si tu prenais le temps de revenir sur les autres pour indiquer comment tu as résolu ton problème :)

---

Il est vrai qu'il y a une fonction validation dans une autre objet, c'est peut être la que je dois rectifier mais comment???

Code:

---

1 2 3 4 5 6 7 8 9

//STATION OUVERTE- Position et style appliquées au texte validation: function(text){   alertElm.style.backgroundColor = "#32C400"; this.show(); alertElm.innerHTML = text; //gestionnaire d'évènements pour click alertElm.addEventListener("click",this.hide); }

---

@ web.bacor
c'est quoi tes objets timerControl, domMaster, popupMaster ?
ils sortent d’où ?
(question déjà posée par Watilin et à laquelle tu n'a toujours pas répondu )

@psychadelic
Sauf erreur, elle a trouvé et montrer (2 fois...) le bout de code * à modifier.

1- Modifier (comme expliqué par psychadelic) :

Code:

---

1 2 3 4

this.show(); setTimeout(function() { this.hide(); }, 5000);

---

2- Ou encore :

Code:

---

1 2	this.show(); setTimeout(this.hide, 5000);

---

3- ou, puisqu'on utilise jQuery (avec .delay()) :

Code:

---

this.show().delay( 5000 ).hide();

---

4- ou (avec effet .fadeOut()) :

Code:

---

this.show().delay( 5000 ).fadeOut();

---

* Bout de code qui répond déjà à la recommandation de Watilin, puisque le message se ferme aussi au clic dessus :

Code:

---

alertElm.addEventListener("click",this.hide);

---

Citation:

---

Envoyé par jreaux62

2- Ou encore :

Code:

---

1 2	this.show(); setTimeout(this.hide, 5000);

---

---

Bonjour et un GRAND GRAND MERCI

this.show();
setTimeout(this.hide, 5000);

fonctionne à merveille. c'est vraiment tout bête mais qu'en on débute c'est pas évident.
Je vous souhaite à tous de passer une excellente journée parce que pour moi ça va être le cas.

encore Merci pour votre aide.

A priori, les 4 codes fonctionnent. Teste-les !

• les 2 premiers sont en JavaScript "pur"
• le 2 derniers en syntaxe jQuery

N.B. Pense à mettre des :plusser: aux messages qui t'ont aidés.
Ça fait toujours plaisir...

Citation:

---

Envoyé par jreaux62

@psychadelic
Sauf erreur, elle a trouvé et montrer (2 fois...) le bout de code * à modifier.

---

le code à modifier, je veux bien, mais ça n'explique en rien de quelle librairie ou autre qui donnent les objets timerControl, domMaster, popupMaster... :roll:

Citation:

---

Envoyé par psychadelic

le code à modifier, je veux bien, mais ça n'explique en rien de quelle librairie ou autre qui donnent les objets timerControl, domMaster, popupMaster... :roll:

---

bonjour Spychadelic.

ta question tombe bien, j'avais mis tous mes objets dans un dossier reservelo.js et pour ma soutenance, on me demande de créer un fichier par objet.
dès que je touche quelque chose ça foire...

peux tu m'aider ou me donner un exemple?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390

//================================================================= //On accède aux elements contenus dans les Id avec la méthode getElementById() //================================================================= var infoElm = document.getElementById("divInfo"); var infoElm = document.getElementById("divInfo"); var cartoucheInfoElm = document.getElementById("cartoucheInfo"); var mapElm = document.getElementById('map'); var maskElm = document.getElementById("divMask"); var canvDivElm = document.getElementById("divCanv"); var signElm = document.getElementById("signature"); var resaElm = document.getElementById("pResa"); var alertElm = document.getElementById("divAlert");   //================================================================== //CREATION VARIABLE globale POPUPMASTER pour la gestion des fenetres, erreurs, validation //==================================================================     var popupMaster = {   //MONTRER - Position et style appliquées show: function(){ maskElm.style.zIndex = "104"; alertElm.style.display="initial"; maskElm.style.display = "initial"; },   //CACHER- Position et style appliquées selon conditions hide: function(){ if(canvDivElm.style.display=="initial") { alertElm.style.display = "none"; maskElm.style.zIndex = "99"; } else { maskElm.style.zIndex = "99"; alertElm.style.display = "none"; maskElm.style.display = "none"; } },   //MONTRER LE CANVAS - Position et style appliquées showCanv: function(){ redraw(); maskElm.style.display = "initial"; canvDivElm.style.display = "initial"; },   //CACHER LE CANVAS - Position et style appliquées hideCanv:function(){ maskElm.style.display = "none"; canvDivElm.style.display = "none"; clear(); },   //STATION FERMEE - Position et style appliquées au texte erreur: function(text) { alertElm.style.backgroundColor = "#E00000"; this.show(); alertElm.innerHTML = text; //gestionnaire d'évènements pour click alertElm.addEventListener("click",this.hide); },   //STATION OUVERTE- Position et style appliquées au texte validation: function(text){   alertElm.style.backgroundColor = "#32C400"; this.show(); alertElm.innerHTML = text; this.show(); setTimeout(this.hide, 3000);     }   }   //================================================================== //CREATION VARIABLE RESERVATION //==================================================================   var reservation = {   //Iititalisation coordonnées de la station init: function(name,address,spot,bikLft,open){ this.open= open; this.name = name; this.address = address; this.spot = spot; this.bikesLeft=bikLft; domMaster.infoResa(); },   //récupération les infos stockées dans l'api storage activation: function(){ sessionStorage.active = true; sessionStorage.name = this.name; sessionStorage.address = this.address; sessionStorage.setItem("imgCanvas",canvas.toDataURL()); },   refresh: function(){ //Recharge les infos du sessionStorage si besoin if(sessionStorage.active=="true") { timer.minutes=sessionStorage.minutes; timer.secondes=sessionStorage.secondes; domMaster.loadResa(); domMaster.loadCanv(); } else { domMaster.noResa(); } } }   //================================================================== //CREATION VARIABLE DOMMASTER - contenu visuel appartenant au DOM //==================================================================   var domMaster = {   //creation elements de la station infoResa: function(){ cartoucheInfoElm.innerHTML = ""; infoElm.style.padding = "15px"; infoElm.style.flex = 1; mapElm.style.borderRadius = " 0px 0 0 0px"; var h2InfoResa = document.createElement("h2"); var pInfoResa = document.createElement("p"); var btnResa = document.createElement("BUTTON");   //gestionnaire d'evenement bouton validation de réservation selon station ouverte ou fermee btnResa.addEventListener("click", function(){ if(reservation.open!="OPEN") { popupMaster.erreur("Station FERMEE <br/> Vide ou en travaux ! <br/>Veuillez choisir une autre station."); } else if(reservation.bikesLeft==0) { popupMaster.erreur("Actuellement , Il n'y a plus de vélos disponibles à cette station ! Veuillez choisir une autre station."); } else { popupMaster.showCanv(); } });   //modifie le texte si station ouverte ou fermée if(reservation.open=="OPEN") { h2InfoResa.innerHTML="Station OUVERTE"; h2InfoResa.className ="open"; } else { h2InfoResa.innerHTML="Station FERMEE !<br/>Sans velib disponible ou en travaux"; h2InfoResa.className ="close"; }   pInfoResa.innerHTML = reservation.name + " <br><br>" + reservation.address + "<br><br>" + reservation.spot + " places<br>" + reservation.bikesLeft + " vélo(s) disponible(s)"; btnResa.innerHTML = "RESERVATION"; cartoucheInfoElm.appendChild(h2InfoResa); cartoucheInfoElm.appendChild(pInfoResa); cartoucheInfoElm.appendChild(btnResa); infoElm.appendChild(cartoucheInfoElm); },   //cache le contenu si station fermee hideInfo: function(){ infoElm.innerHTML=""; infoElm.style.flex=0; infoElm.style.padding=0; setTimeout(function(){ mapElm.style.borderRadius = "15px"; }, 500); },   //montre le canvas loadCanv: function(){ var img = document.createElement("IMG"); var getImg = sessionStorage.getItem("imgCanvas"); img.src = getImg; img.width = "300"; signElm.innerHTML=""; signElm.appendChild(img); },   //montre validation de la reservation loadResa: function(){ resaElm.innerHTML = sessionStorage.name + "<br>La reservation de votre vélo est validée<br>Elle expirera dans : " + timer.minutes + "mn et " + timer.secondes + "s"; },   //pas de reservation noResa: function(){ signElm.innerHTML =""; resaElm.innerHTML = "Pas de réservation"; } }   //================================================================== //CREATION VARIABLE TIMER - gestion du temps //==================================================================   var timer = {   //delai selon conditions moins: function(){ domMaster.loadResa(); if(this.secondes<=0 && this.minutes<=0) { domMaster.noResa(); popupMaster.erreur("Votre réservation a expirée !"); sessionStorage.active=false; } else if(this.secondes==0) { this.secondes=59; this.minutes--; } else this.secondes--; },   //chargement compteur store: function(){ sessionStorage.minutes=this.minutes; sessionStorage.secondes=this.secondes; } }   ///================================================================== //CREATION VARIABLE TIMERCONTROL - controle du compte a rebours //==================================================================/OBJET   var timerControl = {   ////Iititalisation compteur 20 minutes init: function(){ timer.minutes=20; timer.secondes=0; },   //controle compteur selon station ouverte ou fermée tick: function(){ if(sessionStorage.active=="true") { timer.moins(); timer.store(); } else { domMaster.noResa(); } } }     reservation.refresh();   //gestion du delai d execution setInterval(timerControl.tick, 1000);   //ajout d'un gestionnaire d'element touche document.addEventListener("keydown", function(e){ if(e.keyCode==32) { timer.minutes=0; timer.secondes=3; } })   //================================================================== //CREATION VARIABLE MAP //===================================================================   var map;   function initMap(){ var mapOptions = { center: new google.maps.LatLng(45.7570, 4.8570), disableDefaultUI: true, zoom: 13 }; map = new google.maps.Map(mapElm,mapOptions); }   function markerIcon(isOpen){ if(isOpen=="OPEN") { return "http://maps.google.com/mapfiles/ms/micons/green-dot.png"; } else if(isOpen!=="OPEN") { return "http://maps.google.com/mapfiles/ms/micons/red-dot.png"; } }   //=================================================================================== //etat de chaque station fourni via l'API de JCDecaux. Donnees de l'API entemps reel. format JSON //======================================================================================     //Transfert de donnees de JCDECAUX   ajaxGet("https://api.jcdecaux.com/vls/v1/stations?contract=lyon&apiKey=62f71e1754a2c1f17d690b0c642c0987e254d5af", function(reponse){ var velov = JSON.parse(reponse); //manipulation du tableau var markers = new Array();   //boucle pour initialiser chaque marqueur de la station for(var i=0;i<velov.length;i++) { var staVel = velov[i]; var posX = staVel.position.lat; var posY = staVel.position.lng; var myLatlng = new google.maps.LatLng(posX,posY);   //gestion marker et de ses proprietes var marker = new google.maps.Marker( { position: myLatlng, title:staVel.name, address:staVel.address, totalSpots:staVel.bike_stands, freeSpots:staVel.available_bike_stands, freeBikes:staVel.available_bikes, status:staVel.status, icon:markerIcon(staVel.status) });   //ajoute marker à la fin du tableau markers.push(marker);   //Creation d'evenement pour la reservation marker.addListener("click", function(){ reservation.init(this.title,this.address,this.totalSpots,this.freeBikes,this.status); domMaster.infoResa(); });   //ajoute un nouvel élément A Map. marker.setMap(map); }   var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});     //=================================================================================== // STATION FERMEE - VIDE OU EN TRAVAUX //=============================================================================   //creation d'une station fermee var staVel = { name:"STATION EN TRAVAUX", address:"Rue de Paris", available_bikes:15, status:"TRAVAUX" } var posX = 45.728566; var posY = 4.942278; var myLatlng = new google.maps.LatLng(posX,posY);   //marqueur pour station fermee (fausse) var marker = new google.maps.Marker( { position: myLatlng, title:staVel.name, address:staVel.address, freeSpots:10, freeBikes:staVel.available_bikes, status:staVel.status, icon:markerIcon(staVel.status) });     //====================================== //======================================   //ajoute marker à la fin du tableau markers.push(marker);   //Creation d'evenement pour la reservation marker.addListener("click", function(){ reservation.init(this.title,this.address,this.freeSpots,this.freeBikes,this.status); domMaster.infoResa(); }); marker.setMap(map); })

---

..
C'est pas tres compliqué pourtant, je ne vois pas ou il y pourrait y avoir une difficultée.

1 - créer un fichier "Global.js" avec dadans :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//================================================================= // pointeurs sur les élements utilisés par les différents objets //================================================================= var infoElm = document.getElementById("divInfo"), infoElm = document.getElementById("divInfo"), cartoucheInfoElm = document.getElementById("cartoucheInfo"), mapElm = document.getElementById('map'), maskElm = document.getElementById("divMask"), canvDivElm = document.getElementById("divCanv"), signElm = document.getElementById("signature"), resaElm = = document.getElementById("pResa"), alertElm = document.getElementById("divAlert") ;

---

Puis un autre fichier "popupMaster.js" avec dedans

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// ce fichier utilise "Global.js"   //================================================================== //CREATION VARIABLE globale POPUPMASTER pour la gestion des fenetres, erreurs, validation //==================================================================     var popupMaster = {   //MONTRER - Position et style appliquées show: function(){ maskElm.style.zIndex = "104"; alertElm.style.display="initial"; maskElm.style.display = "initial"; },   //CACHER- Position et style appliquées selon conditions hide: function(){ if(canvDivElm.style.display=="initial") { alertElm.style.display = "none"; maskElm.style.zIndex = "99"; } else { maskElm.style.zIndex = "99"; // .....

---

et ainsi de suite

après dans ta page HTML il faut juste ajouter dans ta page HTML,

Code:

---

1 2 3

<script src="Global.js" defer></script> <script src="popupMaster.js" defer></script>

---

ou de préférence juste avant la balise </body> ( l'option defer ne m'a jamais vraiment convaincu de son efficacité )

si sa plante, alors tu trouvera un message d'erreur dans le debugger de ton navigateur

C'est ce que j'avais fait mais j'avais oublié de charger les scripts dans la page HTML (je comprends que çà ne marché pas) Grand MERCI D'avance. et excellent week-end . tu me sauve la vie....