taille de popup minimale (adaptée au contenu)

Version imprimable

25/10/2007, 11h56
AnneB

taille de popup minimale (adaptée au contenu)

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 ?
25/10/2007, 12h23
gwyohm

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:

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

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:

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>

25/10/2007, 12h59
SpaceFrog

offsetHeight, offsetWidth du conteneur puis resizeTo
25/10/2007, 13h01
nabab

SpaceFrog a raison: c'est plus simple et c'est mieux :evilred:
Faut que j'arrete de tout faire avec cette librairie!

Code:

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

25/10/2007, 14h41
E.Bzz

Bonjour,

Citation:

Envoyé par AnneB

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

En enlevant

Code:

var idElement = "page";

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

A+
25/10/2007, 15h25
SpaceFrog

peu importe Ebzzz ...

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

lol
:oops: dsl,
en fait ma fonction est la suivante :
Code:

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:

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

Code:

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