Ouvrir une nouvelle fenêtre de navigateur à une taille et une position définies, de telle façon que tout le contenu soit visible nécessite des essais. Le javascript suivant, à intégrer dans la page d'arrivée, prend en charge cette tâche fastidieuse.
Programmation > JavaScript
Recherche :   
Actualité Système Salon Concours Outils Programmation Devparadise Programmation HTML .Net JavaScript VBScript ASP PHP Visual Basic Perl Java Active X SQL XML WAP Delphi Graphisme Flash Web Design Promotion Référencement Publicité Valeur de votre site Outils Systèmes Windows Unix Linux Benchmark Hardware Réseaux locaux Droit Sécurité
Ajuster dynamiquement la taille d'une fenêtre
  Auteur : bruno VILLACAMPA

Ouvrir une nouvelle fenêtre de navigateur à une taille et une position définies, de telle façon que tout le contenu soit visible nécessite des essais. Le javascript suivant, à intégrer dans la page d'arrivée, prend en charge cette tâche fastidieuse.

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">
// A placer en bas de page
//initialisation de la largeur par défaut mini
var ww=300;
//initialisation de la hauteur par défaut mini
var hh=200;
//incrément pour IE
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>

A lire aussi sur Devparadise.com :
  • Ajouter une barre de navigation
  • Boîtes de contenu flottantes
  • Faire défiler verticalement un contenu dans une boîte en javascript.
  • Roll-over sonore
  • Création d'animations en javascript.
  • A télécharger aussi sur Devparadise.com :
  • MADOTATE 3D
  • WinExposé
  • source de l'article "Boîtes de contenu flottantes"
  • Bibliothèque javascript pour créer des boîte à contenu défilant
  • WebExpert 5

  • © 1997-2009 tous droits réservés Devparadise.com
    Les logos, et marques déposées sont la propriété de leurs détenteurs respectifs.
    Devparadise.com s'est engagé à respecter la confidentialité des données personnelles régies par la loi 78-17 du 6 janvier 1978.
    Déclaration C.N.I.L. n° 621623
    javascript,fenêtre,openwindow