Cross-Browser JavaScript

 <  Day Day Up  >  


Traditionally, browsers have differed significantly on how style sheets can be accessed and the degree to which they can be manipulated. For example, under Netscape 4 the only style sheet properties that can be changed after the document has loaded are the absolute positioning properties left , top, z-index , and visibility . Add the fact that the standard DOM access is totally different from the way that Microsoft or Netscape tend to reference things in their 4. x generation browsers and you'll soon come to know that writing cross-browser scripts can be a real chore. However, it is possible to come up with scripts that take everything into account. For example, the script that follows can move and change the visibility of objects in just about any 4. x generation browser and beyond:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Cross Browser Layer Visibility / Placement Routines  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--       #test { position:absolute;           top:20px;           left:300px;           background-color: yellow;          } -->  </style>   <script type="text/javascript">  <!--     /* test for objects */ (document.layers) ? layerobject=true : layerobject=false; (document.all) ? allobject = true: allobject = false; (document.getElementById) ? dom = true : dom = false;     function changeVisibility(id,action) {  switch (action) {   case "show":      if (layerobject)           document.layers[''+id+''].visibility = "show";        else if (allobject)            document.all[''+id+''].style.visibility = "visible";        else if (dom)             document.getElementById(''+id+'').style.visibility = "visible";       break;       case "hide":      if (layerobject)              document.layers[''+id+''].visibility = "hide";         else if (allobject)             document.all[''+id+''].style.visibility = "hidden";             else if (dom)             document.getElementById(''+id+'').style.visibility = "hidden";      break;   default:return;  }  return; } function changePosition(id,x,y) {   if (layerobject)    {     document.layers[''+id+''].left = x;     document.layers[''+id+''].top = y;    }   else if (allobject)       {          document.all[''+id+''].style.left=x;          document.all[''+id+''].style.top=y;        }   else if (dom)       {          document.getElementById(''+id+'').style.left=x+"px";          document.getElementById(''+id+'').style.top=y+"px";         }   return; } //-->  </script>   </head>   <body>   <div id="test">  This is a test division  </div>   <form action="#" name="testform" id="testform">   <input type="button" value="show" onclick="changeVisibility('test','show');" />   <input type="button" value="hide" onclick="changeVisibility('test','hide');" />   <br /><br />  X:  <input type="text" name="xcoord" id="xcoord" size="4" maxlength="4" value="100" />  Y:  <input type="text" name="ycoord" id="ycoord" size="4" maxlength="4" value="100" />   <input type="button" value="move" onclick="changePosition('test',document.testform.xcoord.value,document.testform. ycoord.value);" />   </form>   </body>   </html>  

Even with the standard DOM, the implementations vary, so developers often rely on cross-browser libraries such as CBE (www.cross-browser.com) and DomAPI (www.domapi.com) to address subtle differences in JavaScript object models.

Although this has been only a brief introduction to scripting and the ideas of the JavaScript and the DOM, it should reveal that to be a seasoned, competent client-side Web developer in the future, you will be required to know HTML/XHTML, CSS, and JavaScript in a very deep way. Readers are encouraged to learn these technologies in that order as they build one upon another.



 <  Day Day Up  >  


HTML & XHTML
HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)
ISBN: 007222942X
EAN: 2147483647
Year: 2003
Pages: 252
Authors: Thomas Powell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net