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

Version imprimable

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:

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:

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 !
:fleche: Est-ce que quelqu'un aurait quelque suggestion, SVP ?
Par avance Merci ! :)

11/04/2010, 15h11
Bovino

C'est expliqué dans la :faq:
http://javascript.developpez.com/faq...S#ajustetaille
11/04/2010, 23h18
souffle56
Merci beaucoup Bovino,
C'est exactement ce qu'il me fallait ! :ccool:
J'ai juste un peu "ajusté" le code à mes besoins du moment :fleche: Voilà ce que ça donne:
Code:

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:

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

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

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:

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

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:

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 (?) :fleche: 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:

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:

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:

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);
		});
 
});

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:

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:

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:

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

Merci Bovino,
J'ai bien compris le principe / à ce que tu me dis ! :)
Après, coté javascript, je suis carrément débutant -> le code que tu me proposes dépasse mes capacités de compréhension en la matière (du moins, pour l'instant !)... Ceci dit, j'ai "récupéré" tes suggestions qui me semblent plus que pertinentes pour essayer d'arranger l'affaire !
:fleche: Voilà ce que ça donne avec le code suivant (html+js):
Code:

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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"> function ajuste(){ document.getElementById('example').style.height=document.getElementById('image').height+"px"; } 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;} } } </script> </head> <body bgcolor="#FFFFFF" background="http://souffle56.fr/Site/SOMMAIRE SOUFFLE 56/Fond - oeuvres 2.png"> <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 tres sympatiques</span> </div> </div> </body> </html>
Comme tu l'auras remarqué, la hauteur du bloc texte ne rejoint toujours pas celle de l'image :( ->
* Aurais-je fais une gaffe dans le code ci-dessus ?
* A ce propos, ai-je bien fait d'écrire la ligne suivante telle qu'elle ?

Code:

<img id="image" class="resize" src="Image_js_css/m-Dauphins.jpg"/>

Autrement dit, peut-on mettre un id et un class dans la même balise <img> ?
* Ne vaudrait-il pas mieux ajuster le code jQuery "functions.js" (précisé ci-dessus) en y intégrant (après la génération dynamique du height de l'image) un bout de code du style :

Code:

document.getElementById('example').style.height=oHeight+"px";

-> Si oui, ce code te parait-il correct ? A quel endroit et comment puis-je l'insérer ?
Merci si tu peux me donner ton avis et tes suggestions éventuelles !

12/04/2010, 19h13
Bovino

Citation:

Autrement dit, peut-on mettre un id et un class dans la même balise <img> ?

Oui, c'est tout à fait possible.

Ce qui cloche dans ton code, c'est

Code:

<div class="example">

et

Code:

document.getElementById('example')

Comme son nom l'indique, getElementById récupère un élément en fonction de son id, pas de sa classe !

Ouaf,
Bon ben alors, là, c'est carrément la gaffe ! Merci Bovino, effectivement, j'ai rectifié:

Code:

<div id="example">

et bien sûr "#example" au lieu de ".example" dans la CSS et... ça va nettement mieux.
Ca fonctionne même très bien... Sauf que, ben, comme tu peux le voir, le height de l'image n'est pas recopié quand on le modifie dynamiquement (en survolant l'image) ! :(
Comment puis-je arranger cela pour que, non seulement la recopie se fasse au chargement de la page (onload), mais aussi à chaque fois que le height de l'image est modifié (au survol de la souris) ? Là encore, je planche !
N'y a t-il vraiment aucun moyen (et intérêt) d'intégrer le code javascript "qui va bien" au code jQuery "functions.js" (précisé ci-dessus), notament, vis à vis de la fonction jQuery suivante ?
Code:

1 2 3 4 5 6 7 .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);
:fleche: Si quelqu'un a un avis sur la question... ou une suggestion, par avance un Grand Merci ! :)

Essaye en rajoutant une ligne dans function.js :

Code:

1
2
3
4
5
6
.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)
}, function(){ajuste();},1000);

12/04/2010, 23h18
souffle56

Merci Bovino,
Je te remercie de m'avoir permis de si bien avancer ce sujet...
Maintenant, si j'ai bien compris (?), tu me proposes d'intégrer une fonction js comme paramètre de la fonction jQuery .animate, c'est cela ? C'est donc possible ?
Je viens d'essayer et... malheureusement, ça ne passe pas, l'image ne s'agrandit plus si je la survole ! :(
:fleche: Vu l'avancée actuelle de la situation, ne serait-il pas préférable que je "transfère" ce sujet sur le forum jQuery, peut-être plus adapté ? Qu'en penses-tu ?
13/04/2010, 09h05
Bovino

La fonction animate admet plusieurs paramètres possibles, dont une fonction de callback normalement appelée à la fin de l'effet.
14/04/2010, 00h56
souffle56

Re-salut Bovino,
Je te partage un petit compte-rendu de l'état des lieux de la situation présente (ou quelque chose comme ça) pour te dire que je suis super ravi ! :D Ben oui, en effet, ton code, en fait il passe très bien... C'est juste qu'il fallait mettre le Callback après (et non avant) l'info sur la durée :fleche: Voilà ce que ça donne:

Code:

},1000, function(){ajuste();});

Et là... ça marche impeccable !
Euh... Sauf que (je viens de reprendre quelques essais) si je rajoute un peu de texte, voilà ce qui se passe (j'ai mis un fond de couleur en CSS pour mieux rendre compte de ce qui se passe) -> Aïe, c'était pas prévu au programme! (si je peux m'autoriser ce p'tit jeu de mots qui vaut ce qu'il vaut !)
Bon, ceci dit, "It's a nouvelle étape for me !" -> Autrement dit, euh, comment faire pour arranger cela ?
Toute nouvelle proposition, une fois de plus, sera plus que la bienvenue ! :)
15/04/2010, 22h43
souffle56

Juste un petit passage pour statuer que ma situation présente s'est suffisamment bien améliorée pour que je puisse la considérer "résolue"...
:fleche: Merci Bovino...
A une prochaine ! :)