Masquer si clic en dehors

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

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, 12h39

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, 13h29

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, 14h52

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

)

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

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, 15h54

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, 22h18

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

**biboulie** · 10/11/2011, 23h07

Ca ne marche toujours pas...

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

**NoSmoking** · 10/11/2011, 23h24

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** · 10/11/2011, 23h36

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 :

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

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** · 10/11/2011, 23h45

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** · 11/11/2011, 00h01

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** · 11/11/2011, 12h46

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

Discussions similaires

Partager

Partager