recuperer et utiliser la taille d'une fenêtre

**Alexdezark** · 16/09/2008, 17h03

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 :

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

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

**Alexdezark** · 16/09/2008, 17h05

petit rectificatif...

ça fonctionne pour la largeur dans Firefox... pas du tout dans IE...

**Bovino** · 16/09/2008, 17h12

availHeight et availWidth ?

**Alexdezark** · 16/09/2008, 17h21

Bonjour Bovino

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

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

**Bovino** · 16/09/2008, 17h26

Code :

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

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

**Alexdezark** · 16/09/2008, 17h30

non, non...

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

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.

**Bovino** · 16/09/2008, 17h35

Je suis fatigué moi...

Code :

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

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

EDIT

Code :

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

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

**Alexdezark** · 16/09/2008, 17h42

Cool...

Merci Bovino

ç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 ?

**Bovino** · 16/09/2008, 17h50

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

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

**Alexdezark** · 16/09/2008, 18h05

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.

**Alexdezark** · 16/09/2008, 18h46

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

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

recuperer et utiliser la taille d'une fenêtre

JavaScript

Discussions similaires

Partager

Partager