Masquer si clic en dehors

**biboulie** · 10/11/2011, 11h13

Bonjour,

Je sollicite votre aide car je ne connais pas grand chose en javascript.

Ce bout de code me fait apparaitre un div en dessous d'un champ quand je commence à cliquer dans ce champ.

Ce que je cherche à faire c'est que si je clique en dehors de mon div, ce dernier disparait.

Voici mon code :

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
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
 
<script language="JavaScript" type="text/javascript">
 
function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		alert("Veuillez activer le javascript");
	}
}
 
//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
	if (searchReq.readyState == 4 || searchReq.readyState == 0) {
		var str = escape(document.getElementById('txtSearch').value);
		searchReq.open("GET", 'searchsuggest.php?search=' + str, true);
		searchReq.onreadystatechange = handleSearchSuggest;
		searchReq.send(null);
	}
}
 
//Called when the AJAX response is returned.
function handleSearchSuggest() {
	if (searchReq.readyState == 4) {
		var ss = document.getElementById('search_suggest')
		ss.innerHTML = '';
		var str = searchReq.responseText.split("\n");
		for(i=0; i < str.length - 1; i++) {
			//Build our element string.  This is cleaner using the DOM, but
			//IE doesn't support dynamically added attributes.
			var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
			suggest += 'onmouseout="javascript:suggestOut(this);" ';;
			suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
			suggest += 'class="suggest_link">' + str[i] + '</div>';
			ss.innerHTML += suggest;				
		}
	}
}
 
//Mouse over function
function suggestOver(div_value) {
	div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
	div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
	document.getElementById('txtSearch').value = value;
	document.getElementById('search_suggest').innerHTML = '';
}
 
</script>

Si quelqu'un à une idée ou même une piste pour me faire disparaitre mon div si clic en dehors, je suis preneur

Merci d'avance

**Bovino** · 10/11/2011, 11h39

Code :

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

alert("Veuillez activer le javascript");

Petite question : si JavaScript est désactivé, il va fonctionner comment le alert() ?

Pour le reste, j'imagine que ton regard n'a pas été jusqu'au 3 ou 4e message sous le tien... Equivalent évènement onblur pour une div

**biboulie** · 10/11/2011, 12h29

Merci

En fait j'avais déjà regardé ce post et testé les réponses mais cela ne marche pas chez moi.

Je pense que cela est dû au fait que l'affichage de mon div est dynamique.
Mon div apparait dès que je commence à taper dans un certain champ.

Ce que je cherche à faire c'est que si mon div apparait mais que je décide de cliquer ailleurs que dans mon div alors il disparaisse.

Je continue de chercher...

**RomainVALERI** · 10/11/2011, 14h02

Envoyé par biboulie

En fait j'avais déjà regardé ce post et testé les réponses mais cela ne marche pas chez moi.

Je pense que cela est dû au fait que l'affichage de mon div est dynamique.
Mon div apparait dès que je commence à taper dans un certain champ.

Ce que je cherche à faire c'est que si mon div apparait mais que je décide de cliquer ailleurs que dans mon div alors il disparaisse.

Je continue de chercher...

Avec la solution de NoSmoking, ça devrait marcher...

Qu'est-ce qui ne va pas ?

**biboulie** · 10/11/2011, 14h54

Ben si je me sert ce code que je place avec le bon id et après mon div :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
var oDiv = document.getElementById('la_div');
document.body.onclick = function(e){
  var oElem = e ? e.target : event.srcElement;
  if( oElem !== oDiv){
    oDiv.style.display = 'none'
    alert( 'Y a plus!!!');
  }
}
</script>

J'ai le message "Y a plus!!!" qui apparait dès le chargement de ma page ou dès que je clique n'importe où sur ma page alors que mon div n'est même pas chargé !

A la limite il faut que le message apparaisse seulement si le div est présent.

**NoSmoking** · 10/11/2011, 21h18

Bonsoir,
alert( 'Y a plus!!!'); n'est la que pour visualiser l'action, supprimes le ou mets le en commentaire...

Sinon tu peux tester si il est visible, ou plus exactement non visible

Code :

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

1
2
3
4
5
6
7
8
9
10
var oDiv = document.getElementById('la_div');
document.body.onclick = function(e){
  var oElem = e ? e.target : event.srcElement;
  if( oElem !== oDiv){
   if( oDiv.offsetHeight){
      oDiv.style.display = 'none'
      alert( 'Y a plus!!!');
    }
  }
}

mais pas grand intérêt en fait...

**RomainVALERI** · 10/11/2011, 13h52

Envoyé par Bovino

Code :

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

alert("Veuillez activer le javascript");

Petite question : si JavaScript est désactivé, il va fonctionner comment le alert() ?

Mieux

Code :

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

1
2
3
4
5
6
7
8
9
function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		alert("Votre ordinateur est éteint. Veuillez l'allumer.");
	}
}

@anglophones : ça m'a fait penser à cette histoire... ^^ (pour ce détail : /etc/init.d/network stop ; /etc/init.d/network start

)

**biboulie** · 11/11/2011, 11h46

Bonjour,

Voilà je pense que j'ai trouvé en combinant css et javascript

A priori ça marche sur les principaux navigateurs.

Par contre si quelqu'un qui s'y connait plus que moi pouvez juste me dire si mon code est "propre", se serait sympa

Code javascript que j'ai ajouté à mon précédent code :

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
 
document.onclick = function (e) {
  e = e || window.event;
  var element = e.target || e.srcElement;
 
  if (element.tagName != "INPUT") {
    hidePopup();
  }
};
var popupVisible = false;
 
function showPopup(obj) {
  document.getElementById("popup").style.display = "block";
  document.getElementById("popup").focus();
}
 
function hidePopup() {
  document.getElementById("popup").style.display = "";
}

Code html que j'ai modifié en ajoutant les class :

Code :

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

1
2
3
4
 
<input id="txtSearch" onkeyup="searchSuggest();" onclick="showPopup(this);" type="text" name="keywords" size="10" maxlength="30" autocomplete="off"  value="' . htmlspecialchars(StripSlashes(@$HTTP_GET_VARS["keywords"])) . '" style="width: 145px; height:23px; font-size: 14px; color: #666666;">
 
<div id="popup"  class="popup"></div>

Code css correspondant :

Code :

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

1
2
3
4
5
6
7
8
9
 
#popup {
display: none;
position: relative;
background-color: #ffffff;
text-align: left;
border: 0px solid #330099;
font-family: Arial, sans-serif;
}

D'avance merci

Masquer si clic en dehors

JavaScript

Vue hybride

Discussions similaires

Partager

Partager