Archive for March, 2010

1

parentElement property

Posted by admin - March 28, 2010

Value: Element object reference or null

Compatibility: WinIE4+, MacIE4+, Moz-, Safari-

The parentElement property returns a reference to the next outermost HTML element from the current element. This parent-child relationship of elements is often, but not always, the same as parent-child node relationship. The difference is that the parentElement property deals only with HTML elements as reflected as document objects, whereas a node is not necessarily an HTML element (an attribute or text chunk).

There is also a distinction between parentElement and offsetParent properties. The latter returns an element that may be many generations removed from a given element but is the immediate parent with regard to positioning context. For example, a td element’s parentElement property is its enclosing tr element, but a td element’s offsetParent property is its table element.

Related Items: ossetParent, parentNode properties.

2

ownerDocument

Posted by admin - March 10, 2010

Value: Document object reference

Compatibility: WinIE6+, MacIE5+, Moz1+, Safari1+

The ownerDocument property belongs to any element or node in the W3C DOM. The property’s value is a reference to the document node that ultimately contains the element or node. If a script encounters a reference to an element or node, the object’s ownerDocument property provides a way to build references to other objects in the same document or to access properties and methods of the document objects.

Example:

document.body.childNodes[5].ownerDocument

The result is a reference to the document object. You can use that to inspect a property of the document,

document.body.childNodes[5].ownerDocument.URL

This returns the document.URL property for the document that owns the child node.

Related Item: document object.

0

offsetParent

Posted by admin - March 6, 2010

Value: Object reference

Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+

The offsetParent property returns a reference to the object that acts as a positioning context for the current element.Values for the offsetLeft and offsetTop are measured relative to the top-left corner of the offsetParent object.

The returned object is usually , but not always the next outermost block-level container. For most document elements the offsetParent object is the document.body object.

The property behaves predictably for positioned elements in most browsers.

Code:

<html>
 <head>
 <title>offsetParent Property</title>
 <script type="text/javascript">
 function setImagePosition()
 {
   var x = 0;
   var y = 0;
   var offsetPointer = document.getElementById("myCell");

   while(offsetPointer)
   {
     x += offsetPointer.offsetLeft;
     y += offsetPointer.offsetTop;
     offsetPointer = offsetPointer.offsetParent;
   }

   //correct for MacIE body margin factors
   if(navigator.userAgent.indexOf("Mac") != -1 &&
   typeof document.body.leftMargin != "undefined")
   {
     x += document.body.leftMargin;
     y += document.body.topMargin;
   }

   document.getElementById("myDiv").style.left = x + "px";
   document.getElementById("myDiv").style.top = y + "px";
   document.getElementById("myDiv").style.visibility = "visible";
 }       
 </script>
 </head>    
 <body onLoad="setImagePosition()">
 <h1>The offset property</h1>
 <p>After the document loads, the script positions a small image in the upper
 corner of the second table cell.</p>
 <table border="1" align="center">
 <tr>
 <td>First cell</td>
 <td id="myCell">Second cell</td>
 </tr>
 </table>
 <img src="image.png" id="myDiv" height="12" width="12"
 style="position:absolute;visibility:hidden;" />
 </body>
</html>
0

Dynamic Navigation Menus

Posted by admin - March 3, 2010

Next code demonstrates how to build a simple menu function with the current page high-lighted.

Code:

<?php
require_once('menu.php');
$page = isset($_GET['page']) ? $_GET['page'] : 'home';
?>
<html>
<head>
<title>Page - <?=$page?>
<style type="text/css">
.inactive, .active
{
 padding:2px 2px 2px 20px;
}

.inactive
{
 background:#ddd;
} 

.active
{
 background:black;
 font-weight:bold;
}

.inactive a
{
 text-decoration:none;
}

.active a
{
 text-decoration:none;
 color:white;
}
</style>
</title>
</head>
<body>
<table>
<tr>
<td width="200" valign="top">
<?php page_menu($page); ?>
</td>
<td width="600" valign="top">
Page: <?=$page?>
</td>
</tr>
</table>
</body>
</html>

Save this code as index.php

<?php
function menu_item($id, $title, $current)
{
  $class = ($current == $id) ? "active" : "inactive";
?>
  <tr><td class=<?=$class?>>
  <a href="index.php?page=<?=$id?>"><?=$title?></a>
  </td></tr>
<?php
}

function page_menu($page)
{
?>
  <table width="100%">
  <?php menu_item('home', 'Home', $page); ?>
  <?php menu_item('about', 'About', $page); ?>
  <?php menu_item('browse', 'Browse', $page); ?>
  <?php menu_item('download', 'Download', $page); ?>
</table>
<?php
}    
?>

Save this code as menu.php