ownerDocument
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.
offsetParent
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>
Dynamic Navigation Menus
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
Drop-Down Stickies
January 20, 2010
Attaching a drop-down sticky to a word or phrase in your document is an easy way to add valuable information close to the word, without obscuring it.
Code:
<?php
function start_link($text, $nextid)
{
$idtext = $nextid;
?>
<a href="javascript:void drop('<?=$idtext?>');">
<span id="a_<?=$idtext?>"><?=$text?></span>
</a>
<div id="<?=$idtext?>" class="drop" style="display:none">
<table cellspacing="0" cellpadding="0" width="170">
<tr>
<td valign="top" width="20">
<a href="javascript:void close(<?=$idtext?>)">
<img src="close.gif" border="0" />
</a>
</td>
<td valign="top" width="150">
<?php
}
//--------------------
function end_link()
{
?>
</td>
</tr>
</table>
</div>
<?php
}
//-----------------
function link_header()
{
?>
<style type="text/css">
.drop
{
padding:5px;
font-size:small;
background:#eeeeee;
border:1px solid black;
position:absolute;
}
</style>
<script type="text/javascript">
function drop(sid)
{
aobj = document.getElementById("a_" + sid);
divobj = document.getElementById(sid);
divobj.style.top = (aobj.offsetBottom + 10) + "px";
divobj.style.left = (aobj.offsetLeft + 10) + "px";
divobj.style.display = "block";
}
function close(sid)
{
divobj = document.getElementById(sid);
divobj.style.display = "none";
}
</script>
<?php
}
?>
<html>
<head>
<?php link_header(); ?>
</head>
<body>
Hello <?php start_link("my friend", 1); ?>
Jimmy <?php end_link(); ?> .How are you?
</body> </html>
Save this code as drop-down.php
Section Content with Spinners
January 8, 2010
This code shows how to create sections on your page with spinners that open and show section of the content interactively.
Code:
<?php
function start_section($id, $title)
{
?>
<table cellspacing="0" cellpadding="0">
<tr>
<td width="30" valign="top">
<a href="javascript:void twist('<?=$id?>');">
<img src="up.gif" border="0" id="img-<?=$id?>" />
</a>
</td>
<td width="90%">
<h1><?=$title?></h1>
<div style="display:none;position:absolute" id="<?=$id?>" class="content">
<?php
}
function end_section()
{
?>
</div>
</td>
</tr>
</table>
<?php
}
?>
<html>
<head>
<style type="text/css">
body{font-family:Verdana;}
h1{font-size:medium;border-bottom:1px solid black;}
.content{font-size:small; margin-left:10px; padding:10px;}
</style>
<script type="text/javascript">
function twist(sid)
{
imgobj = document.getElementById("img-" + sid);
divobj = document.getElementById(sid);
if(imgobj.src.match("up.gif"))
{
imgobj.src = "down.gif";
divobj.style.position = "relative";
divobj.style.display = "block";
}
else
{
imgobj.src = "up.gif";
divobj.style.display = "none";
divobj.style.position = "absolute";
}
}
</script>
</head>
<body>
<?php start_section("first", "section one"); ?>
first part first part first part first part first part.
first part first part first part first part first part.
<?php end_section(); ?>
<?php start_section("sec", "section two"); ?>
section two section two section two section two section two.
section two section two section two section two section two.
<?php end_section(); ?>
</body>
</html>
Save the as spinners.php
Move Images using Javascript
January 5, 2010
Next javascript code shows how you can move images around the page.
Compatibility: Mozilla, Opera, Chrome, Safari
Code:
var curElement;
function doMouseMove(e)
{
var newleft = 0, newTop = 0;
curElement.style.position = "absolute";
if((e.which == 1) && (curElement != null))
{
newleft = e.screenX - (curElement.offsetWidth/2);
curElement.style.left = newleft + "px";
newtop = e.screenY - (curElement.offsetHeight/2);
curElement.style.top = newtop + "px";
}
}
function doDragStart(e)
{
// Don't do default drag operation.
if ("IMG" == e.target.tagName)
{
e.returnValue = false;
}
}
function doMouseDown(e)
{
if ((e.which == 1) && (e.target.tagName == "IMG"))
{
curElement = e.target;
}
}
function dropElem()
{
curElement = null;
}
document.ondragstart = doDragStart;
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = dropElem;
To expirement with it create an HTML document and put the code in the head element, the body element must contains at least one img element, good luck.
offsetLeft - offsetTop Properties
December 13, 2009
Value: integer
Compatibility: WinIE4+, MacIE4+, Moz1+, Safari1+
The offsetTop and offsetLeft properties are valuable in providing pixel coordinates of an element within the positioning context of the parent element even when the elements are not positioned explicitly. The element used as a coordinate context for these properties is whatever element the offsetParent property returns. This means that to determine the precise position of any element you may have to add some code that iterates through the offsetParent hierarchy until that property returns null.
Note: The offsetLeft and offsetTop properties for positioned elements in MacIE do not return the same values as the style.left and style.top properties of the same element.
offsetHeight - offsetWidth Properties
December 9, 2009
Value: integer
Compatibility: WinIE4+, MacIE4+, Moz1+, Safari1+
These properties report the height and width of any element, for a normal block-level element whose height and width are not specified the offsetHeight is determined by the actual height of the content after all text flows. But the offsetWidth always extends the full width of the containing element. For example , a p element consisting of only a few words may report a offsetwidth of many of hundreds of pixels because the p block extends the full width of the body element that represents the containing parent of the p element. To find out the actual width of text within a full-width block-level element wrap the text within an inline element (span) and inspect the offsetWidth property of the span.
Related items: clientHeight, clientWidth properties.
Caching Output
December 7, 2009
High-traffic sites can often benefit from caching of pages, to save processing of the same data over and over again.
Put the first function cache_start in the beginning of php script and the second cache_end in the end of script.
Code:
function cache_start($_time, $dir)
{
$cachefile = $dir.'/'.sha1($_SERVER['REQUEST_URI']).'.html';
$cachetime = $_time;
ob_start();
if(file_exists($cachefile) && (time( )-$cachetime < filemtime($cachefile)))
{
include($cachefile);
ob_end_flush();
exit;
}
}
//——————————————–
function cache_end($dir)
{
$cachefile = $dir.'/'.sha1($_SERVER['REQUEST_URI']).'.html';
$fp = fopen($cachefile, 'w');
fwrite($fp, ob_get_contents());
fclose($fp);
ob_end_flush();
}
//————————————–
$_time : cache time
$dir : directory to cache files
Catching Keywords from Search Engines
December 2, 2009
With this class we try to catch some keywords from google, yahoo and bing search engines.
Code:
<?php class keywords { private $referer; private $_e; public $keywords; public function __construct() { if($_SERVER['HTTP_REFERER']) { if(preg_match("#\.google|search\.yahoo|\.bing#", $_SERVER['HTTP_REFERER'])) { $this->referer = urldecode($_SERVER['HTTP_REFERER']); } else { return; } } else { return; } } private function getSeparators() { $this->_e = (preg_match("#\?q=|\?p=#", $this->referer)) ? "\?" : "&"; } public function getKeywords() { if(!empty($this->referer)) { $this->getSeparators(); //google if(preg_match("#\.google#", $this->referer)) { $m_ = preg_match("#{$this->_e}q=(.+?)&#si", $this->referer, $this->keywords); if($m_ == 0) { return false; } } //yahoo elseif(preg_match("#search\.yahoo#", $this->referer)) { $m_ = preg_match("#{$this->_e}p=(.+?)\&#si", $this->referer, $this->keywords); if($m_ == 0) { return false; } } //bing elseif(preg_match("#\.bing#", $this->referer)) { $m_ = preg_match("#{$this->_e}q=(.+?)\&#si", $this->referer, $this->keywords); if($m_ == 0) { return false; } } else { return false; } return $this->keywords[1]; } else { return false; } } } ?>
Save this script as keywords_class.php
Now let’s try to print these keywords.
Code:
<?php require_once('keywords_class.php'); $keywordsObj = new keywords(); $keys = $keywordsObj->getKeywords(); if($keys) { print $keys; } else { print "ooops"; } ?>
Save this code as index.php
