Connaître les dimensions du contenu d'un popup

**riete** · 11/08/2009, 17h44

Je suis étonné de ne pas avoir trouvé de réponse à cette question. Ais-je mal cherché où est ce que la solution me crève les yeux ?

La question est dans le titre.

Merci

**Oscar Hiboux** · 11/08/2009, 22h21

Voilà une manière bien simple d'obtenir ce que tu veux.

**Bovino** · 12/08/2009, 08h49

offsetHeight et offsetWidth le font très bien sans Prototype...

**riete** · 12/08/2009, 09h20

Envoyé par Oscar Hiboux

Voilà une manière bien simple d'obtenir ce que tu veux.

Merci pour ta réponse, mais je ne comprends pas cette syntax

Code :

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

var dimensions = $('rectangle').getDimensions();

A y regarder d'un peu plus près ceci fait référence à la notion de prototype que je ne connais obsoluement pas (je vais peut être y regarder de plus près).
Est-il possible d'obtenir les dimensions "à l'ancienne" ?

**Bovino** · 12/08/2009, 10h30

Envoyé par Bovino

offsetHeight et offsetWidth le font très bien sans Prototype...

**riete** · 12/08/2009, 10h46

Le problème ne semble pas si simple comme tu le dis

Voici un bout de code qui monte mon embarra: le but final étant d'utiliser onload pour redimensionner automatiquement la fenêtre sur le client quelque soit les évolutions du l'interface

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
<html>
<body>
<div id=main>
	<table width="300" bgcolor="#FF6600">
		<tr>
			<td height="100" bgcolor="#FF9900">
 
			</td>
		</tr>
	</table>
 
	<script type="text/javascript" charset="iso-8859-1">
		document.write("vertical=" + document.body.clientHeight + " - horizontal=" + document.body.clientWidth +"<br>");
 
		document.write("Largeur contenu: " + document.getElementById('main').offsetWidth + "<br>");
		document.write("Hauteur contenu: " + document.getElementById('main').offsetHeight + "<br>");
 
		window.resizeTo(document.getElementById('main').offsetWidth, document.getElementById('main').offsetHeight);
	</script>
</div>
</body>
</html>

**Bovino** · 12/08/2009, 10h50

Vu que tu insères ton code avant la fermeture de la div, comment veux-tu pouvoir connaitre ses dimensions...

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
<div id=main>
	<table width="300" bgcolor="#FF6600">
		<tr>
			<td height="100" bgcolor="#FF9900">
 
			</td>
		</tr>
	</table>
 
</div>	
	<script type="text/javascript" charset="iso-8859-1">
                document.write("vertical=" + document.body.clientHeight + " - horizontal=" + document.body.clientWidth +"<br>");
                
                document.write("Largeur contenu: " + document.getElementById('main').offsetWidth + "<br>");
                document.write("Hauteur contenu: " + document.getElementById('main').offsetHeight + "<br>");
                
                window.resizeTo(document.getElementById('main').offsetWidth, document.getElementById('main').offsetHeight);
        </script>

**Oscar Hiboux** · 12/08/2009, 15h12

Héhé, remarque judicieuse ça ! ^^' Il faut bien faire attention à manipuler les éléments de l'interface seulement après qu'ils soient chargés / bien formés.

@Bovino : ne t'hérisses pas comme ça. Si tu jettes un œil à l'implémentation de Element#getDimensions tu remarqueras qu'il y a qq petites subtilités dont il est agaçant de se préoccuper. C'était, comme je le disais, une manière, simple (merci les frameworks).

@riete :

Code :

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

$("main").getDimensions(); // te retourne un petit ensemble de propriétés comme : {width: 100, height: 200}

La fonction $ te donne un accès rapide à un élément identifié en l'agrémentant, au passage, de qq fonctionnalités bien utiles (cf. Element).

**Bovino** · 12/08/2009, 15h33

Envoyé par Oscar Hiboux

@Bovino : ne t'hérisses pas comme ça. Si tu jettes un œil à l'implémentation de Element#getDimensions tu remarqueras qu'il y a qq petites subtilités dont il est agaçant de se préoccuper. C'était, comme je le disais, une manière, simple (merci les frameworks).

Ne prends pas mal mon ton parfois un peu direct

Ce que je voulais dire, c'est que contrairement à offsetTop et offsetLeft, les résultats de offsetWidth et offsetHeight ne dépendent pas du navigateur et sont donc fiables sans avoir pour autant à utiliser un framework.
Je ne suis pas hostile à l'utilisation de framework, mais en utiliser un juste pour obtenir ce genre d'information me semble inadapté. En fait, l'utilisation d'un framework ne me parait justifiée que si elle est envisagée de façon globale, c'est-à-dire en l'exploitant à fond et non pas en utiliser (comme c'est trop souvent le cas) uniquement quelques fonctionnalités que l'on ne se sent pas capable de coder.
En gros, je déconseille l'utilisation d'un framework si l'on n'a pas une connaissance suffisante de JavaScript

**riete** · 12/08/2009, 15h34

Envoyé par Bovino

Vu que tu insères ton code avant la fermeture de la div, comment veux-tu pouvoir connaitre ses dimensions...

bien entendu, j'ai poster ce code réduit sans prendre garde à cet énorme détail.
Sur la page réelle, les réactions sont tout aussi imprévisibles que sur ce bout de code réduit. As tu essayé ?

Avec FF, IE ou Safari, j'ai 2 comportements totalement opposés avec ce code

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>
<body>
<div id=main>
	<table width="300" bgcolor="#FF6600">
		<tr>
			<td height="200" bgcolor="#FF9900">
 
			</td>
		</tr>
	</table>
</div>
<script type="text/javascript" charset="iso-8859-1">
		document.write("vertical=" + document.body.clientHeight + " - horizontal=" + document.body.clientWidth +"<br>");
 
		document.write("Largeur contenu: " + document.getElementById('main').offsetWidth + "<br>");
		document.write("Hauteur contenu: " + document.getElementById('main').offsetHeight + "<br>");
 
		window.resizeTo(document.getElementById('main').offsetWidth, document.getElementById('main').offsetHeight);
	</script>
</body>
</html>

- FF au chargement la page se réduit à la taille de la barre de navigation, puis quand je recharge la page sa taille augmente dans la largeur.
- IE et Safari la fenêtre diminue à chaque recharge.

Je ne comprends pas, d'une part pourquoi la page se réduit autant, d'autre par pourquoi au rechargement il y a un tel changement de taille.

**riete** · 12/08/2009, 15h43

Merci Oscar Hiboux pour ces précisions. Je pense que je vais laissé de coté le Framework, comme je l'ai fait jusqu'à maintenant d'ailleurs, je préfère le code à la mano, au moins je maitrise (en général) mieux ce que je code.
En plus je n'ai pas une connaissance suffisante de Javascript

(@Bovino: sans rancune

il faut bien faire un peu d'humour sarcastique)

**Oscar Hiboux** · 12/08/2009, 22h11

Envoyé par Bovino

je déconseille l'utilisation d'un framework si l'on n'a pas une connaissance suffisante de JavaScript

Complètement d'accord ! Si on ne le fait pas on se trouve bien désemparé lorsqu'il s'agit de mettre réellement les mains dans le cambouis...

Envoyé par Bovino

Ne prends pas mal mon ton parfois un peu direct

OK, pas de souci !

Envoyé par Bovino

Ce que je voulais dire, c'est que contrairement à offsetTop et offsetLeft, les résultats de offsetWidth et offsetHeight ne dépendent pas du navigateur et sont donc fiables sans avoir pour autant à utiliser un framework.

[...]l'utilisation d'un framework ne me parait justifiée que si elle est envisagée de façon globale, c'est-à-dire en l'exploitant à fond et non pas en utiliser (comme c'est trop souvent le cas) uniquement quelques fonctionnalités que l'on ne se sent pas capable de coder.

Oué mais justement, après un certain temps, ça devient vraiment inintéressant de se souvenir de ce genre de subtilités liés aux navigateurs. D'où ma petite prêche pour prototype.js car j'y suis plus que familier et qu'il reste concentré sur l'essentiel, pas comme d'autres qui grossissent, et grossissent et grossissent sans cesse...

Pour le reste je suis plutôt d'accord mais pour cette fois c'est un framework somme toute assez léger je trouve, donc on revient souvent à écrire ce qui y est déjà écrit. Enfin, on dérive, on dérive...

**Oscar Hiboux** · 12/08/2009, 22h19

Envoyé par riete

[...]Je ne comprends pas, d'une part pourquoi la page se réduit autant[...]

Fais attention à l'implémentation de Window#resizeTo. Si tu fixes les dimensions de la fenêtre n'oublie pas qu'elle contient des barres d'outils et de menu par exemple... Il faut les compter dans la hauteur il me semble (ce qui devient assez... hum... difficile à gérer

).

C'est un élément d'information, je ne maîtrise pas beaucoup que ça ce genre de bidouilles avec les fenêtres (qui m'exaspèrent au plus au point quand je suis utilisateur ^^').

**riete** · 13/08/2009, 17h00

Envoyé par Oscar Hiboux

Fais attention à l'implémentation de Window#resizeTo. Si tu fixes les dimensions de la fenêtre n'oublie pas qu'elle contient des barres d'outils et de menu par exemple... Il faut les compter dans la hauteur il me semble (ce qui devient assez... hum... difficile à gérer

).

C'est un élément d'information, je ne maîtrise pas beaucoup que ça ce genre de bidouilles avec les fenêtres (qui m'exaspèrent au plus au point quand je suis utilisateur ^^').

Manipuler les fenêtres est en effet très désagréable pour l'utilisateur si ceci est fait uniquement à sont issue et à des fins commercial.
Dans mon cas, je voudrais profiter de la création d'une fonction re-dimensionnement auto afin de pouvoir changer à ma guise le contenu d'un PopUp sans avoir à préciser sa taille avant la commande d'ouverture.

Je n'ai pour le moment pas de solutions fiable

**Oscar Hiboux** · 13/08/2009, 19h03

As-tu songé à utiliser des calques plutôt que des fenêtres brutes ? C'est tellement plus ergonomique, flexible, performant...

**riete** · 14/08/2009, 08h41

Je suis ouvert à toutes solutions.
Mais quand tu parles de calques tu fais allusion à z-index ? dans ce cas, je ne vois pas comment cela pourrais m'aider

Pourrais tu me donner un peu plus de précision, merci

**Oscar Hiboux** · 17/08/2009, 19h38

Quand je dis "calque" je parle par exemple un élément "div" flottant par dessus le contenu de la page et dans lequel tu disposerais le contenu que tu affiches dans une fenêtre fille. Car c'est bien l'impression que tu me donnes : la fenêtre que tu tentes de mesurer est une fenêtre que tu ouvres à partir d'une autre, non ?

**riete** · 18/08/2009, 10h48

Envoyé par Oscar Hiboux

Quand je dis "calque" je parle par exemple un élément "div" flottant par dessus le contenu de la page et dans lequel tu disposerais le contenu que tu affiches dans une fenêtre fille. Car c'est bien l'impression que tu me donnes : la fenêtre que tu tentes de mesurer est une fenêtre que tu ouvres à partir d'une autre, non ?

Je vais te donner un peu plus détail sur la situation, pour que ce soit plus claire pour toi.

Le client se trouve devant une page avec de nombreux liens. Par un clique sur un de ces liens, une fenêtre popup s'ouvre dans laquelle il obtient un formulaire assez touffu (55 champs !!) qui contient des informations techniques. La nature et la forme de ces champs sont sujets à modification et par conséquent la taille de la page aussi.

Mon problème de fond est donc de ne pas avoir à redéfinir la taille de la fenêtre dans la commande d'appel du popup à chaque fois que je fais une modif.

Tu me comprends mieux ?

Utiliser les calculs soit, mais dans ce cas, ceci me semble mal adapté.

**Oscar Hiboux** · 19/08/2009, 19h24

OK. Ne pourrais-tu pas employer un élément "iframe" à la place, dans un élément "div" flottant, stylisé comme un dialogue (barre de titre, etc.). Tu auras le plein contrôle dessus : tu pourras lui mettre une largeur appropriée - celle du formulaire qui doit être ± fixe j'imagine, et une hauteur maximum (CSS : max-height: ...; overflow: scroll;). Ainsi il aura toujours la bonne hauteur, fonction du contenu, tant que c'est moins haut que ce que tu auras mis comme valeur de "max-height". Puis, une barre de défilement apparaîtra (de la même manière qu'elle devrait apparaître avec une véritable fenêtre dans tous les cas). Tu vois le truc ?

**riete** · 20/08/2009, 11h39

Oui, oui, je vois bien le truc (enfin je pense).
Le problème vient justement du fait que le formulaire n'est pas ± fixe, c'est bien lui qui varie en fonction de l'évolutions de besoin.

J'ai donc essayé de mettre un div dans la fenêtre popup. Ce div contenant l'ensemble du formulaire.
Mais je n'arrive pas redéfinir la type de la fenêtre en fonction de la taille prise par le contenu du div.

Si tu as une idée c'est bien, sinon ya pas de soucis, on fera avec.
merci en tout cas Oscar Hiboux

Connaître les dimensions du contenu d'un popup

JavaScript

Discussions similaires

Partager

Partager