recuperer et utiliser la taille d'une fenêtre

Version imprimable

Bonjour à tous,

Je cherche à créer un tableau qui s'adapte automatiquement à la taille de la fenètre ouverte par l'utilisateur.

J'ai essayé ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <table id="principal" border="1"> <tr> <td>Test de dimensions</td> </tr> </table> <script language="javascript"> var largeur=(window.innerWidth)-30; var hauteur=(window.innerHeight)-20; document.getElementById("principal").width=largeur; document.getElementById("principal").height=hauteur; </script>
ça fonctionne en ce qui concerne la largeur de mon tableau mais absolument pas pour la hauteur...

Quelqu'un peut-il me dire pourquoi ?

Ou s'il y à un meilleur moyen d'arriver à mes fins ? ;)

Bonne journée à tous

16/09/2008, 17h05
Alexdezark

petit rectificatif...

ça fonctionne pour la largeur dans Firefox... pas du tout dans IE...
16/09/2008, 17h12
Bovino

availHeight et availWidth ?

Bonjour Bovino :D

Merci de ta réponse... mais le script ci-dessous ne fonctionne pas non plus...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
<table id="principal" border="1">
  <tr>
    <td>Test de dimensions</td>
  </tr>
</table>
 
<script language="javascript">
 
 
var largeur=window.availWidth;
var hauteur=window.availHeight;
 
document.getElementById("principal").width=largeur;
document.getElementById("principal").height=hauteur;
</script>

Code:

1
2
document.getElementById("principal").style.width=largeur;
document.getElementById("principal").style.height=hauteur;

16/09/2008, 17h30
Alexdezark

non, non...

J'avais déjà essayé ça mais j'ai aussitot une erreur dans la console d'erreur :

Citation:

Avertissement : Erreur d'analyse de la valeur pour la propriété « height ». Déclaration abandonnée.

Avertissement : Erreur d'analyse de la valeur pour la propriété « width ». Déclaration abandonnée.

Je suis fatigué moi...

Code:

1
2
document.getElementById("principal").style.width=largeur+'px';
document.getElementById("principal").style.height=hauteur+'px';

EDIT

Code:

1
2
var largeur=screen.availWidth;
var hauteur=screen.availHeight;

16/09/2008, 17h42
Alexdezark

Cool...

Merci Bovino :D

ça marche (enfin... pas dans IE...)

Dans l'absolu ça ne me pose pas un énorme problème (pour IE) mais y a-t-il une solution avec IE ?

Ca doit venir de ton doctype car testé chez moi avec ie6 et 7 en xhtml strict et ça passe.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Page sans titre</title>
	<script type="text/javascript">
function grandi(){
var largeur=screen.availWidth;
var hauteur=screen.availHeight;
document.getElementById("principal").style.width=largeur+'px';
document.getElementById("principal").style.height=hauteur+'px';
}
	</script>
</head>
<body>
    <div style="background-color:lime" id="principal">
	<input type="button" onclick="grandi()" value="tester" />
	</div>
</body>
</html>

16/09/2008, 18h05
Alexdezark

Apparement le problème vient plutot de ceci :

tu utilise :

var largeur=screen.availWidth;
var hauteur=screen.availHeight;

et moi :

var largeur=window.innerWidth;
var hauteur=window.innerHeight;

Or je crois que "window" n'est pas reconnu par IE (peux tu me le confirmer ? )

Le problème étant que screen récupère la taille de l'écran (je crois...) mais ce qui m'interesse c'est la taille de la fenêtre du navigateur.

Donc, après moult recherches voici une solution qui fonctionne avec les 2 navigateurs
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <table id="principal" border="1"> <tr> <td>Test de dimensions</td> </tr> </table> <script language="javascript"> var largeur=document.documentElement.clientWidth; var hauteur=document.documentElement.clientHeight; document.getElementById("principal").style.width=largeur+'px'; document.getElementById("principal").style.height=hauteur+'px'; </script>
Finalement... c'est plutôt rare une solution qui fonctionne avec les deux navigateurs ;)

Bonne soirée à tous...