Hauteur de div automatique selon la copie d'écran proposée [Résolu]

nilsb13 · 16/08/2011, 16h38

Bonjour,
j'ai posté la même question dans CSS,
mais peut-être que la solution est du côté javascript ...

selon la copie d'écran suivante :

Je voudrais que la div qui est entourée d'un liseret rouge soit taillée automatiquement à l'espace restant (elle a pour le moment une hauteur fixe)
et que sont ascenseur vertical s'allume si nécessaire.

Là, on voit qu'il reste de l'espace libre, blanc, avant le bas du navigateur.

Les div qui sont avant la dernière div (entourée d'un liseret rouge) n'ont pas de hauteur connue.
=>Leur hauteur augmente en fonction du contenu, lignes de boutons ou lignes de champs de formulaire (le formulaire bleu).

quelqu'un saurait-il me donner le code javascript permettant de connaitre l'espace libre sous la div (div_boutons_resultat) qui contient "modifier supprimer interlocuteurs actions commerciales"

ce qui me permettrait de coder la hauteur de la dernière div "en live"

merci de me donner tout le nécessaire :

Code css :

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 {
height				: 100%;
}
 
body {
height				: 100%;
margin: 0;
padding: 0;
}
 
#div_generale { /* celle qui englobe toute la page */
background-color : burlywood; /* marron clair */
/* code ... si nécessaire ... */
}
 
#div_ajouter_rechercher { /* zone bleu-clair */
background-color : lightblue;
/* code ... si nécessaire ... */
}
 
#div_boutons_resultat { /* boutons dans la zone vert-clair */
background-color : lightgreen;
/* code ... si nécessaire ... */
}
 
#div_resultat { /* div contenant la liste des enregistrements trouvés */
background-color : lightgreen;
overflow-y : auto;
/* code ... si nécessaire ... */
}

JAVASCRIPT :
?!?!?! là je sais pas ce qu'il faut mettre ?!?!?!

HTML :

Code css :

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>
  <!-- appel du CSS et du code javascript -->
  </head>
 
  <body>
 
    <div id="div_generale">
 
      <div id="div_ajouter_rechercher">
      </div>
 
      <div id="div_boutons_resultat">
      </div>
 
      <div id="div_resultat" height="exécution du code javascript">
      </div>
 
    </div>
 
  </body>
  </html>

mille merci pour votre aide !
Nils.

(je vois que quelqu'un est passé par là pour ajouter quelques balises, merci !)

Willpower · 16/08/2011, 16h47

en css un truc du genre :

Code :

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

1
2
3
 
height:auto;
top:0;

(ou alors un heigh : 100% ??)

sinon tu devras p-ê aussi jouer avec les "position:relative" ou "position:absolute" et éventuellement repositionner le "top".

et comme dis sur le sujet css, vérifie que tes éléments conteneur aient déjà un height de 100%.

nilsb13 · 16/08/2011, 16h58

je viens de corriger ma question,
j'ai bien dans le CSS un html et un body à 100%

par contre je ne comprends pas bien ta proposition
peux-tu détailler un peu plus ?

éventuellement, tu peux faire un copier/coller du code proposé dans la question et y ajouter ton idée ...

merci pour ton aide

Bovino · 16/08/2011, 17h09

Citation:

Envoyé par nilsb13

j'ai bien dans le CSS un html et un body à 100%

Ca n'a aucun sens

En CSS, les hauteurs en pourcentage correspondent à un rapport par rapport à l'élément conteneur, mais les balises <html> et <body> n'ont pas de conteneur à partir desquels définir ce pourcentage.
C'est un peu comme si, au supermarché, les prix étaient annoncés comme "Prix : 90%". C'est joli, mais 90% de quoi ?

Dans ton cas, il faut récupérer la taille de la fenêtre, la taille des différents éléments affichés (et les additionner) puis affecter à la dernière div la différence entre les deux.

nilsb13 · 16/08/2011, 17h35

Merci Bovino pour ton éclaircicement très clair !

ok, je supprime les 100% qui ne servent à rien !

quelqu'un sait coder en JS ce que Bovino propose :

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
1) Récupérer la hauteur de la fenêtre
$hauteur_fenêtre = code_javascript_qui_trouve_la_hauteur_de_la_fenêtre;
 
2) Récupérer la hauteur des différents éléments affichés
$hauteur_div_menu = code_javascript_qui_trouve_la_hauteur_de_la_div_menu;
$hauteur_div_ajouter_rechercher = code_javascript_qui_trouve_la_hauteur_de_la_div_ajouter_rechercher;
$hauteur_div_boutons_résultat = code_javascript_qui_trouve_la_hauteur_de_la_div_boutons_résultat;
 
3) Additionner la hauteur des différents éléments affichés
$hauteur_divs_sans_scroll = $hauteur_div_menu + $hauteur_div_ajouter_rechercher + $hauteur_div_boutons_résultat
 
4) Soustraire la hauteur des éléments à la hauteur de la fenêtre
$hauteur_restante = $hauteur_fenêtre - $hauteur_divs_sans_scroll;
 
4) Affecter à la dernière div la différence entre les deux.
$hauteur_div_avec_scroll = $hauteur_restante
 
5) affecter cette valeur dans le CSS
#div_resultat {
height : codeJS[$hauteur_div_avec_scroll]px; /* ou % ? */
background-color : lightgreen;
overflow-y : auto;
}

merci,
car je n'y connais vraiment rien en JS,
je sais, c'est une tare !!!, mais bon, pas encore eu le courage de m'y attaquer !

nilsb13 · 16/08/2011, 17h40

Citation:

En CSS, les hauteurs en pourcentage correspondent à un rapport par rapport à l'élément conteneur, mais les balises <html> et <body> n'ont pas de conteneur à partir desquels définir ce pourcentage.

donc, si je comprends bien :
la fenêtre du navigateur n'est pas le conteneur principal,
c'est bien <html> qui est le conteneur principal donc (?)

dans ce cas, <body>, contenu dans <html>, peut-il être à 100% ?

Willpower · 16/08/2011, 20h18

Code css :

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
	body {
		margin: 0;
		padding: 0;
	}
	#div_generale {
		background-color : burlywood; 
		height:100%;
	}
	#div_ajouter_rechercher { 
		background-color : lightblue;
		height:150px;
	}
	#div_boutons_resultat { 
		background-color : green;
		height:100px;
	}
	#div_resultat { 
		background-color : lightgreen;
		overflow-y : auto;
		position:absolute;
		width:100%;
		height:auto;
		top:250px; /* somme des heights de "div_ajouter_rechercher" et de "div_boutons_resultat" */
		bottom:0;
	}

nilsb13 · 16/08/2011, 20h36

Bovino, si tu passes par là ...
ou quelqu'un d'autre !

j'ai pondu le code suivant (mon premier code JS !!!),

mais :
- le alert("zz" ...) ne s'allume pas et empèche l'allumage de tous les autres, même ceux qui sont avant (je l'ai mis en //)

- le alert("hauteur_div_menu : " + hauteur_div_menu); ne s'allume pas davantage !

bref, j'ai la hauteur de la fenêtre,
mais pas la hauteur de ma première div !(?)

quelqu'un pour aider ?

Bovino => nota, par rapport à ce que tu m'as dit tout à l'heure :
si html { } => document.documentElement.offsetHeight : 0
si html { height : 100%; } => document.documentElement.offsetHeight : 888
(pour body, le 100% ne change rien)

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
23
24
25
26
27
28
29
30
html {
height : 100%;
}
 
body {
background-color 	: burlywood;
margin : 5px;
padding :0px;
}
 
* {
font-family : arial;
font-size : 100%;
}
 
#div_menu_general { /* on a besoin de cette id simplement pour pouvoir calculer sa hauteur en JS */
}
 
#div_ajouter_rechercher {
background-color : lightblue;
}
 
#div_boutons_resultat {
background-color : lightgreen;
}
 
#div_resultat {
background-color : lightgreen;
overflow-y : scroll;
}

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<?php
// -------------------------------------------------------------------------------------------------
// fichiers à inclure systématiquement -------------------------------------------------------------
// -------------------------------------------------------------------------------------------------
include_once('../ressources/initialisation_systematique.php');
// -------------------------------------------------------------------------------------------------
// FIN - fichiers à inclure systématiquement -------------------------------------------------------
// -------------------------------------------------------------------------------------------------
?>
<!DOCTYPE html>
 
<html>
 
	<head>
		<title>TEST 2</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<link rel="stylesheet" type="text/css" media="screen" href="<?php echo BASE_URL; ?>ressources/styles_test.css" />
 
		<!-- tailler la div div_resultat -->
		<script type="text/javascript">
		<!--
 
		alert("début");
 
		// 1) Récupérer la hauteur de la fenêtre
		var hauteur_fenêtre = document.documentElement.offsetHeight;
		alert("hauteur fenêtre : " + hauteur_fenêtre); // ok
		alert("document.documentElement.offsetHeight : " + document.documentElement.offsetHeight); // ok
		alert("window.innerHeight : " + window.innerHeight); // ok
 
		//2) Récupérer la hauteur des différents éléments affichés
		var hauteur_div_menu_general =	document.getElementById("div_menu_general").style.height;
		alert("hauteur_div_menu_general : " + hauteur_div_menu); // NON ok !
 
		//alert("zz" + document.getElementById("div_menu_general").style.height; // NON ok
 
		var hauteur_div_ajouter_rechercher	= document.getElementById("div_ajouter_rechercher").style.height;
 
		var hauteur_div_boutons_résultat	= document.getElementById("div_boutons_resulta").style.height;
 
		//3) Additionner la hauteur des différents éléments affichés
		var hauteur_divs_sans_scroll = hauteur_div_menu_general + hauteur_div_ajouter_rechercher + hauteur_div_boutons_résultat;
 
		//4) Soustraire la hauteur des éléments à la hauteur de la fenêtre
		var hauteur_restante = hauteur_fenêtre - hauteur_divs_sans_scroll;
 
		//4) Affecter à la dernière div la différence entre les deux.
		document.getElementById("div_resultat").style.height = hauteur_restante + "px";
 
		-->
		</script>
 
 
	</head>
 
<body>
 
	<div id="div_menu_general">
	menu général
	</div>
 
	<div id="div_ajouter_rechercher">
	ajouter / rechercher<br>
	formualaire<br>
	boutons
	</div>
 
	<div id="div_boutons_resultat">
	boutons résultat
	</div>
 
	<div id="div_resultat">
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	ceci est la zone de résultats<br>
	</div>
 
</body>
</html>

nilsb13 · 16/08/2011, 20h46

Willpower merci pour ton code,

mais cela ne correspond pas à mon problème,

les hauteurs de div ne sont pas fixées dans les CSS,
elles varient avec leur contenu,
je ne souhaite pas les fixer.

Willpower · 16/08/2011, 21h12

Dans ce cas étant nul en CSS, je te propose ma solution JavaScript :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
	<style type=text/css >
	body {
		margin: 0;
		padding: 0;
	}
	#div_generale {
		background-color : burlywood; 
		height:100%;
	}
	#div_ajouter_rechercher { 
		background-color : lightblue;
	}
	#div_boutons_resultat { 
		background-color : green;
	}
	#div_resultat { 
		background-color : lightgreen;
		overflow-y : auto;
		bottom:0;
		height:auto; 
		width:100%;	
	}
	</style>
</head>
<body>
    <div id="div_generale">
		<div id="div_ajouter_rechercher">div_ajouter_rechercher<br/>
				<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
		</div>
		<div id="div_boutons_resultat">div_boutons_resultat<br/>
				<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
		</div>
		<div id="div_resultat" height="exécution du code javascript">div_resultat<br/>
			<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
			<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
			<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
		</div>
    </div>
	<script type=text/javascript>
		var div = document.getElementById('div_resultat');
		var saveTop = div.offsetTop;
		with(div.style){
			position = 'absolute';
			top = saveTop;
		}
	</script>
</body>
</html>

nilsb13 · 18/08/2011, 21h57

Willpower,

j'ai copier/coller ton code,

mais ça marche pas vraiment ???

par contre,
si tu as encore un peu de temps à me consacrer,
pourrais tu vois pourquoi mon code JS ne fonctionne pas,
au niveau du post "16/08/2011 20h36"

merci !!!

Bovino · 18/08/2011, 22h50

Citation:

mais ça marche pas vraiment ???

Tu es aussi loquace qu'un message d'erreur de Windows !

nilsb13 · 18/08/2011, 23h21

LA SOLUTION EST ICI !

Bon les gars et les filles,

j'ai fini par trouver LA SOLUTION !!!!

Tout d'abord,
il faut savoir quelques petites choses au sujet de JS !

Primo :
=> JS ne connait que le code HTML qui s'est déjà déroulé !!!
Donc, en ayant placé mon code JS dans <head> ça risquait pas de marcher !, car mes div sont bien plus bas !
=> Il faut donc que le code JS (dans ce cas de figure) soit tout en bas de la page, pour que JS ait la connaissance des id des div !

Secondo :
Je vous invite vivement à travailler sous Firefox avec les outils web developer installés !
=> Sans ces outils, je n'ai pas pu comprendre que mes div n'étaient pas vues par JS !
Ce n'est qu'une fois ces outils installés (ouvrir la console d'erreurs), que j'ai compris qu'il fallait mettre le code en bas de page.

Bref.

Une fois que vous avez compris ça,
il faut faire la différence entre offsetHeight et style.height,
le premier permet de lire la hauteur de l'objet concerné, le second permet d'affecter une valeur à la hauteur de l'objet concerné (grosse différence !!!).

Et pour finir, quand on n'a jamais codé en JS, ben, c'est pas de la tarte !

Bref, voici le code qui marche :

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
23
24
25
26
27
28
29
30
html {
height : 100%;
}
 
body {
background-color 	: burlywood;
margin : 5px;
padding :0px;
}
 
* {
font-family : arial;
font-size : 100%;
}
 
#div_menu_general { /* on a besoin de cette id simplement pour pouvoir calculer la hauteur de la div en JS => il faut un id pour getElementById ! */
}
 
#div_ajouter_rechercher {
background-color : lightblue;
}
 
#div_boutons_resultat {
background-color : lightgreen;
}
 
#div_resultat {
background-color : lightgreen;
overflow-y : scroll;
}

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
 
<html>
 
	<head>
		<title>TEST 2</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<link rel="stylesheet" type="text/css" media="screen" href="styles_test2.css" />
	</head>
 
<body>
 
	<div id="div_menu_general">
	menu général
	</div>
 
	<div id="div_ajouter_rechercher">
	ajouter / rechercher<br />
	formualaire<br />
	boutons
	</div>
 
	<div id="div_boutons_resultat">
	boutons résultat
	</div>
 
 
	<div id="div_resultat">
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	ceci est la zone de résultats<br />
	</div>
 
		<!-- tailler la div div_resultat -->
		<script type="text/javascript">
		<!--
 
		//alert('début');
 
		// 1) Récupérer la hauteur de la fenêtre
		var hauteur_fenêtre = document.documentElement.offsetHeight;
		alert('hauteur fenêtre : ' + hauteur_fenêtre); // ok
		//alert('document.documentElement.offsetHeight : ' + document.documentElement.offsetHeight); // ok
		//alert('window.innerHeight : ' + window.innerHeight); // ok
 
		//2) Récupérer la hauteur des différents éléments affichés
		var hauteur_div_menu_general =	document.getElementById('div_menu_general').offsetHeight;
		alert('hauteur_div_menu_general' + hauteur_div_menu_general);
 
		var hauteur_div_ajouter_rechercher	= document.getElementById('div_ajouter_rechercher').offsetHeight;
		alert('hauteur_div_ajouter_rechercher' + hauteur_div_ajouter_rechercher);
 
		var hauteur_div_boutons_résultat	= document.getElementById('div_boutons_resultat').offsetHeight;
		alert('hauteur_div_boutons_résultat' + hauteur_div_boutons_résultat);
 
		//3) Additionner la hauteur des différents éléments affichés
		var hauteur_divs_sans_scroll = hauteur_div_menu_general + hauteur_div_ajouter_rechercher + hauteur_div_boutons_résultat;
		alert('hauteur_divs_sans_scroll' + hauteur_divs_sans_scroll);
 
		//4) Soustraire la hauteur des éléments à la hauteur de la fenêtre
		var hauteur_restante = hauteur_fenêtre - hauteur_divs_sans_scroll - 5 - 5 ; // moins 5 pixels en haut et en bas pour body { margin : 5px; }
		alert('hauteur_restante' + hauteur_restante);
 
		//5) Affecter à la dernière div la différence entre les deux.
		document.getElementById('div_resultat').style.height = hauteur_restante + 'px';
 
		-->
		</script>
 
 
</body>
</html>

Un grand merci à tous ceux qui mon aidé.

En particulier à Bovino qui m'a mis sur la piste, en me donnant le déroulé du programme (très important !), je ne savais pas par quel bout attaquer JS !

Je clos le sujet avec un majestueux RESOLU !!!

nilsb13 · 19/08/2011, 15h47

Citation:

Envoyé par Bovino

Tu es aussi loquace qu'un message d'erreur de Windows !

Ouarf

,
tu as raison Bovino, j'ai été un peu feignant sur ce coup là !

mais il y avait trop de choses à raconter, des trucs incohérents dans le code et la piste me semblait hasardeuse pour moi, car je ne comprennait pas tout dans le code, c'est pour ça que j'ai été bref.

=> height="exécution du code javascript / j'imagine qu'il fallait l'enlever ... ?

=> et ça, j'ai pas réussi à le comprendre :

Code :

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

1
2
3
4
5
var div = document.getElementById('div_resultat');
		var saveTop = div.offsetTop;
		with(div.style){
			position = 'absolute';
			top = saveTop;

surtout cette instruction : with(div.style)

mais tu as vu Bovino,
j'ai fait un beau post d'explication du code que j'ai réussi à faire fonctionner, pour me rattraper !!!

Willpower · 22/08/2011, 00h08

Citation:

Envoyé par nilsb13

Ouarf

,
tu as raison Bovino, j'ai été un peu feignant sur ce coup là !

mais il y avait trop de choses à raconter, des trucs incohérents dans le code et la piste me semblait hasardeuse pour moi, car je ne comprennait pas tout dans le code, c'est pour ça que j'ai été bref.

=> height="exécution du code javascript / j'imagine qu'il fallait l'enlever ... ?

=> et ça, j'ai pas réussi à le comprendre :
var div = document.getElementById('div_resultat');
var saveTop = div.offsetTop;
with(div.style){
position = 'absolute';
top = saveTop;

surtout cette instruction : with(div.style)

mais tu as vu Bovino,
j'ai fait un beau post d'explication du code que j'ai réussi à faire fonctionner, pour me rattraper !!!

with ça sert juste pour ne pas réécrire "div.style." devant "position" et "top", en gros c'est pareil que :

Code :

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

1
2
3
4
var div = document.getElementById('div_resultat');
var saveTop = div.offsetTop;
div.style.position = 'absolute';
div.style.top = saveTop;

mais bon, j'ai l'habitude d'utiliser "with" déjà que je chipote à un "obj.style" parce qu'en général je mets un bon paquet de css. disons qu'ici c'était plus un réflexe qu'autre chose. :-)

nilsb13 · 22/08/2011, 00h14

Merci Willpower pour cet éclairage,
comme je débute avec JS, ça faisait un peu beaucoup de nouveautés pour moi.

jreaux62 · 22/08/2011, 08h58

Bonjour,
j'ai proposé une solution à un problème similaire ici.
C'est en jquery et compatible IE8.

Code :

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

var A = $('#AA').height(); 	// hauteur du div "AA" (en px)

-> height()

nilsb13 · 22/08/2011, 14h39

Merci jreaux62 pour cette information supplémentaire,

j'ai entendu parlé de JQuery, mais je n'ai pas encore osé l'utilisé, en me disant que je devrais d'abord savoir ce qu'était JS.

Mais j'y viendrai peut-être uin jour ...

saurais-tu me dire en quelques mots, ce que JQuery apporte de plus par rapport à JS ?

Dans le même esprit, je sais maintenant programmer en PHP depuis quelques années, et pour mon dernier projet j'ai étudié CodeIgniter, ben, j'ai laissé tombé, impossible de caser ma programmation procédurale dans CI, car n'ayant pas étudié la POO à l'école, c'est un gros morceau à avaler maintenant.
Je suis finalement plus efficace en PHP procédural qu'avec CI, et le développement de mon application avance, c'est le principal pour moi pour le moment.

tien, je viens de voir que : src="http://code.jquery.com/jquery-1.6.2.min.js
JQuery ne s'installe pas ?, il faut aller le pécher sur le net avec un lien ?
(ou on peut aussi l'installer ?)
(oui, je sais, je suis feignant aussi sur ce coup là, je pourrai aller voir la doc de JQuery !, c'est juste si tu as le temps de répondre, je ne compte pas l'utiliser pour le moment)

Encore merci !

jreaux62 · 22/08/2011, 15h12

Citation:

Envoyé par nilsb13

saurais-tu me dire en quelques mots, ce que JQuery apporte de plus par rapport à JS ?

Houlà ! il faudrait demander à un spécialiste !
Ce que je constate, c'est qu'un tas de fonction javascript ne fonctionne pas correctement sur I.E.
jquery est plus compatible (d'après ma petite expérience)

Citation:

Je suis finalement plus efficace en PHP procédural qu'avec CI

Moi aussi ...

Citation:

JQuery ne s'installe pas ?, il faut aller le pécher sur le net avec un lien ?

Il y a plusieurs façon d'"initialiser" jquery.
L'avantage du lien vers le site de jquery permet d'avoir une version dont on est sûr qu'elle est stable et fonctionnelle.
(et on n'a pas à télécharger de fichier en cas de nouvelle version)

nilsb13 · 22/08/2011, 15h24

Super !
merci pour tes réponses !!!

22/08/2011, 08h58	#17
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Bonjour, j'ai proposé une solution à un problème similaire ici. C'est en jquery et compatible IE8. Code : Sélectionner tout - Visualiser dans une fenêtre à part var A = $('#AA').height(); // hauteur du div "AA" (en px) -> height() __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

16/08/2011, 16h58	#3
nilsb13 Invité de passage Inscription : août 2008 Messages : 15 Détails du profil Informations forums : Inscription : août 2008 Messages : 15 Points : 1 Points : 1	je viens de corriger ma question, j'ai bien dans le CSS un html et un body à 100% par contre je ne comprends pas bien ta proposition peux-tu détailler un peu plus ? éventuellement, tu peux faire un copier/coller du code proposé dans la question et y ajouter ton idée ... merci pour ton aide
	00

16/08/2011, 20h46	#9
nilsb13 Invité de passage Inscription : août 2008 Messages : 15 Détails du profil Informations forums : Inscription : août 2008 Messages : 15 Points : 1 Points : 1	Willpower merci pour ton code, mais cela ne correspond pas à mon problème, les hauteurs de div ne sont pas fixées dans les CSS, elles varient avec leur contenu, je ne souhaite pas les fixer.
	00

18/08/2011, 21h57	#11
nilsb13 Invité de passage Inscription : août 2008 Messages : 15 Détails du profil Informations forums : Inscription : août 2008 Messages : 15 Points : 1 Points : 1	Willpower, j'ai copier/coller ton code, mais ça marche pas vraiment ??? par contre, si tu as encore un peu de temps à me consacrer, pourrais tu vois pourquoi mon code JS ne fonctionne pas, au niveau du post "16/08/2011 20h36" merci !!!
	00

22/08/2011, 00h14	#16
nilsb13 Invité de passage Inscription : août 2008 Messages : 15 Détails du profil Informations forums : Inscription : août 2008 Messages : 15 Points : 1 Points : 1	Merci Willpower pour cet éclairage, comme je débute avec JS, ça faisait un peu beaucoup de nouveautés pour moi.
	00

22/08/2011, 14h39	#18
nilsb13 Invité de passage Inscription : août 2008 Messages : 15 Détails du profil Informations forums : Inscription : août 2008 Messages : 15 Points : 1 Points : 1	Merci jreaux62 pour cette information supplémentaire, j'ai entendu parlé de JQuery, mais je n'ai pas encore osé l'utilisé, en me disant que je devrais d'abord savoir ce qu'était JS. Mais j'y viendrai peut-être uin jour ... saurais-tu me dire en quelques mots, ce que JQuery apporte de plus par rapport à JS ? Dans le même esprit, je sais maintenant programmer en PHP depuis quelques années, et pour mon dernier projet j'ai étudié CodeIgniter, ben, j'ai laissé tombé, impossible de caser ma programmation procédurale dans CI, car n'ayant pas étudié la POO à l'école, c'est un gros morceau à avaler maintenant. Je suis finalement plus efficace en PHP procédural qu'avec CI, et le développement de mon application avance, c'est le principal pour moi pour le moment. tien, je viens de voir que : src="http://code.jquery.com/jquery-1.6.2.min.js JQuery ne s'installe pas ?, il faut aller le pécher sur le net avec un lien ? (ou on peut aussi l'installer ?) (oui, je sais, je suis feignant aussi sur ce coup là, je pourrai aller voir la doc de JQuery !, c'est juste si tu as le temps de répondre, je ne compte pas l'utiliser pour le moment) Encore merci !
	00

22/08/2011, 15h24	#20
nilsb13 Invité de passage Inscription : août 2008 Messages : 15 Détails du profil Informations forums : Inscription : août 2008 Messages : 15 Points : 1 Points : 1	Super ! merci pour tes réponses !!!
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email