Masquer une Div déroulante après un click à son éxterieur

**atiar** · 09/07/2009, 18h26

Bonjour,
J'ai récupéré un bout de code JavaScript pour avoir une Div glissante (déroulante).
Le problème c'est que cette div reste déroulée même si on click à l'extérieur de ses bornes.
J'ai essayé de modifier un peu le code pour qu'elle se referme, mais je n'ai pas réussi.
Est ce que quelqu'un connaît comment on peu faire?
Voilà mon Code, Merci pour votre aide.

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<html>
<head>
	<title>slide test</title>	
	<style type="text/css">
	.div_contentBox{
		border:1px solid #317082;
		height:0px;
		visibility:hidden;
		position:absolute;
		background-color:#E2EBED;
		overflow:hidden;
		padding:2px;
		width:200px;
 
	}
	.div_content{
		position:relative;		
		width:100%;
	}
	</style>
 
	<script type="text/javascript">	
	var slideDownInitHeight = new Array();
	var slidedown_direction = new Array();
	var slidedownActive = false;
	var contentHeight = false;
	var slidedownSpeed = 3; 
	var slidedownTimer = 20;
	function slidedown_showHide(boxId)
	{
		if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
		if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;	
		if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
		slidedownContentBox = document.getElementById(boxId);
		var subDivs = slidedownContentBox.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='div_content')slidedownContent = subDivs[no];	
		}
		contentHeight = slidedownContent.offsetHeight;
		slidedownContentBox.style.visibility='visible';
		slidedownActive = true;
		slidedown_showHide_start(slidedownContentBox,slidedownContent);
		// ajouter pour fermeture après click extérieur
		var target = (e && e.target) || (event && event.srcElement) ;
		if ( target != slidedownContentBox ) {
			slidedown_showHide_start(slidedownContentBox,slidedownContent) ;
		}
	}
	function slidedown_showHide_start(slidedownContentBox,slidedownContent)
	{
		if(!slidedownActive)return;
		slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
		if(slideDownInitHeight[slidedownContentBox.id] <= 0){
			slidedownActive = false;	
			slidedownContentBox.style.visibility='hidden';
			slideDownInitHeight[slidedownContentBox.id] = 0;
		}
		if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
			slidedownActive = false;	
		}
		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';
		setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);
	}
 
	function setSlideDownSpeed(newSpeed)
	{
		slidedownSpeed = newSpeed;	
	}
 
	document.onclick=check;
/*	function check(e){
		var obj = document.getElementById('box2');
		if(obj.style.visibility=='visible' ){
				var target = (e && e.target) || (event && event.srcElement);
				if(target!=obj) {					
					slidedown_showHide('box2') ;
				}
		}
	} */
	</script>	
	</head>
	<body>
	<div>
	<div id="controleur"><a href="#" onclick="slidedown_showHide('box1');return false;">Essayer</a></div>
	<div class="div_contentBox" id="box1">
		<div class="div_content" id="subBox1">
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
		</div>
	</div>
</div>
<div>

**emmanuel.remy** · 10/07/2009, 10h10

Salut,

Ci-dessous ton code modifié (attention car tu faisais aussi appel à dex box2 qui n'existaient pas

) . Pour ton info, une librairie d'effets, complète et très simple d'utilisation, sera proposée dans quelques semaines sur developpez.com.

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html>
<head>
	<title>slide test</title>	
	<style type="text/css">
	.div_contentBox{
		border:1px solid #317082;
		height:0px;
		visibility:hidden;
		position:absolute;
		background-color:#E2EBED;
		overflow:hidden;
		padding:2px;
		width:200px;
				
	}
	.div_content{
		position:relative;		
		width:100%;
	}
	</style>
 
	<script type="text/javascript">	
	var slideDownInitHeight = new Array();
	var slidedown_direction = new Array();
	var slidedownActive = false;
	var contentHeight = false;
	var slidedownSpeed = 3; 
	var slidedownTimer = 20;
	function slidedown_showHide(boxId)
	{
		if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
		if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;	
		if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
		slidedownContentBox = document.getElementById(boxId);
		var subDivs = slidedownContentBox.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='div_content')slidedownContent = subDivs[no];	
		}
		contentHeight = slidedownContent.offsetHeight;
		slidedownContentBox.style.visibility='visible';
		slidedownActive = true;
		slidedown_showHide_start(slidedownContentBox,slidedownContent);

	}
	function slidedown_showHide_start(slidedownContentBox,slidedownContent)
	{
		if(!slidedownActive)return;
		slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
		if(slideDownInitHeight[slidedownContentBox.id] <= 0){
			slidedownActive = false;	
			slidedownContentBox.style.visibility='hidden';
			slideDownInitHeight[slidedownContentBox.id] = 0;
		}
		if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
			slidedownActive = false;	
		}
		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';
		setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);
	}
	
	function setSlideDownSpeed(newSpeed)
	{
		slidedownSpeed = newSpeed;	
	}
 
	function check(e){
      
      if (slidedownActive ) return;
     slidedown_showHide('box1') ;
	}
     function check(e){
        //si on est en cours de construction de l'effet, on quitte	    
        if (slidedownActive ) return;
        //si la box est visible, on applique l'effet inverse
        if (document.getElementById('box1').style.visibility=='visible') {        
             slidedown_showHide('box1') ;
        }
      }	

	document.onclick=check;
 
	</script>	
	</head>
	<body>
	<div>
	<div id="controleur"><a href="#" onclick="slidedown_showHide('box1');return false;">Essayer</a></div>
	<div class="div_contentBox" id="box1">
		<div class="div_content" id="subBox1">
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
		</div>
	</div>
</div>
<div>
</body>
</html>

ERE

**atiar** · 10/07/2009, 12h00

Salut Emmanuel,
Merci pour ton aide. J'ai essayé de créer un nouveau composant qui sera cette fois-ci sous forme de champs de texte à partir de ton modèle, mais dès que je clique sur le champs de texte, il disparaît ... est ce qu'il y a moyen de le forcer pour qu'il reste sans pour autant enlever le fait que la div disparaît quand on clique dehors ?
Ci dessous le nouveau code. Merci pour ton aide encore.

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<html>
<head>
	<title>slide test</title>	
	<style type="text/css">
	.div_contentBox{
		border:1px solid #317082;
		height:0px;
		visibility:hidden;
		position:absolute;
		background-color:#E2EBED;
		overflow:hidden;
		padding:2px;
		width:200px;
 
	}
	.div_content{
		position:relative;		
		width:100%;
	}
	</style>
 
	<script type="text/javascript">	
	var slideDownInitHeight = new Array();
	var slidedown_direction = new Array();
	var slidedownActive = false;
	var contentHeight = false;
	var slidedownSpeed = 1; 
	var slidedownTimer = 20;
	function slidedown_showHide(boxId)
	{
		if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
		if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;	
		if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
		slidedownContentBox = document.getElementById(boxId);
		var subDivs = slidedownContentBox.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='div_content')slidedownContent = subDivs[no];	
		}
		contentHeight = slidedownContent.offsetHeight;
		slidedownContentBox.style.visibility='visible';
		slidedownActive = true;
		slidedown_showHide_start(slidedownContentBox,slidedownContent);
 
	}
	function slidedown_showHide_start(slidedownContentBox,slidedownContent)
	{
		if(!slidedownActive)return;
		slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
		if(slideDownInitHeight[slidedownContentBox.id] <= 0){
			slidedownActive = false;	
			slidedownContentBox.style.visibility='hidden';
			slideDownInitHeight[slidedownContentBox.id] = 0;
		}
		if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
			slidedownActive = false;	
		}
		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';
		setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);
	}
 
	function setSlideDownSpeed(newSpeed)
	{
		slidedownSpeed = newSpeed;	
	}
 
	function check(e){
 
      if (slidedownActive ) return;
     slidedown_showHide('Addtext') ;
	}
     function check(e){
        //si on est en cours de construction de l'effet, on quitte	    
        if (slidedownActive ) return;
        //si la box est visible, on applique l'effet inverse
        if (document.getElementById('Addtext').style.visibility=='visible') {        
             slidedown_showHide('Addtext') ;
        }
      }	
	document.onclick=check;
	</script>	
	</head>
	<body>
	<div id="controleur"><a href="#" onclick="slidedown_showHide('box1');return false;">Essayer</a></div>
	<div class="div_contentBox" id="box1">
		<div class="div_content" id="subBox1">
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
		</div>
	</div>
</div>
<br>
<br>
<br>
<div style="margin: 15px 0pt -10px; " id="Addtext" class="div_contentBox">
<div id="subBox" class="div_content" style="top: 1px;">
<input type="text" size="15"  id="tagname"/>
<input type="submit" onclick="slidedown_showHide('Addtext');return false;" value="Add" class="newAddButton"/>
</div>
</div>
<div style="margin: -5px 0pt -10px;" id="controler">
<a id="AddTag" title="Add Tag" onclick="slidedown_showHide('Addtext');return false;" href="#">new Tag</a>
</div>
</body>
</html>

TIAR

**emmanuel.remy** · 10/07/2009, 13h02

Re,

Encore une fois, attention ce sont surtout des pistes que je te fournis, pas du code définitif !

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
<html>
<head>
	<title>slide test</title>	
	<style type="text/css">
	.div_contentBox{
		border:1px solid #317082;
		height:0px;
		visibility:hidden;
		position:absolute;
		background-color:#E2EBED;
		overflow:hidden;
		padding:2px;
		width:200px;
				
	}
	.div_content{
		position:relative;		
		width:100%;
	}
	</style>
 
	<script type="text/javascript">	
	var slideDownInitHeight = new Array();
	var slidedown_direction = new Array();
	var slidedownActive = false;
	var contentHeight = false;
	var slidedownSpeed = 1; 
	var slidedownTimer = 20;
	function slidedown_showHide(boxId)
	{
		if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
		if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;	
		if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
		slidedownContentBox = document.getElementById(boxId);
		var subDivs = slidedownContentBox.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='div_content')slidedownContent = subDivs[no];	
		}
		contentHeight = slidedownContent.offsetHeight;
		slidedownContentBox.style.visibility='visible';
		slidedownActive = true;
		slidedown_showHide_start(slidedownContentBox,slidedownContent);
 
	}
	function slidedown_showHide_start(slidedownContentBox,slidedownContent)
	{
		if(!slidedownActive)return;
		slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
		if(slideDownInitHeight[slidedownContentBox.id] <= 0){
			slidedownActive = false;	
			slidedownContentBox.style.visibility='hidden';
			slideDownInitHeight[slidedownContentBox.id] = 0;
		}
		if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
			slidedownActive = false;	
		}
		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';
		setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);
	}
	
	function setSlideDownSpeed(newSpeed)
	{
		slidedownSpeed = newSpeed;	
	}

     //fonction basique qui regarde si un elément
     //est enfant d'un autre élément dont on fournit l'id 
     // C'EST UN EXEMPLE, ON PEUT FAIRE BEAUCOUP PLUS PROPRE
     function inId(node, id) {
      while (node!=null) {
          if (node.id && node.id==id) return true;
          node = node.parentNode;  
      }
      return false;
     }
     
     function check(e){
        //si on est en cours de construction de l'effet, on quitte	    
        if (slidedownActive ) return;
     	var target = (e && e.target) || (event && event.srcElement) ;

        //si la box est visible, on applique l'effet inverse
        if (document.getElementById('Addtext').style.visibility=='visible') {        
                //si le clic a lieu dans une balise enfant de Addtext
                //on ne fait rien
                if (!inId(target,'Addtext')) slidedown_showHide('Addtext') ;
        }
      }	
	document.onclick=check;
	</script>	
	</head>
	<body>
	<div id="controleur"><a href="#" onclick="slidedown_showHide('box1');return false;">Essayer</a></div>
	<div class="div_contentBox" id="box1">
		<div class="div_content" id="subBox1">
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
			contenu glissant<br>
		</div>
	</div>
</div>
<br>
<br>
<br>
<div style="margin: 15px 0pt -10px; " id="Addtext" class="div_contentBox">
<div id="subBox" class="div_content" style="top: 1px;">
<input type="text" size="15"  id="tagname"/>
<input type="submit" onclick="slidedown_showHide('Addtext');return false;" value="Add" class="newAddButton"/>
</div>
</div>
<div style="margin: -5px 0pt -10px;" id="controler">
<a id="AddTag" title="Add Tag" onclick="slidedown_showHide('Addtext');return false;" href="#">new Tag</a>
</div>
</body>
</html>

ERE

**atiar** · 10/07/2009, 14h21

Salut,
C'est bon, merci. Il reste à faire quelques adaptations... et le tour est joué ;-)

TIAR

Masquer une Div déroulante après un click à son éxterieur

JavaScript

Discussions similaires

Partager

Partager