Discussion :

[web.bacor]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

JS

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.");
  }
});

[psychadelic]

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

[Invité]

Bonjour,

Un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[web.bacor]

Bonjour à tous,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Malheureusement ce code ne fonctionne pas.

[web.bacor]

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

[web.bacor]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

[psychadelic]

@ 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 )

[Invité]

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

1- Modifier (comme expliqué par psychadelic) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
   this.show();
   setTimeout(function() {
   this.hide();
}, 5000);

2- Ou encore :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

   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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[web.bacor]

2- Ou encore :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[psychadelic]

@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...