[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";
}

**souffle56** · 12/04/2010, 17h51

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 !

Voilà ce que ça donne avec le code suivant (html+js):

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
<!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" />
<!-- Appel fonctions jQuery + javascript permettant le redimensionnement dynamique de l'image" -->
<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>
 
<!-- fonction recopie / hauteur image vers le bloc texte" -->
<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 :

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

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

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

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 !

**Bovino** · 12/04/2010, 18h13

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 :

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

<div class="example">

et

Code :

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

document.getElementById('example')

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

**souffle56** · 12/04/2010, 20h33

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

Code :

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

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

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

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

Si quelqu'un a un avis sur la question... ou une suggestion, par avance un Grand Merci !

**Bovino** · 12/04/2010, 21h18

Essaye en rajoutant une ligne dans function.js :

Code :

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

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

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

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 !

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 ?

**Bovino** · 13/04/2010, 08h05

La fonction animate admet plusieurs paramètres possibles, dont une fonction de callback normalement appelée à la fin de l'effet.

**souffle56** · 13/04/2010, 23h56

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 !

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

Voilà ce que ça donne:

Code :

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

},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 !

**souffle56** · 15/04/2010, 21h43

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

Merci Bovino...
A une prochaine !

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

JavaScript

Discussions similaires

Partager

Partager