Le but de ce script est de placer un élément (image, tableau, texte...) systématiquement en bas à droite de la
fenêtre du navigateur, quelque soit sa taille, sa résolution ou la quantité de contenu de la page affichée.
Principe
Internet Explorer, Netscape 4.x et 6.x fonctionnant différemment pour la manipulation des calques, on commence par détecter le
navigateur, puis, vu qu'on veut placer notre élément fixe en rapport avec la largeur et la hauteur de la fenêtre du navigateur, on va détecter ces
deux valeurs (instructions toujours différentes entre Internet Explorer et netscape).
Une fois ces deux informations connues, on place le calque contenant l'élément à rendre fixe à la largeur de la fenêtre moins sa propre largeur,
de même pour la hauteur.
Les navigateurs fournissant des tailles de fenêtre légèrement fausse, on corrige ces erreurs en ajoutant ou retirant un peu de pixels.
On utilise ensuite une fonction qui va se relancer elle-même en permanences analysant la position du document affiché par rappor à la fenêtre (en gros
qui analyse le défilement de la page). Ce défilement va être 'corrigé' pour replacer l'élément toujours au même endroit
visuellement parlant.
On n'oubliera pas de lancer la fonction au chargement de la page et de placer le script non pas dans la partie <head> mais dans la partie
<body> pour que le navigateur puisse manipuler le calque en le connaissant (parce qu"'il est déclaré avant) le script.
// Taille de l'image (l = largeur, h = hauteur)
var l = 39;
var h = 38;
// Création d'une variable pour manipuler le calque contenant l'image
var calque;
// Instructions pour Netscape 6
if (nc6) {
// Attribution du nom du calque à la variable calque = eval('document.getElementById("retour").style');
// Détermination des hauteurs et largeurs disponible dans le navigateur // Les valeurs otées correspondent à la place de l'ascenceur et à un décallage de calcul des navigateurs hauteur = window.innerHeight - h; largeur = window.innerWidth - 15; }
// Instructions équivalentes pour Internet Explorer
if (ie4) { calque = retour.style; hauteur = document.body.clientHeight - 3 - h; largeur = document.body.clientWidth; }
// Positionnement du calque à droite de la fenêtre
calque.left = largeur - l;
// Fonction de replacement du calque
function immobile() {
// maintient du calque pour Internet Explorer if (ie4) { calque.pixelTop = document.body.scrollTop + hauteur; }
// maintient du calque pour Netscape 4 et 6 if (nc4 || nc6) { calque.top = window.pageYOffset + hauteur; }
// Relance de la fonction en permanence pour actualiser le placement setTimeout("immobile()",0); } </script>
Démonstration
Bah elle est un peu partout sur cette page non ?
Téléchargement
Ce script est disponible en deux versions :
le script est intégré à la page où il agit,
le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).
L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages
html.
Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre
utilisation.
Placer un élément en bas à droite de la fenêtre
