Les tailles des fenêtres - Cours Javascript

Introduction

Info

Dans ce chapitre, nous allons étudier la taille du contenu de la fenêtre c'est a dire la fenêtre sans les barres de navigation et aussi la position des ascenseurs.
Cette zone de contenu sera nommée dans ce chapitre "zone de contenu".
Attention, Netscape ou Firefox et Internet Explorer n'utilise pas les mêmes fonctions.

window.innerHeight

Info

La propriété javascript innerHeight de l'objet javascript window permet de récupérer la hauteur la zone de contenu visible sous Netscape ou Firefox.

La propriété javascript innerHeight de l'objet javascript window renvoie une valeur dont l'unité est le pixel.

Exemple :
Taper dans le générateur :
Exemple de code :
alert(window.innerHeight);
Voici un exemple
Changez la taille de la fenêtre.

document.body.clientHeight

Info

La propriété javascript clientHeight de l'objet javascript document.body permet de récupérer la hauteur la zone contenu sous Internet Explorer.

La propriété javascript clientHeight de l'objet javascript document.body renvoie une valeur dont l'unité est le pixel.

Exemple :
Taper dans le générateur :
Exemple de code :
alert(document.body.clientHeight);
Voici un exemple

Attention à la DTD

Si vous utilisez un doctype valide comme par exemple :
Exemple de code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Vous devez utiliser à la place de document.body document.documentElement
Cette règle est valide pour les propriétés à suivre.

window.innerWidth

Info

La propriété javascript innerWidth de l'objet javascript window permet de récupérer la longueur la zone de contenu visible sous Netscape ou Firefox.

La propriété javascript innerWidth de l'objet javascript window renvoie une valeur dont l'unité est le pixel.

Exemple :
Taper dans le générateur :
Exemple de code :
alert(window.innerWidth);
Voici un exemple

document.body.clientWidth

Info

La propriété javascript clientWidthde l'objet javascript document.body permet de récupérer la longueur la zone contenu sous Internet Explorer.

La propriété javascript clientWidth de l'objet javascript document.body renvoie une valeur dont l'unité est le pixel.

Exemple :
Taper dans le générateur :
Exemple de code :
alert(document.body.clientWidth);
Voici un exemple

window.pageXOffset

Info

La propriété javascript pageXOffset de l'objet javascript window permet de récupérer la position horizontale la zone contenu sous Netscape.

La propriété javascript pageXOffset de l'objet javascript window renvoie une valeur dont l'unité est le pixel.

Exemple :
Taper dans le générateur :
Exemple de code :
alert(window.pageXOffset);
Voici un exemple
Réduisez la fenêtre de cours pour avoir une scrollbarre horizontale.
Déplacez cette scrollbarre et observez les valeurs dans la pop up ouverte.

document.body.scrollLeft

Info

La propriété javascript scrollLeft de l'objet javascript document.body permet de récupérer la position horizontale la zone contenu sous Internet Explorer.

La propriété javascript scrollLeft de l'objet javascript document.body renvoie une valeur dont l'unité est le pixel.

Exemple :
Taper dans le générateur :
Exemple de code :
alert(document.body.scrollLeft);

Voiçi un exemple
Réduisez la fenêtre de cours pour avoir une scrollbarre horizontale.
Déplacez cette scrolbarre et observez les valeurs dans la pop up ouverte.

window.pageYOffset

Info

La propriété javascript window.pageYOffset de l'objet javascript window permet de récupérer la position verticale de la zone contenu sous Netscape.
En pixel.

La propriété javascript pageYOffset de l'objet javascript window renvoie une valeur dont l'unité est le pixel.

Exemple :
Taper dans le générateur :
Exemple de code :
alert(window.pageYOffset);
Voiçi un exemple
Réduisez la fenêtre de cours pour avoir une scrollbarre verticale.
Déplacez cette scrolbarre et observez les valeurs dans la pop up ouverte.

document.body.scrollTop

Info

La propriété javascript scrollTop de l'objet javascript document.body permet de récupérer la position verticale de la zone contenu sous Internet Explorer.

La propriété javascript scrollTop de l'objet javascript document.body renvoie une valeur dont l'unité est le pixel.

Exemple :
Taper dans le générateur :
Exemple de code :
alert(document.body.scrollTop);
Voiçi un exemple
Réduisez la fenêtre de cours pour avoir une scrollbarre verticale.
Déplacez cette scrolbarre et observez les valeurs dans la pop up ouverte.

scrollTo(X,Y)

Info

La méthode javascript scrollTo(x,y) de définir le point d'origine de la zone de contenu dans la fenêtre.

La méthode scrollTo(x,y) javascript accepte comme paramètres :
- x, valeur de type Number positive en pixel.
- y, valeur de type Number positive en pixel.

Exemple :



Code :
Exemple de code :
function deplacea(){
  scrollTo(0,200);
}

function deplaceaaa(){
  for (var i=200; i>0; i-- ){
    scrollTo(0,i);
  }
}

scrollBy(X,Y)

Info

La méthode javascript scrollBy(X,Y) permet de définir le nombre de pixel dont va se décaler la zone de contenu.

La méthode scrollBy(x,y) javascript accepte comme paramètres :
- x, valeur de type Number positive ou négative en pixel.
- y, valeur de type Number positive ou négative en pixel.

Exemple :



Code :
Exemple de code :
function deplaceb(){
  scrollBy(0,-200);
}

function deplacebb(){
for (var i=0;i<200;i++){
    scrollBy(0,-1);
  }
}
Chapitre les layers
Chapitre les événements html