Modifier les définition CSS - Modifier dynamiquent la hauteur d'une page

**tavarlindar** · 31/05/2008, 11h18

Bonjour,

J'ai une page avec des définitions CSS. Ces définitions sont dans un fichier admin.css

Code :

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

1
2
 
<link rel="stylesheet" type="text/css" href="admin.css">

Voici ma page de test.

Cette page contient un tableau où on peut rajouter des lignes. Il suffit de cliquer sur "add".
Si vous cliquer 5 fois sur le bouton par exemple, la présentation de la page laisse à désirer.
Je souhaite donc modifier ma fonction de rajout de ligne de telle sorte qu'elle augmente la taille de ma page, la taille d'un bloc.
Ce bloc est identifié par l'id = bloc_contenu_formulaire_etage2_provider dont la définition est ci-dessous :

Code :

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

1
2
3
4
5
6
7
 
/*  Formulaire Reservation_etape2 */
#bloc_contenu_formulaire_etage2_provider {
border: 1px solid black;
height: 660px;
background-color: yellow;
}

Avant de chercher à modifier la taille, j'ai inclus dans ma fonction d'ajout de ligne les instructions suivantes, histoire de vérifier que j'arrivais bien à obtenir la définition de mon bloc :

Code :

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

1
2
3
4
5
6
 
...
var hauteur_du_formulaire = document.getElementById("bloc_contenu_formulaire_etage2_provider");
	var toto = hauteur_du_formulaire.style.height;
	alert ('hauteur_du_formulaire :'+toto);
...

Et malheureusement, cela ne donne rien ...

Comment faire ?

PS : j'ai déjà cherché sur le forum et sur le net, tester x codes, mais ...
donc soyez svp indulgent.

**htr999** · 31/05/2008, 12h38

essaie ceci

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
<body>
	<div id="test" style="height: 100px; width: 100px; background-color: red;"></div>
	<div id="divTest" style="position: absolute; top: 10px; left: 10px; height: 20px; width: 100px; background-color: yellow;"></div>
	<input type="button" value="add" onclick="add();"/>
	<script>
		function add(){
			var hElem = parseInt(document.getElementById("divTest").style.height);
			var hFond = parseInt(document.getElementById("test").style.height);
 
			var newHElem = hElem+20;
			var newHFond = hFond;
			if (newHElem > 90)
				newHFond = hFond+20;
 
			document.getElementById("divTest").style.height = newHElem+"px";
			document.getElementById("test").style.height = newHFond+"px";
		}
	</script>
</body>

a+

**tavarlindar** · 31/05/2008, 13h45

hum htr999 : intéressant

J'en étais à :

Code :

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

1
2
3
4
5
6
7
8
 
	var hauteur_du_formulaire = document.getElementById("bloc_contenu_formulaire_etage2_provider").offsetHeight;
	alert ('hauteur_du_formulaire :'+hauteur_du_formulaire);
	var ajout_hauteur_du_formulaire = 20 ;
	alert ('ajout_hauteur_du_formulaire:' +ajout_hauteur_du_formulaire);
	var nouvelle_hauteur = hauteur_du_formulaire + ajout_hauteur_du_formulaire;
	alert ('nouvelle_hauteur_du_formulaire:'+nouvelle_hauteur);
	document.getElementById("bloc_contenu_formulaire_etage2_provider").style.height=nouvelle_hauteur+"px";

qui fonctionne sous FF mais pas sous IE la preuve.

J'ai testé ton code : super !
mais pour quoi cela ne fonctionne pas chez moi ...

Code :

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

1
2
3
4
5
6
7
8
9
 
var hauteur_du_formulaire = parseInt(document.getElementById("bloc_contenu_formulaire_etage2_provider").style.height);
 
	alert ('hauteur_du_formulaire :'+hauteur_du_formulaire);
	var ajout_hauteur_du_formulaire = 20 ;
	alert ('ajout_hauteur_du_formulaire:' +ajout_hauteur_du_formulaire);
	var nouvelle_hauteur = hauteur_du_formulaire + ajout_hauteur_du_formulaire;
	alert ('nouvelle_hauteur_du_formulaire:'+nouvelle_hauteur);
	document.getElementById("bloc_contenu_formulaire_etage2_provider").style.height=nouvelle_hauteur+"px";