Taille et position d'une fenêtre

Taille et position d'une fenêtre
- Les notions de base
- Les exemples de script

Il existe deux fonctions qui permettent de bouger et de dimensionner une fenêtre. Nous allons les étudier, utiliser des caculs savants et bidouiller tout ça

Les notions de base

window.moveTo(x,y)

x et y correspondent au coordonnées pixel du coin haut gauche de la fenetre. S'utilise pour placer une fenêtre à un endroit particulier de la page. Il existe aussi window.moveBy(x,y) pour placer la fenêtre par rapport à sa position actuelle.

window.resizeTo(x,y)

x et y correspondent à la taille finale pixel de la fenetre (comprenant les barres de navigation, status… que l'internaute affiche) Il existe aussi window.resizeBy(x,y) pour redimensionner la fenêtre par rapport à sa taille actuelle.

screen.availWidth, screen.availHeight

largeur et hauteur max sans “manger” la barre de lancement Windows si elle est affichée. Peuvent être utilisés dans des calculs

screen.Width, screen.Height

largeur et hauteur de l'écran Peuvent être utilisés dans des calculs

Les exemples de script

Retailler une fenêtre "classique" et la placer au centre de l'écran

<SCRIPT language="JavaScript"> 
<!-- 
// on ne définie pas de fonction : le script s'éxécutera au chargement de la page
window.resizeTo(470,320) 
// la fenetre fait 470*320. ATTENTION : inutile s'il s'agit d'une popup, vu que c la fenetre mère qui a déterminé sa taille. 
// Utile quand on veut resizer une fenetre "classique" 
var largeur=screen.availWidth; //calcul auto de la largeur de l'ecran client 
var hauteur=screen.availHeight; //calcul auto de la hauteur de l'ecran client 
// je veux que ma fenetre soit centrée en hauteur et largeur 
// demiL c'est ((largeur totale de l'ecran)-(largeur de ma fenetre)/2)
// faites un dessin si vous comprenez pas le calcul
// meme principe avec demiH
var demiL=((largeur-470)/2); 
var demiH=((hauteur-320)/2); 
window.moveTo(demiL,demiH); 
//--> 
</SCRIPT>

Placer une popup au centre de l'écran

Ceci est le code de la fenêtre mère qui va ouvrir la popup

<html>
<SCRIPT language="JavaScript"> 
<!--
function mapopup()
{
var h = 500; // hauteur de la popup
var l = 600; // largeur de la popup
var PosX = ( screen.availWidth - h ) / 2; 
var PosY = ( screen.availHeight - l ) / 2; 
var option = "resizable=no,top="+PosY+",left="+PosX+",width="+h+",height="+l; 
window.open("","titre",option); 
}
//--> 
</SCRIPT>
 
<body>
ouvrir une <a href="javascript:mapopup()">popup centrée</a>
</body>
</html>

Empecher qu'une fenetre "classique" soit resizée

<html> 
<head> 
<script> 
function taille() 
{ 
window.resizeTo(350,450); 
} 
</script> 
<head> 
 
<body onload="taille()" onresize="taille()"> 
klmfslkmfdmlkf<br>
c du polonais des iles caïmans 
</body> 
</html>

Tutorial de piloue

Forums Développement Multimédia