taille de popup minimale (adaptée au contenu)

**AnneB** · 25/10/2007, 11h56

J'ai une popup. Je veux que lorsque celle ci s'ouvre (grâce au window.open), celle ci s'affiche adaptée à la taille du texte, cad que je souhaite que mon texte se voit en entier dans la popup (le texte est dynamique, je peux avoir une comme 10 lignes, c'est variable). Mais je ne veux pas fixer la hauteur à 100px et la longueur à 200px, parce que si j'ai plus de lignes, je les verrais pas à moins de mettre une scrollbar.
Je veux que la taille de la popup soit juste assez grande pour afficher tout le texte, mais pas plus grande (pour éviter une grande page blanche)

C'est faisable ca ?

**gwyohm** · 25/10/2007, 12h23

A mon avis tu dois quand même fixer la largeur : tu ne peux pas connaître la hauteur de ton texte si tu ne sais pas dans quelle largeur il s'écrit.

Je suppose que ton texte s'ecrit dans un <p>, donne lui un id (ex: contenu) et tu peux faire dans l'openwindow :

Code :

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

<body onload="self.outerHeight= document.getElementById('contenu').offsetHeight;"> <p id="contenu">...</p>

**nabab** · 25/10/2007, 12h51

A visto de naz, je dirais qu'il te faut insérer ton texte dans un tableau a cellule unique dont tu ne specifies pas la taille. La, tu mesures la taille du tableau, et tu donnes la meme taille a ta popup.

Je viens de faire un test qui a fonctionné en utilisant la librairie X (http://www.cross-browser.com):

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PopUp</title>
<script type="text/javascript" src="x/lib/xgetelementbyid.js"></script>
<script type="text/javascript" src="x/lib/xdef.js"></script>
<script type="text/javascript" src="x/lib/xleft.js"></script>
<script type="text/javascript" src="x/lib/xtop.js"></script>
<script type="text/javascript" src="x/lib/xstr.js"></script>
<script type="text/javascript" src="x/lib/xnum.js"></script>
<script type="text/javascript" src="x/lib/xwidth.js"></script>
<script type="text/javascript" src="x/lib/xheight.js"></script>
<script type="text/javascript">
function mesure_tab()
{
var tab = xGetElementById('mon_tableau');
var w = xWidth(tab);
var h = xHeight(tab)+60;
if ( w > screen.width )
{ w = screen.width; }
if ( h > screen.height )
{ h = screen.height; }
window.resizeTo(w,h);
}
</script>
</head>
<body onload="mesure_tab()">
<table id="mon_tableau" cellpadding="3" cellspacing="0" border="0">
	<tr>
		<td>Ton texte ici</td>
	</tr>
</table>
</body>
</html>

C'est pas vraiment terminé car il faut positionner ta fenetre, et lui donner une taille maximale en fonction des dimensions ET de la position.
Ouvre ta fenetre en lui donnant la taille de l'ecran de l'utilisateur afin que le tableau soit créé sans contrainte:
<a href="#" onclick="javascript:window.open('testjs.php',null,'height=screen.height,width=screen.width,status=no,toolbar=no,scrollbars=no');">
LIEN</a>

**SpaceFrog** · 25/10/2007, 12h59

offsetHeight, offsetWidth du conteneur puis resizeTo

**nabab** · 25/10/2007, 13h01

SpaceFrog a raison: c'est plus simple et c'est mieux

Faut que j'arrete de tout faire avec cette librairie!

**AnneB** · 25/10/2007, 14h35

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
 
<head>
<!-- ... -->
<script language="javascript">
window.onload=resizeToMinimal;
function resizeToMinimal(){
window.resizeTo(
var idElement = "page";
document.getElementById('machin').offsetWidth,
document.getElementById('machin').offsetHeight
);
}
</script>
</head>
<body >
<!-- code jsp -->
</body>

ca a l'air de marcher, à ceci près que ca marche pour la hauteur de la page, mais pas pour la largeur...
J'ai plein de blanc à droite de mon texte

C'est ca qu'il faut que je fasse?

**E.Bzz** · 25/10/2007, 14h41

Bonjour,

Envoyé par AnneB

C'est ca qu'il faut que je fasse?

En enlevant

Code :

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

var idElement = "page";

qui n'a rien à faire là, si ?

A+

**SpaceFrog** · 25/10/2007, 15h25

peu importe Ebzzz ...

mais il vaut mieux remplacer la virgule par un point virgule ... non ?

**AnneB** · 25/10/2007, 16h44

lol

dsl,
en fait ma fonction est la suivante :

Code :

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

1
2
3
4
5
6
7
function resizeToMinimal(){
window.resizeTo(
var idElement = "page";
document.getElementById(idElement).offsetWidth,
document.getElementById(idElement).offsetHeight
);
}

Sachant que le div d'id "page" est un div qui commence juste apres le tag <body> et la fin de ce div est juste avant </div> (en gros ce div englobe tout ce qui est dans le boy de ma page)
Le truc c'est que la fenêtre se redimensionne correctement en hauteur (par rapport au nombre de lignes) mais en largeur elle est trop large.
Voici mon code jsp (juste le body) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id=page>
<div class="maClassePourLeStyle">
  <logic:notEmpty name="monForm" property="collectionInfos">
    <table>
      <logic:iterate id="info" name="monForm" property="collectionInfos">
        <tr><bean:write name="info"/></tr>
      </logic:iterate>
    </table>
  </logic:notEmpty>
</div>
</div>
</body>

Mais bon, je crois que je vais laisser comme ca

**SpaceFrog** · 25/10/2007, 17h43

Code :

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

1
2
3
4
5
6
7
function resizeToMinimal(){
window.resizeTo(
var idElement = "page";
document.getElementById(idElement).offsetWidth;
document.getElementById(idElement).offsetHeight
);
}

taille de popup minimale (adaptée au contenu)

JavaScript

Discussions similaires

Partager

Partager