Cacher une élément

**seb_92** · 14/12/2012, 15h41

Bonjour,

Je cherche depuis pas mal de temps à cacher un élément présent dans une div si celui-ci est en dehors.

Je m'explique, par exemple voici ce bout de code :

Code html :

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

1
2
3
4
5
<div id="principale">
	<div id="contenu">
	    <p>Hey!!</p>
	</div>
</div>

Lorsque la taille de l'Id "Principal" est trop petit pour afficher "Hey!!" il faudrait que celui-ci soit masqué. Je modifie la taille de la div au fur et a mesure à l'aide de JS.
Seulement je ne trouve pas de solution...

Merci d'avance pour votre aide!!

**Mell** · 14/12/2012, 17h22

dirige toi vers la propriété CSS overflow:hidden

Invité · 14/12/2012, 18h23

Envoyé par seb_92

Je modifie la taille de la div au fur et a mesure à l'aide de JS.

Dans ce cas, en JS, il est possible de comparer les tailles des div.

En jQuery, ça donne :

Code :

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

1
2
3
4
5
if( $('#contenu').width()>$('#principale').width() ){
   $('#contenu').css('display','none');
} else {
   $('#contenu').css('display','block');
}

**seb_92** · 17/12/2012, 11h05

Merci pour votre aide.

Pour ce qui est de la propriété overflow:hidden, je pense en avoir fait le tour sinon je n'aurais pas posé la question mais cela ne fonctionne pas...

Et pour ce qui est de la fonction JS que tu me proposes, j'ai regardé mais je ne pense pas que cela convienne...

Je redonne un code un peu plus explicite :

Code html :

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
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Mon site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel ="stylesheet" type="text/css" href="menu5_css.css">
 
	       <script type="text/javascript">
 <!--
           function agrandir() {    
document.getElementById("principale" ).style.height += 530;  
}  
// -->
    </script>
   </head>
 
	<body  onLoad="agrandir()">
	<div id="tete">
		<div id="logo"></div>
		<div id="titre">
			<p>Application de gestion</p>
	        </div>
	</div>
 
	<ul id="menu"></ul>
 
        <div id="principale" style="height: 20px;">
	     <p id="coucou" style="margin-top: 200px;">coucouuuuuuuuuuuuuu</p>
	<div id="footer">
		<p>Copyright</p>
	</div>
</div>
</body>
</html>

Mon but serait de cacher la balise p contenue dans l'Id principale tant que celui-ci n'est pas arrivé a la hauteur de la balise p.
J'espère être clair...

Merci

**NoSmoking** · 17/12/2012, 22h45

Bonsoir,

Pour ce qui est de la propriété overflow:hidden, je pense en avoir fait le tour(...)

quel heureux homme tu fais!

La propriété overflow:hidden présente un avantage non négligeable qui permet d'avoir 2 propriétés de l'objet bien distinctes et potentiellement différentes à savoir offset/clientHeight et scrollHeight.

Si une partie n'est pas affichée alors scrollHeight sera plus grand que offset/clientHeight.

Une autre chose à prendre en compte dans ton cas c'est la non utilisation de la propriété display:none, qui ôtera toutes dimensions à l'élément devant être masqué et pourra entrainer des aberrations, il te faut donc utiliser la propriété visibility:hidden qui masque sans supprimer du flux.

Il est ensuite un jeux d'enfant que de comparer les 2 valeurs et de basculer la visibility de l’élément à afficher.

Autres remarques
- il est franchement dommage de se priver d'un DOCTYPE
- il faut mettre les unités aux valeurs objet.style.height = 100 +'px';.

Cacher une élément

CSS

Vue hybride

Discussions similaires

Partager

Partager