Monitors divisions (or layers) on dynamic Web pages (DHTML) : Layer : HTML JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » HTML » Layer »

 

Monitors divisions (or layers) on dynamic Web pages (DHTML)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

  <HEAD>
    <TITLE>JsLib 1.3 - Exemple - dyna.js</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <META NAME="Author" CONTENT="Etienne CHEVILLARD">
    <!-- dyna.js -->
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* dyna.js
 * Role : controle les divisions des pages Web dynamiques
 * Projet : JsLib
 * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
 * Version : 1.3
 * Creation : 07/07/2001
 * Mise a jour : 23/02/2005
 * Bogues connues : - Opera 5/6 ne gere pas la couleur de fond "transparent"
 *                  - Opera 5/6 ne gere pas la modification du contenu des divisions
 */

// --- Variables globales ---

// choix du DOM (Document Object Model)
var dyna_w3=0;  // DOM-1 du W3C : Mozilla, Netscape 6/7, IE 5/6, Opera 7, Safari
var dyna_ie=0;  // IE 4
var dyna_nn=0;  // Netscape Navigator 4
var dyna_op=0;  // Opera 4/5/6

// determine le DOM utilise par le navigateur
if (document.getElementById && document.getElementsByTagName)
  dyna_w3=1;
else if (document.all && navigator.userAgent.toLowerCase().indexOf('opera')!=-1)
  dyna_op=1;
else if (document.all)
  dyna_ie=1;
else if (document.layers)
  dyna_nn=1;

// recharge la page si redimensionnement de la fenetre sous Netscape 4 (bogue)
window.onresize=function () {
  if (dyna_nn) { history.go(0)}
}

// --- Fonctions ---

// parcoure les divisions du DOM Netscape 4 pour trouver celle souhaitee
function dyna_obtenirDivNN4(objet, nom) {
  var divs=objet.layers;
  var divTrouvee;
  for (var i=0; i<divs.length; i++) {
    if (divs[i].id==nom)
       divTrouvee=divs[i];
    else if (divs[i].layers.length > 0)
      var tmp=dyna_obtenirDivNN4(divs[i], nom);
    if (tmp)
      divTrouvee=tmp;
  }
  return divTrouvee;
// fin dyna_obtenirDivNN4(objet, nom)

// indique si le navigateur accepte le DHTML
function accepteDHTML() {
  return (dyna_w3 || dyna_ie || dyna_nn || dyna_op);
// fin accepteDHTML()

// rend invisible la division specifiee
function cacherDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (dyna_w3 || dyna_ie || dyna_op)
    ldiv.style.visibility="hidden";
  else if (dyna_nn)
    ldiv.visibility="hide";
  return true;
// fin cacherDivision(id)

// cree une nouvelle division et l'ajoute au DOM
// -- merci a Victor Lopes (victor3.lopes@voila.fr)
function creerDivision(id, x, y, largeur, hauteur) {
  if ((!id|| (id==""|| (obtenirDivision(id)))
    return false;
  if (isNaN(x))
    x=0;
  if (isNaN(y))
    y=0;
  if (isNaN(largeur|| (largeur<0))
    largeur=0;
  if (isNaN(hauteur|| (hauteur<0))
    hauteur=0;
  if (dyna_w3 && document.createElement) {
    var ndiv=document.createElement("DIV");
    ndiv.id=id;
    ndiv.style.position="absolute";
    ndiv.style.visibility="hidden";
    ndiv.style.left=x;
    ndiv.style.top=y;
    ndiv.style.width=largeur;
    ndiv.style.height=hauteur;
    ndiv.style.zIndex=0;
    document.body.appendChild(ndiv);
  else if (dyna_ie || dyna_op) {
    var html="<DIV ID='"+id;
    html+="' STYLE='position:absolute;visibility:hidden;left:"+x+"px;top:"+y;
    html+="px;width:"+largeur+"px;height:"+hauteur+"px;z-index:0;'></DIV>";
    document.body.insertAdjacentHTML("beforeEnd"html);
  else if (dyna_nn){
    document.layers[id]=new Layer(largeur);
    var ndiv=document.layers[id];
    ndiv.visibility="hide";
    ndiv.left=x;
    ndiv.top=y;
    ndiv.document.width=largeur;
    ndiv.document.height=hauteur;
    ndiv.clip.left=0;
    ndiv.clip.right=largeur;
    ndiv.clip.top=0;
    ndiv.clip.bottom=hauteur;
    ndiv.zIndex=0;
  }
  return true;
// fin creerDivision(id, x, y, largeur, hauteur)

// deplace la division specifiee du nombre de pixels specifie
function deplacerDivisionDe(id, px, py) {
  return (modifierPosGaucheDivision(id, parseInt(obtenirPosGaucheDivision(id)) + px)
    && modifierPosHautDivision(id, parseInt(obtenirPosHautDivision(id)) + py));
// fin deplacerDivisionDe(id, px, py)

// deplace la division specifiee vers les coordonnees specifiees
function deplacerDivisionVers(id, x, y) {
  return (modifierPosGaucheDivision(id, x)
    && modifierPosHautDivision(id, y));
// fin deplacerDivisionVers(id, x, y)

// modifie le code HTML contenu dans la division specifiee
function modifierCodeDivision(id, code) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (!code)
    code="";
  if (navigator.userAgent.toLowerCase().indexOf("mac")!=-1)
    code+="n";
  if (dyna_w3) {
    ldiv.innerHTML="";
    ldiv.innerHTML=code;
  else if (dyna_ie || dyna_op) {
    ldiv.innerHTML=code;
  else if (dyna_nn) {
    ldiv.document.open();
    ldiv.document.write(code);
    ldiv.document.close();
  }
  return true;
// fin modifierCodeDivision(id, code)

// modifie la couleur de fond de la division specifiee
function modifierCouleurFondDivision(id, couleur) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if ((!couleur|| (couleur==""))
    couleur="transparent";
  if (dyna_op)
    ldiv.style.background=couleur;
  else if (dyna_w3 || dyna_ie)
    ldiv.style.backgroundColor=couleur;
  else if (dyna_nn) {
    if (couleur.toLowerCase()=="transparent")
      ldiv.bgColor=null;
    else
      ldiv.bgColor=couleur;
  }
  return true;
// fin modifierCouleurFondDivision(id, couleur)

// modifie les dimensions de la division specifiee
function modifierDimensionsDivision(id, largeur, hauteur) {
  return (modifierLargeurDivision(id, largeur)
    && modifierHauteurDivision(id, hauteur));
// fin modifierDimensionsDivision(id, largeur, hauteur)

// modifie la hauteur de la division specifiee
function modifierHauteurDivision(id, hauteur) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (isNaN(hauteur|| (hauteur<0))
    hauteur=0;
  if (dyna_w3)
    ldiv.style.height=hauteur;
  else if (dyna_ie || dyna_op)
    ldiv.style.pixelHeight=hauteur;
  else if (dyna_nn) {
    ldiv.document.height=hauteur;
    ldiv.clip.top=0;
    ldiv.clip.bottom=hauteur;
  }
  return true;
// fin modifierHauteurDivision(id, hauteur)

// modifie l'image de fond de la division specifiee
function modifierImageFondDivision(id, image) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (dyna_w3 || dyna_ie || dyna_op) {
    if ((!image|| (image==""))
      ldiv.style.backgroundImage="url(null)";
    else
      ldiv.style.backgroundImage="url("+image+")";
  else if (dyna_nn) {
    ldiv.background.src=image;
  }
  return true;
// fin modifierImageFondDivision(id, image)

// modifie la largeur de la division specifiee
function modifierLargeurDivision(id, largeur) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (isNaN(largeur|| (largeur<0))
    largeur=0;
  if (dyna_w3)
    ldiv.style.width=largeur;
  else if (dyna_ie || dyna_op)
    ldiv.style.pixelWidth=largeur;
  else if (dyna_nn) {
    ldiv.document.width=largeur;
    ldiv.clip.left=0;
    ldiv.clip.right=largeur;
  }
  return true;
// fin modifierLargeurDivision(id, largeur)

// modifie la position horizontale de la division specifiee
function modifierPosGaucheDivision(id, x) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (isNaN(x))
    x=0;
  if (dyna_w3)
    ldiv.style.left=x;
  else if (dyna_ie || dyna_op)
    ldiv.style.pixelLeft=x;
  else if (dyna_nn)
    ldiv.left=x;
  return true;
// fin modifierPosGaucheDivision(id, x)

// modifie la position verticale de la division specifiee
function modifierPosHautDivision(id, y) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (isNaN(y))
    y=0;
  if (dyna_w3)
    ldiv.style.top=y;
  else if (dyna_ie || dyna_op)
    ldiv.style.pixelTop=y;
  else if (dyna_nn)
    ldiv.top=y;
  return true;
// fin modifierPosHautDivision(id, y)

// modifie l'index de superposition de la division specifiee
function modifierZIndexDivision(id, z) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if ((isNaN(z)) || (parseInt(z)<0))
    z=0;
  if (dyna_w3 || dyna_ie || dyna_op)
    ldiv.style.zIndex=z;
  else if (dyna_nn)
    ldiv.zIndex=z;
  return true;
// fin modifierZIndexDivision(id, z)

// rend visible la division specifiee
function montrerDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return false;
  if (dyna_w3 || dyna_ie || dyna_op)
    ldiv.style.visibility="visible";
  else if (dyna_nn)
    ldiv.visibility="show";
  return true;
// fin montrerDivision(id)

// retourne la couleur de fond de la division specifiee
function obtenirCouleurFondDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return "";
  if (dyna_op)
    return ldiv.style.background;
  else if (dyna_w3 || dyna_ie)
    return ldiv.style.backgroundColor;
  else if (dyna_nn)
    return ldiv.bgColor;
// fin obtenirCouleurFondDivision(id)

// retourne une reference sur la division d'identifiant specifie
function obtenirDivision(id) {
  if (dyna_w3)
    return document.getElementById(id);
  else if (dyna_ie || dyna_op)
    return document.all[id];
  else if (dyna_nn)
    return dyna_obtenirDivNN4(document, id);
  return "";
// fin obtenirDivision(id)

// retourne la hauteur de la division specifiee
// -- merci a Victor Lopes (victor3.lopes@voila.fr)
function obtenirHauteurDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3) {
    var re = /D/g;
    return parseInt((ldiv.style.height).replace(re, ''));
  else if (dyna_ie || dyna_op)
    return parseInt(ldiv.style.pixelHeight);
  else if (dyna_nn)
    return parseInt(ldiv.clip.bottom);
// fin obtenirHauteurDivision(id)

// retourne la hauteur de la zone de navigation
function obtenirHauteurZone() {
  if (self.innerHeight)
    return parseInt(self.innerHeight);
  else if (document.documentElement && document.documentElement.clientHeight)
    return parseInt(document.documentElement.clientHeight);
  else if (document.body)
    return parseInt(document.body.clientHeight);
  return 0;
// fin obtenirHauteurZone()

// retourne l'URL de l'image de fond de la division specifiee
function obtenirImageFondDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return "";
  var img="";
  if (dyna_w3 || dyna_ie || dyna_op)
    img=ldiv.style.backgroundImage;
  else if (dyna_nn)
    img=ldiv.background.src;
  if (img.substring(04)=="url(")
    img=img.substring(4, img.length-1);
  return img;
// fin obtenirImageFondDivision(id)

// retourne la largeur de la division specifiee
// -- merci a Victor Lopes (victor3.lopes@voila.fr)
function obtenirLargeurDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3) {
    var re = /D/g;
    return parseInt((ldiv.style.width).replace(re, ''));
  else if (dyna_ie || dyna_op)
    return parseInt(ldiv.style.pixelWidth);
  else if (dyna_nn)
    return parseInt(ldiv.clip.right);
// fin obtenirLargeurDivision(id)

// retourne la largeur de la zone de navigation
function obtenirLargeurZone() {
  if (self.innerWidth)
    return parseInt(self.innerWidth);
  else if (document.documentElement && document.documentElement.clientWidth)
    return parseInt(document.documentElement.clientWidth);
  else if (document.body)
    return parseInt(document.body.clientWidth);
  return 0;
// fin obtenirLargeurZone()

// retourne la position horizontale de la division specifiee
function obtenirPosGaucheDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3) {
    var re = /D/g;
    return parseInt((ldiv.style.left).replace(re, ''));
  else if (dyna_ie || dyna_op)
    return parseInt(ldiv.style.pixelLeft);
  else if (dyna_nn)
    return parseInt(ldiv.left);
  return 0;
// fin obtenirPosGaucheDivision(id)

// retourne la position verticale de la division specifiee
function obtenirPosHautDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3) {
    var re = /D/g;
    return parseInt((ldiv.style.top).replace(re, ''));
  else if (dyna_ie || dyna_op)
    return parseInt(ldiv.style.pixelTop);
  else if (dyna_nn)
    return parseInt(ldiv.top);
// fin obtenirPosHautDivision(id)

// retourne l'index de superposition de la division specifiee
function obtenirZIndexDivision(id) {
  var ldiv=obtenirDivision(id);
  if (!ldiv)
    return 0;
  if (dyna_w3 || dyna_ie || dyna_op)
    return parseInt(ldiv.style.zIndex);
  else if (dyna_nn)
    return parseInt(ldiv.zIndex);
// fin obtenirZIndexDivision(id)

    </SCRIPT>
  </HEAD>

  <BODY onLoad="majFormulaire()">
    <H1>JsLib 1.3</H1>
    <HR>
    <H2>Exemple - dyna.js</H2>

    <NOSCRIPT>
      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>

    <P>Est-ce que votre navigateur prend en charge le DHTML ?
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        if (accepteDHTML()) document.write("oui");
        else document.write("non");
      </SCRIPT>

    <P>Largeur de la zone de navigation (en pixels:
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(obtenirLargeurZone());</SCRIPT>
    <BR>Hauteur de la zone de navigation (en pixels:
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">document.write(obtenirHauteurZone());</SCRIPT>

    <P>Divisions :
    <DIV ID="d1" STYLE="position:absolute;left:200px;top:240px;width:80px;height:60px;background:url('./extra/fond.gif');z-index:1;visibility:visible;">
      Division 1
    </DIV>
    <DIV ID="d2" STYLE="position:absolute;left:300px;top:240px;width:180px;height:80px;background-color:cyan;z-index:2;visibility:visible;">
      Division 2
      <DIV ID="d3" STYLE="position:absolute;left:20px;top:20px;width:140px;height:40px;background-color:violet;z-index:3;visibility:visible;">
        Division imbriqu&eacute;e dans division 2
      </DIV>
    </DIV>

    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
      var chx;
      function majFormulaire() {
        chx=document.f1.l1.options[document.f1.l1.selectedIndex].value;
        document.f1.t1.value = obtenirZIndexDivision(chx);
        document.f1.t2.value = obtenirPosGaucheDivision(chx);
        document.f1.t3.value = obtenirPosHautDivision(chx);
        document.f1.t4.value = obtenirLargeurDivision(chx);
        document.f1.t5.value = obtenirHauteurDivision(chx);
        document.f1.t6.value = obtenirCouleurFondDivision(chx);
         document.f1.t7.value = obtenirImageFondDivision(chx);
        return true;
      }
    </SCRIPT>
    
    <FORM ACTION="GET" NAME="f1">
    
      <INPUT NAME="b1" TYPE="button" VALUE="Creer Division 4"
        onClick="creerDivision('d4','500','240','150','150');
        modifierCodeDivision('d4','Division 4');
        document.f1.l1.selectedIndex=3;
        majFormulaire();
        document.f1.b1.disabled=true;">

      <P>&nbsp;    
      <P>&nbsp;
    
      <P><B>Op&eacute;rations sur la division
        <SELECT NAME="l1" SIZE="1" onChange="return majFormulaire()">
          <OPTION VALUE="d1" SELECTED>1</OPTION>
          <OPTION VALUE="d2">2</OPTION>
          <OPTION VALUE="d3">3</OPTION>
          <OPTION VALUE="d4">4</OPTION>
        </SELECT>
      :</B>
      
      <P>Visibilit&eacute; :&nbsp;
      <INPUT TYPE="button" VALUE="Montrer" onClick="montrerDivision(chx)">
      <INPUT TYPE="button" VALUE="Cacher" onClick="cacherDivision(chx)">

      <P>Index de superposition (Z-index:&nbsp;
      <INPUT TYPE="text" NAME="t1" SIZE=5>
      <INPUT TYPE="button" VALUE="Modifier" onClick="modifierZIndexDivision(chx, parseInt(document.f1.t1.value))">

      <TABLE SUMMARY="table1" BORDER=CELLSPACING=CELLPADDING=0><TR><TD>
        <P>Position horizontale (en pixels:&nbsp;
        X = <INPUT TYPE="text" NAME="t2" SIZE=5>
        <INPUT TYPE="button" VALUE="D&eacute;placer" onClick="modifierPosGaucheDivision(chx, parseInt(document.f1.t2.value))">
         <P>Position verticale (en pixels:&nbsp;
        Y = <INPUT TYPE="text" NAME="t3" SIZE=5>
        <INPUT TYPE="button" VALUE="D&eacute;placer" onClick="modifierPosHautDivision(chx, parseInt(document.f1.t3.value))">
      </TD><TD>
        <TABLE SUMMARY="table" BORDER=CELLSPACING=CELLPADDING=5><TR><TD>
        &nbsp;&nbsp;&nbsp;Position (incr&eacute;ment de 10 pixels:&nbsp;
        </TD><TD ALIGN=CENTER>
          &nbsp;&nbsp;&nbsp;<INPUT TYPE="button" VALUE="Haut" onClick="deplacerDivisionDe(chx, 0, -10); majFormulaire()"><BR>
          <INPUT TYPE="button" VALUE="Gauche" onClick="deplacerDivisionDe(chx, -10, 0); majFormulaire()">
          <INPUT TYPE="button" VALUE="Bas" onClick="deplacerDivisionDe(chx, 0, 10); majFormulaire()">
          <INPUT TYPE="button" VALUE="Droite" onClick="deplacerDivisionDe(chx, 10, 0); majFormulaire()">
        </TD></TR></TABLE>
      </TD></TR></TABLE>
        
      <P>Largeur (en pixels:&nbsp;
      Largeur = <INPUT TYPE="text" NAME="t4" SIZE=10>
      <INPUT TYPE="button" VALUE="Redimensionner" onClick="modifierLargeurDivision(chx, parseInt(document.f1.t4.value))">

      <P>Hauteur (en pixels:&nbsp;
      Hauteur = <INPUT TYPE="text" NAME="t5" SIZE=10>
      <INPUT TYPE="button" VALUE="Redimensionner" onClick="modifierHauteurDivision(chx, parseInt(document.f1.t5.value))">

      <P>Couleur de fond (code RGB ou nom HTML:&nbsp;
      <INPUT TYPE="text" NAME="t6" SIZE=10>
      <INPUT TYPE="button" VALUE="Changer la couleur" onClick="modifierCouleurFondDivision(chx, document.f1.t6.value)">
      <INPUT TYPE="button" VALUE="Transparent" onClick="modifierCouleurFondDivision(chx, 'transparent'); majFormulaire()">

      <P>Image de fond (URL:&nbsp;
      <INPUT TYPE="text" NAME="t7" SIZE=40>
      <INPUT TYPE="button" VALUE="Changer l'image" onClick="modifierImageFondDivision(chx, document.f1.t7.value)">
      <INPUT TYPE="button" VALUE="Aucune image" onClick="modifierImageFondDivision(chx, null); majFormulaire()">

      <P>Contenu (code HTML:<BR>
      <TEXTAREA NAME="ta1" ROWS=COLS=50>&lt;B&gt;Texte en gras&lt;/B&gt;</TEXTAREA>
      <INPUT TYPE="button" VALUE="Modifier le contenu" onClick="modifierCodeDivision(chx, document.f1.ta1.value)">
      
    </FORM>

  </BODY>
</HTML>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo HTML
» Layer