 |
Publicité 
|
On rencontre plusieurs difficultés pour mettre au point ce genre de fonctionnalité.
Les propriétés de dimension et de position ne sont pas prises en charge de la même manière entre Internet Explorer et Netscape Navigator.
La page affichée n'est pas forcément " cadrée ", c'est-à-dire qu'elle n'intègre pas de tableau dimensionné permettant de fixer la largeur ou la hauteur.
Enfin, a page affichée peut nécessiter un espace supérieur à taille de l'écran.
Pour cet exemple, nous avons choisi de définir une largeur et une hauteur de fenêtre minimales, ww (pour la largeur) et hh (pour la hauteur).
Sous Internet Explorer :
Pour Internet Explorer, nous avons ajouté un paramètre d'étape step qui représente l'incrémentation du dimensionnement de la fenêtre. En effet, dans ce navigateur, nous sommes obligés d'atteindre la dimension optimale par approches successives.
Ainsi le script se décompose en deux étapes :
La première consiste en l'initialisation des paramètres et l'activation de la boucle de dimensionnement, c'est-à-dire l'appel de la fonction redim().
Cette partie doit être placée en fin de page.
document.body.scrollWidth (scrollHeight) indique la largeur (hauteur) du document en pixels. C'est à partir de cette donnée que le dimensionnement est effectué.
Les paramètres ww et hh sont alors redéfinis de façon à ce qu'ils soient supérieurs ou égaux au minimum défini et inférieur à la taille de la fenêtre.
La fonction redim() de dimensionnement fonctionne de la même manière pour la largeur et la hauteur.
- le flag de continuation ok de l'opération est défini à 0
- on positionne l'ascenseur à 2 pixels (document.body.scrollLeft)
- Si document.body.scrollLeft est positif, c'est que le contenu est plus grand que la fenêtre. Si la taille de l'écran n'est pas atteinte, on agrandit la fenêtre de step et on fixe le flag de continuation à 1.
- Si le flag de continuation est à 1 alors on recommence.
Sous Netscape Navigator :
Pour une fois, Netscape permet d'aller plus vite.
En effet, les propriétés document.width et document.height permettent de connaître directement la taille du document.
De plus, Netscape prend en charge l'ajustement de la taille de la fenêtre pour qu'elle ne sorte pas du cadre de l'écran.
Il y a bien sûr la contre-partie à ces facilités : un contrôle moins précis et donc, parfois, un dimensionnement approximatif.
Appel de la page :
Il doit s'appuyer sur la fonction window.open, de la manière suivante :
window.open(
'redimauto.html', 'OpenWindow', 'resizable=yes, scrollbars=yes, toolbar=no, status=no, width=100, height=100, top=0, left=0');
Le paramètre scrollbars est ici fixé à yes mais vous pouvez choisir de ne pas afficher les ascenseurs, Netscape et Internet Explorer l'acceptent très bien.
Code source :
<html>
<script>
function redim() {
ok=0;
if (document.all) {
document.body.scrollLeft=2;
if ((document.body.scrollLeft>0) && (ww<(screen.width-step))) {
ww+=step;
self.window.resizeTo(ww,hh);
ok=1;
}
document.body.scrollTop=2;
if (document.body.scrollTop>0) {
hh+=step;
self.window.resizeTo(ww,hh);
ok=1;
}
if (ok==1) {setTimeout('redim();',10)};
}
}
</script>
<body>
<h1>Hello, je me redimensionne</h1>
<table width=500 height=150 border><tr><td>
<h3>Exemple</h3>
Ceci est un test de texte long que l'on verra peut-être ou peut-être pas.
Ceci est un test de texte long que l'on verra peut-être ou peut-être pas.
</td></tr></table>
<script language="Javascript">
var ww=300;
var hh=200;
var step=15;
if (document.all) {
x=document.body.scrollWidth;
ww=(x<(screen.width-step) && x>ww) ? x : ww;
x=document.body.scrollHeight;
hh=(x<(screen.height-step) && x>hh) ? x : hh;
redim();
}else if (document.layers) {
ww=(document.width>ww) ? (document.width+10):ww;
hh=(document.height>hh) ? (document.height+10):hh;
setTimeout("self.window.resizeTo(ww,hh);",100);
}
</script>
</body>
</html>
|
