Masquer si clic en dehors

[biboulie]

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 :

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]

Code :

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]

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]

Envoyé par Bovino

Code :

alert("Veuillez activer le javascript");

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

Mieux

Code :

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 )

[RomainVALERI]

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]

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

Code :

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]

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 :

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

[biboulie]

Ca ne marche toujours pas...

Je te remercie pour ton aide mais j'abandonne.
Je vais essayer de me trouver un autre moyen.

[NoSmoking]

Envoyé par biboulie

Ca ne marche toujours pas...

oui mais qu'est ce qui ne marche pas???

dommage de laisser tomber, donnes au moins la partie HTML pour voir l'appel de tes fonctions.

[biboulie]

J'ai un champ de "recherche" dans un input.
Quand je commence à taper dans ce champs, ça me fait apparaitre mon div contenant des propositions de mots (en gros...).

Voici mon code :

Code :

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

[NoSmoking]

dans ton cas il existe un truc tout fait et les explications qui vont avec
Ajax - une autocomplétion pas à pas, l'exemple est ICI

[biboulie]

Merci beaucoup

Le test en tous cas c'est exactement ce que je cherche à faire !

J'ai plus qu'à fouiller pour adapter mon code

[biboulie]

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 :

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 :

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 :

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