Fermeture automatique d'une DIV

Bonjour,

Dans une page, j'ai une div qui se ferme automatiquement après quelques secondes :

Code:

---

1 2 3 4 5 6 7 8 9

var timeout; document.onclick = function(){ clearTimeout(timeout); timeout = setTimeout(function(){ if ($('#myDiv').is(':visible')) { $('#myDiv').Hide(); } }, 10000); }

---

Le soucis c'est si je clique en dehors de la div, celle-ci reste ouverte... Ce que je souhaiterai, c'est que la div reste ouverte si des click sont détectés uniquement à l'intérieur de celle-ci...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$(function() { var timeout; $("body").click(function(e) {   if (e.target.id == "myDiv'" || $(e.target).parents("#myDiv'").length) { clearTimeout(timeout); }   timeout = setTimeout(function(){ if ($('#myDiv').is(':visible')) { $('#myDiv').Hide(); } }, 10000);   });     })

---

Si vous avez une idée... merci d'avance. ;)

Bonsoir, en js :

Code:

---

1 2 3 4

let myDiv = document.querySelector('#myDiv'); document.addEventListener('click', function(event) { !myDiv.contains(event.target) ? myDiv.classList.add('hide') : ''; });

---

où myDiv est l'élément que tu veux cacher et la classe hide qui contient display:none.
selon MDN : La méthode Node.contains() renvoie une valeur Boolean (booléenne) indiquant si un nœud est un descendant d'un nœud donné, c'est-à-dire le nœud lui-même, l'un de ses enfants directs (childNodes), l'un des enfants directs des enfants, et ainsi de suite.

Bonjour,

En jQuery cela donne :

Code:

---

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

$(function() { var timeout; $(document) .on("click", function(e) { clearTimeout(timeout); timeout = setTimeout(function() { if ($('#myDiv').is(':visible')) { $('#myDiv').hide(); } }, 10000);   }) .on('click', "#myDiv", function(e) { e.stopPropagation(); }); });

---

stopPropagation() stoppe la propagation des autres événements et exécute seulement le code existant dans son contexte.

Merci pour vos réponses, Hide() masque effectivement la div, mais ce que je recherche précisément à faire, c'est que si clique à l'intérieur de la div celle-ci reste affichée sinon se ferme après 10 sec. Mais si clique ou mouvement de la souris en dehors de la div, cela ne conserve pas la div ouverte mais se fermera automatiquement après 10 sec...

Ci-dessous, c'est un peu brouillon mais c'est un peu ce que je cherche à faire, sauf que dans cet exemple, le mouvement de la souris est aussi externe au lieu d'être interne à la div...

Code:

---

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

$(function() { var timeout; $("body").click(function(e) {   if (e.target.id == "myDiv" || $(e.target).parents("#myDiv").length) { clearTimeout(timeout); timeout = setTimeout(function(){ if ($('#myDiv').is(':visible')) { $('#myDiv').hide(); } }, 10000); } }); $("body").mousemove(function(e) { clearTimeout(timeout); timeout = setTimeout(function(){ if ($('#myDiv').is(':visible')) { $('#myDiv').hide(); } }, 10000); }); });

---

La coloration syntaxique ne te gène pas ?

Citation:

---

Envoyé par SpaceFrog

La coloration syntaxique ne te gène pas ?

---

Bonjour, merci pour la correction, ce que je ne parviens pas à faire c'est à ce que la div se ferme automatiquement après 10 secondes, si aucun mouvement ou click de la souris détecté en dehors de la div mais si inversement mouvement ou click détecté à l'intérieur, la div reste ouverte...

Bonjour,

Citation:

---

... mais si inversement mouvement ou click détecté à l'intérieur, la div reste ouverte

---

pas lu en détail toute la discussion mais tu tirerais avantage à surveiller les événements mouseenter-mouseleave pour gérer ton setTimeout.

Merci, je devrais pouvoir m'en sortir avec ces éléments.