[Débutant] Donner à un DIV la même hauteur qu'un autre DIV

**souffle56** · 10/04/2010, 21h09

Bonjour,
Bon, je reprends complètement les données de mon petit problème du moment, en simplifiant au maximum, pour plus de compréhension !
Voilà ce qui se passe: J'ai un programme (ci-dessous) et j'aimerais pouvoir faire en sorte que le div de class "example" récupère la hauteur (height) du div de class "resize" (-> 130px au lieu de 70px).
A ce propos, j'ai trouvé sur la page de ce site le code suivant:

Code :

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

1
2
3
<script type="text/javascript">
	document.getElementById("b").style.width = document.getElementById("a").style.width;
</script>

que j'ai adapté à mon code -> Voilà ce que ça donne:
Code HTML:

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
<html>
<head>
<title>Essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">
	document.getElementById("div.example").style.height = document.getElementById("div.resize").style.height;
</script>
 
</head>
<body bgcolor="#FFFFFF">
 
	<div id="resize" style="position:absolute; width:175px; height:130px; z-index:1; left: 200px; top: 150px; border-style: solid">
		<span>Bla bla bla...</span>
	</div>
 
	<div id="example" style="position:absolute; width:175px; height:70px; z-index:1; left: 500px; top: 150px; border-style: solid">
		<span>Re-Bla bla bla...</span>
	</div>	
</body>
</html>

Pour l'instant, voici ce que ça donne -> le code javascript ne change pas le height comme prévu -> Quelque chose m'échappe et, comme je débute en la matière, je ne sais vraiment pas ce que c'est !

Est-ce que quelqu'un aurait quelque suggestion, SVP ?
Par avance Merci !

**Bovino** · 11/04/2010, 14h11

C'est expliqué dans la

http://javascript.developpez.com/faq...S#ajustetaille

**souffle56** · 11/04/2010, 22h18

Merci beaucoup Bovino,
C'est exactement ce qu'il me fallait !

J'ai juste un peu "ajusté" le code à mes besoins du moment

Voilà ce que ça donne:

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
window.onload=ajuste;
 
function ajuste(){
document.getElementById('example').style.height=document.getElementById('resize').offsetHeight+"px";
}
</script>

Il faut à présent que je trouve comment adapter ce code pour que le 2ème div reprenne la même hauteur qu'une image dont voici la forme:

Code :

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

<img class="resize" width="100" height="120" src="image"/>

Est-ce que quelqu'un aurait une idée

**souffle56** · 11/04/2010, 23h15

Ouaf,
En fait, ce code fonctionne pour des balises <img> aussi bien que pour des balises <div> -> Du fait, pas de problème... Juste, voici le code (html + javascript), si ça pouvait intéresser quelqu'un:

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
<html>
<head>
<title>Essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">
window.onload=ajuste;
 
function ajuste(){
document.getElementById('example').style.height=document.getElementById('resize').offsetHeight+"px";
}
</script>
 
</head>
<body bgcolor="#FFFFFF">
 
	<img id="resize" src="http://naturendanger.canalblog.com/albums/especes_animales_en_voie_de_disparition_ou_protegees/m-Dauphins.jpg" width="180" height="130" border="1"/>
 
	<div id="example" style="position:absolute; width:175px; height:70px; z-index:1; left: 300px; top: 10px; border-style: solid">
		<span>Re-Bla bla bla...</span>
	</div>	
</body>
</html>

Je vais récupérer tout cela pour voir si ça passe aussi si l'image est agrandie de façon dynamique (via jQuery) et je reviens...

**souffle56** · 12/04/2010, 01h49

Bon, ben on a super bien avancé sur le thème "Donner à un DIV la même hauteur qu'un autre DIV" Maintenant, il faudrait que je puisse faire la même chose, mais à partir d'une image dont la taille peut varier de façon dynamique ... Du fait, si j'intègre le code "qui va bien" suivant:

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
window.onload=ajuste;
 
function ajuste(){
document.getElementById('example').style.height=document.getElementById('image').offsetHeight+"px";
}
</script>

dans le code html ci-dessous, voilà ce que ça donne (à voir sous Firefox) -> Autrement dit, le fameux code qui marchait si bien auparavant sur une image statique devient ici apparemment inopérant (?)

Comment puis-je faire, SVP, pour que le height du bloc texte "example" recopie bien le height de l'image ?
Là, je vois pas vraiment ! Et vous ? Auriez-vous quelque suggestion, SVP ?

Code html:

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
<html>
<head>
<title>Image Expansion</title>
 
<link type="text/css" rel="stylesheet" href="Image_js_css/index_CSS.css" />
 
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/Selection_perso/jquery-1.4.js"></script>
<script type="text/javascript" src="Image_js_css/functions.js"></script>
 
<script type="text/javascript">
window.onload=ajuste;
 
function ajuste(){
document.getElementById('example').style.height=document.getElementById('image').offsetHeight+"px";
}
</script>
</head>
<body bgcolor="#FFFFFF">
 
<div id="container" style="position:absolute; z-index:1; left: 100px; top: 70px">
	<img id="image" class="resize" src="Image_js_css/m-Dauphins.jpg"/>
 
	<div class="example">
		<span>Les dauphins sont des animaux qui sont très sympatiques</span>
	</div>
 
</div>
 
</body>
</html>

Code CSS:

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
#container{
    width:400px;
    height:200px;
    border:1px solid #EFBA3F;
    z-index:1;
}
 
img.resize{
    width:80px; /* Largeur de base de l'image */
    border:1px solid #000000;
    padding:2px;
    z-index:1;
	display: block;
    float: left;
	margin-right:5px;
}
 
.example{
    width:390px;
	padding-left:5px;
    border:1px solid #000000;
}

Code jQuery "functions.js" (Si besoin !):

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
/* 	Function: 	Enlarge an image when it is hovered over
	Author: 	Justin Farmer 
*/
 
$(document).ready(function(){
 
	//get the width
	var oWidth = $('img.resize').width();
	//get the height
	var oHeight = $('img.resize').height();
	//we want to preserve the proportions of the image, so we get the multipler (you could always multipy the multiplier to get a large image
	var mpx = (oWidth / oHeight*1.5);
 
	//run a function when the image is hovered over
	$('img.resize')
		//mouseOver effect
		.hover(function(){
			//take the currently targeted img
			$(this)
				//stops the event from happening in case of an abrupt mouseOut
				.stop()
				//custom animation effect to change the width and height of the img
				.animate({
					//take the original width/height X multipler and tag on the 'px'
					width: (oWidth * mpx) +'px',
					height: (oHeight * mpx) +'px'
				//space the animation out over 1 sec (deals in milliseconds)
				},1000);
 
		},
		//this is just like a mouseOut effect to take the img back to the original size
		function(){
			$(this)
				//stops the event from happening in case of an abrupt mouseOut
				.stop()
				.animate({
					width: oWidth +'px',
					height: oHeight +'px'
				},1000);
		});
 
});

**Bovino** · 12/04/2010, 12h54

Salut.
Le problème pour une balise img, c'est qu'il s'agit d'un élément remplacé, donc au onload de la page, elle ne possède pas encore de propriétés de dimensions.
Il faut donc passer aussi par le onload de l'image :

Code :

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

1
2
3
window.onload = function(){
    document.getElementById('image').onload = ajuste;
}

Mais du coup, un autre problème risque de se présenter : si l'image est déjà en cache, tu ne verras pas passer l'événement onload, il va donc falloir tester aussi le complete :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
window.onload = function(){
    var monImg = document.getElementById('image');
    if(monImg.error){
        // L'image n'a pas réussi à se charger
        return;
    }
    else{
        if(monImg.complete){ajuste();}
        else{document.getElementById('image').onload = ajuste;}
    }
}

Et au passage, utilise plutôt la propriété height de l'image :

Code :

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

1
2
3
function ajuste(){
document.getElementById('example').style.height=document.getElementById('image').height+"px";
}

[Débutant] Donner à un DIV la même hauteur qu'un autre DIV

JavaScript

Vue hybride

Discussions similaires

Partager

Partager