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(0, 4)=="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 3 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=0 CELLSPACING=0 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=0 CELLSPACING=0 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=4 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>
Related examples in the same category

1.	Layer 'srcFilter' Example
2.	Hide and show layer
3.	Layer Background Colors (W3C)
4.	Setting Layer Backgrounds (W3C)
5.	The layer while rolling over the link.
6.	Accessing Layers with JavaScript
7.	'layer' and 'ilayer' Tag Properties
8.	Detecting Navigator and Internet Explorer
9.	Adjusting Layer clip Properties (W3C)
10.	Comparison of Layer and Clip Location Properties (W3C)
11.	Testing Nested Layer Coordinate Systems (W3C)
12.	Nested Layer Visibility Relationships (W3C)
13.	Relationships Among zIndex Values (W3C)
14.	Dragging a Layer (W3C)
15.	Resizing a Layer (W3C)
16.	Methods and Properties of the Layer Object
17.	Layer seek
Monitors divisions (or layers) on dynamic Web pages (DHTML) : Layer « HTML « JavaScript DHTML

Related examples in the same category
