Detecting Navigator and Internet Explorer : Layer « HTML « JavaScript DHTML






Detecting Navigator and Internet Explorer


/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke 

ISBN: 067231763X
Publisher Sams CopyRight 2000

*/
<html>
<body>
   
<script language="JavaScript">
<!--
   
//Create a layer tag if netscape
if(navigator.appName.indexOf("Netscape") != -1)
  document.write('<layer id="redBox" ');
   
//Create a div tag if Microsoft

if(navigator.appName.indexOf("Microsoft") != -1)
  document.write("<div id='redBox' ");
   
//Set the style used for the red box
document.write('style="position:absolute; ');
document.write('left:150px; ');
document.write('top:150px; ');
document.write('background-color:red;">');
   
//-->
</script>
   
   
This is a block of moving buttons
<form>
<input type="button"
       value="UP"
       onClick="moveUp()">
<input type="button"
       value="DOWN"
       onCLick="moveDown()">
<input type="button"
       value="LEFT"
       onClick="moveLeft()">
<input type="button"
       value="RIGHT"
       onClick="moveRight()"><BR>
<input type="button"
       value="SHOW/HIDE Text Box"
       onClick="showHide()">
</form>
   
<script language="JavaScript">
<!--
//If Netscape close the layer tag
if(navigator.appName.indexOf("Netscape") != -1)
  document.write("</layer>");
   
//If Microsoft close div tag
if(navigator.appName.indexOf("Microsoft") != -1)
  document.write("</div>");
//-->

</script>
   
<script language="JavaScript">
<!--
//If Netscape create a text layer using layer tag
if(navigator.appName.indexOf("Netscape") != -1)
{
  document.write('<layer id="textBox" >');
  document.write("Here is some text defined as a block");
  document.write("</layer>");
}
   
//If Microsoft create a text block using div tag
if(navigator.appName.indexOf("Microsoft") != -1)
{
  document.write("</div>");
  document.write("<div id='textBox'>");
  document.write("Here is some text defined as a block");
  document.write("</div>");
}
//-->
</script>
   
   
<script language="JavaScript">
<!--
   
var isNetscape = 0;
var isMicrosoft = 0;
   
//Determine if this is a Netscape or Microsoft browser
if(navigator.appName.indexOf("Netscape") != -1)
  isNetscape = 1;
if(navigator.appName.indexOf("Microsoft") != -1)
  isMicrosoft = 1;
   
//Move the red box up 20 pixels
function moveUp()
{
  if(isNetscape)
    document.layers.redBox.pageY+=(-20);
  if(isMicrosoft)

    document.all.redBox.style.pixelTop+=(-20);
}
   
//Move the red box down 20 pixels
function moveDown()
{
  if(isNetscape)
    document.layers.redBox.pageY+=20;
  if(isMicrosoft)
    document.all.redBox.style.pixelTop+=20;
}
   
//Move the red box to the left 20 pixels
function moveLeft()
{
  if(isNetscape)
    document.layers.redBox.pageX+=(-20);
  if(isMicrosoft)
    document.all.redBox.style.pixelLeft+=(-20);
}
   
//Move the red box to the right 20 pixels.
function moveRight()
{
  if(isNetscape)
    document.layers.redBox.pageX+=20;
  if(isMicrosoft)
    document.all.redBox.style.pixelLeft+=20;
}
   
//Hide or show the text box
function showHide()
{
  if(isNetscape)
  {
    //If text box is currently hidden then make it visible
    if(document.layers.textBox.visibility == "hide")
      document.layers.textBox.visibility="inherit";
    else
      document.layers.textBox.visibility="hide";
  }
  if(isMicrosoft)
  {

    //If text box is currently hidden then make it visible
    if(document.all.textBox.style.visibility == "hidden")
      document.all.textBox.style.visibility="visible";
    else
      document.all.textBox.style.visibility="hidden";
  }
}
   
//-->
</script>
   
</body>
</html>

           
       








Related examples in the same category

1.Layer 'srcFilter' Example
2.Monitors divisions (or layers) on dynamic Web pages (DHTML)
3.Hide and show layer
4. Layer Background Colors (W3C)
5.Setting Layer Backgrounds (W3C)
6.The layer while rolling over the link.
7.Accessing Layers with JavaScript
8.'layer' and 'ilayer' Tag Properties
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