IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Fermeture automatique d'une DIV


Sujet :

jQuery

  1. #1
    Membre actif
    Inscrit en
    Février 2009
    Messages
    616
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 616
    Points : 249
    Points
    249
    Par défaut Fermeture automatique d'une DIV
    Bonjour,

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

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  2. #2
    Expert éminent sénior

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2013
    Messages
    2 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : Mai 2013
    Messages : 2 174
    Points : 11 289
    Points
    11 289
    Billets dans le blog
    5
    Par défaut
    Bonsoir, en js :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  3. #3
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    Bonjour,

    En jQuery cela donne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  4. #4
    Membre actif
    Inscrit en
    Février 2009
    Messages
    616
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 616
    Points : 249
    Points
    249
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
    	});
    });

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 636
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 636
    Points : 66 655
    Points
    66 655
    Billets dans le blog
    1
    Par défaut
    La coloration syntaxique ne te gène pas ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre actif
    Inscrit en
    Février 2009
    Messages
    616
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 616
    Points : 249
    Points
    249
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    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...

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    ... 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.

  8. #8
    Membre actif
    Inscrit en
    Février 2009
    Messages
    616
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 616
    Points : 249
    Points
    249
    Par défaut
    Merci, je devrais pouvoir m'en sortir avec ces éléments.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Annuler la ferneture automatique d'une div
    Par Ashitaka dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 07/08/2007, 15h14
  2. Erreur '2450' à la fermeture automatique d'une base
    Par willich dans le forum Modélisation
    Réponses: 3
    Dernier message: 01/06/2007, 12h13
  3. Réponses: 36
    Dernier message: 23/05/2007, 18h54
  4. fermeture automatique d'une fenêtre.
    Par darkageof62 dans le forum Langage
    Réponses: 8
    Dernier message: 21/05/2007, 12h32
  5. Fermeture automatique d'une Form
    Par byboleymar dans le forum Langage
    Réponses: 14
    Dernier message: 08/09/2006, 09h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo