Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Effets non-contextuels

  Rendre un élément immobile

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script  Compatibilite du script... a partir de : 

  Fonction
Le but de ce script est de placer un élément (image, tableau, texte...) sur la page, à un endroit précis, et de faire en sorte que si le visiteur fait défiler la page, l'élément reste au même endroit dans la fenêtre.
  Principe
Netscape et Internet Explorer ne gérant pas les calques (layers) de la même façon, on est obligé de doubler toutes les commandes.
  1. Internet Explorer :
    • le calque doit être déclaré par une balise '<div>',
    • ses caractéristiques doivent être indiquée dans l'attribut 'style',
    • pour le maintenir à la même place, on doit faire appel à la propriété 'pixelTop', et lui donner en permanence la valeur de 'body.scrollTop', à laquelle on ajoute la hauteur à laquelle on souhaite maintenir le calque.
  2. Netscape :
    • le calque doit être déclaré par une balise '<layer>',
    • ses caractéristiques doivent être indiquée directement,
    • pour le maintenir à la même place, on doit faire appel à la propriété 'top', et lui donner en permanence la valeur de 'page.YOffset', à laquelle on ajoute la hauteur à laquelle on souhaite maintenir le calque.
Pour les deux navigateurs, la déclaration du calque doit se faire au chargement de la page (pas dans une fonction), on doit ensuite lancer la fonction qui permet au calque de rester immobile.
Cette fonction se relance elle-même en permanence, pour pouvoir réajuster constament le placement du calque.
  Le script
dans la partie <head>
<script language="JavaScript">
// detection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// creation du calque pour Internet Explorer
if (ie4) {
document.write("<div id='flottant' style='position: absolute; top: 200px; left: 200px; z-index: 10;'><img src='images/0.gif'></div>");
}

// creation du calque pour Netscape
if (ns4) {
document.write("<layer top='200px' left='200px' name='flottant'><img src='images/0.gif'></layer>");
}

// lancement de la fonction d'immobilite
immobile();


function immobile() {

// maintient du calque pour Internet Explorer
if (ie4) {
flottant.style.pixelTop = document.body.scrollTop + 200;
}

// maintient du calque pour Netscape
if (ns4) {
document.flottant.top = window.pageYOffset + 200;
}
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.
    		•
    Script intégré :
    enc_immo.zip
    2 Ko    		 telechargez le script telechargez le script
    Script séparé :
    enc_immo2.zip
    2 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter