Display: none/display:block JS

19 mars 2015 à 21:53:25

Bonjour a tous , voila j'ai un petit soucis j'ai une fonction qui me permet de rendre display:block une div "pop1" configurée en display:none , et une autre fonction qui permet l'inverse.

Actuellement lorsque je clic sur ma div " aboutme " , ma fonction rend bien visible "pop1" , parcontre impossible de la refermer ...

Pouvez-vous m'aider ?

<script type="text/javascript">
 function showStuff(id) {
document.getElementById(id).style.display = 'block';
        	    }
 </script>
    	
<script type="text/javascript">
function hideStuff(id) {
    document.getElementById(id).style.display = 'none';
}						
 </script>



<div id="aboutme" onclick="showStuff('pop1')">

	<div class="pop-up" id="pop1">

	<div class="pop-nav"><img src="img/folder.png"><span class="title-folder"> Qui suis-je ?</span><div class="close" id="x"onclick="hideStuff('pop1')"></div>
     </div></div>

-
Edité par sataan 19 mars 2015 à 22:14:38

FireCube

19 mars 2015 à 22:15:20

tu peux essayer quelque chose comme ça:

<script type="text/javascript">
 function showStuff(id) {
document.getElementById(id).style.opacity = 1;
                }
 </script>
         
<script type="text/javascript">
function hideStuff(id) {
    document.getElementById(id).style.opacity = 0;
}                      
 </script>
 
 
 
<p onclick="hideStuff('tohide')">hide</p>
<p id='tohide'>to hide</p>

mais je ne suis pas sur de ce que tu veux faire donc je ne sait pas si cela correspond vraiment à tes besoins.

J’espère t'avoir aidé

sataan

19 mars 2015 à 22:36:27

Merci pour ta réponse , mais le soucis est toujours présent. Enfaite pour te representer, cest comme si je clique sur un dossier , que ca ouvre une fenêtre , mais quand je clique sur la croix ( cad. <div class="close">) je ne parviens pas a fermer cette fenêtre que j'ai ouvert précédemment .

Le seul moyen que j'avais trouvé était trés mauvais car il nécessitait un refresh pour pouvoir réouvrir la fenêtre étant donné que les fonctions opèrent sur 2 propriétés différentes :

  <script type="text/javascript">
 function showStuff(id) {
        	document.getElementById(id).style.display = 'block';
        	
    }
 </script>
    	
<script type="text/javascript">
function hideStuff(id) {
    document.getElementById(id).style.visibility = 'hidden';
}						
 </script>

FireCube

19 mars 2015 à 22:44:06

Dans ce cas, si tu ne veux qu'une seule propriété, tu peux essayer en laissant tomber display et en utilisant que visibility: hidden et visibility: visible avec un code qui ressemblerai a ça:

<script type="text/javascript">
 function showStuff(id) {
document.getElementById(id).style.visibility = 'visible';
                }
 </script>
         
<script type="text/javascript">
function hideStuff(id) {
    document.getElementById(id).style.visibility = 'hidden';
}                      
 </script>
 
 
 
<div id="aboutme" onclick="showStuff('pop1')">Show</div>
 
    <div class="pop-up" id="pop1">this was hidden</div>
 
    <div class="pop-nav"><div class="close" id="x"onclick="hideStuff('pop1')">hide</div>

nicolaslechenic

19 mars 2015 à 23:15:10

Le problème c'est que quand tu clic sur hideStuff tu clic aussi sur showStuff vu qu'il est dans le même bloc.

Pour résoudre ce problème tu peux prendre exemple la dessus :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style type="text/css">
		#daddy{
			position: relative;
		}

		#aboutme{
			position: absolute;
			z-index: 1;
			background-color: blue;
			width: 400px;
			height: 400px;
		}

		.pop-up{
			position: absolute;
			z-index: 2;
			background-color: red;
			width: 100px;
			height: 100px;
			display: none;
		}

		.close{
			background-color: #000;
			width: 32px;
			height: 32px;
			position: relative;
			z-index: 2;
		}
		
	</style>

	<script type="text/javascript">
		function showStuff(id) {
			document.getElementById(id).setAttribute("style", "display:block");
		}

		function hideStuff(id) {
			document.getElementById(id).setAttribute("style", "display:none !important");
		}     
	 </script>
	         
	<script type="text/javascript">
                 
	 </script>
</head>
<body>

<div id="daddy">

	<div id="aboutme" onclick="showStuff('pop1')"></div>

	<div class="pop-up" id="pop1">

		<div class="pop-nav">
			<img src="img/folder.png"><span class="title-folder"> Qui suis-je ?</span>
			
			<div class="close" id="x" onclick="hideStuff('pop1')"></div>
		</div>
	</div>	
		
</div>



</body>
</html>

Wheel's

19 mars 2015 à 23:21:22

Salut, à première vue je dirai que c'est normal, qu'elle ne se "ferme" pas.

En faite, elle se ferme, mais se rouvre instantanément.

Tu click sur aboutme, pop s'ouvre => pas de problème.

Tu click sur ta croix, pop se ferme => pas de problème.

L'event click se propage, remonte jusqu'a aboutme, donc lance un click, pop s'ouvre => problème.

Donc je dirai:

<script type="text/javascript">
    function showStuff(id) {
        document.getElementById(id).style.display = 'block';
    }

    function hideStuff(evt, id) {
        document.getElementById(id).style.display = 'none';
        evt.stopPropagation();
    }                       
</script>
 
<div id="aboutme" onclick="showStuff('pop1')">
 
    <div class="pop-up" id="pop1">
 
        <div class="pop-nav">
            <img src="img/folder.png" />
            <span class="title-folder"> Qui suis-je ?</span>
            <div class="close" id="x"onclick="hideStuff(event, 'pop1')"></div>
        </div>
    </div>
</div>

-
Edité par Wheel's 19 mars 2015 à 23:22:52

nicolaslechenic

19 mars 2015 à 23:44:53

Bien vue Wheel's c'est plus propre avec le stopPropagation();

sataan

20 mars 2015 à 0:47:11

Merci pour vos réponses rapides ! il me semblait aussi que l'imbrication de mes div était un peu foireuse ^^

Wheel's , ce quq tu m'as propsé ne fonctionnnait pas avec display:none/block mais ça me donne l'effet désiré avec opacity:0/1 donc c'est parfait , sujet résolu , merci à vous!

<script type="text/javascript">
    function showStuff(id) {
        document.getElementById(id).style.opacity = 1;
    }
 
    function hideStuff(evt, id) {
        document.getElementById(id).style.opacity = 0;
        evt.stopPropagation();
    }                      
</script>

FireCube

21 mars 2015 à 22:45:56

n'oublie pas de le passer en résolu