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
nodeValue
November 30, 2009
Value: number, string, null
Compatibility: WinIE5+, MacIE5+, Moz1+, Safari1+
Of the node types implemented in the W3C DOM - capable browsers, only the text and attribute types have readable values. An element’s node value returns a null value. For an attribute node the nodeValue property consists of the value assigned to that attribute. As an example, nodeValue can be used to increase the width of a textarea object.
function increaseCols(elem)
{
var colWidth = parseInt(elem.attributes["cols"].nodeValue, 10);
elem.attributes["cols"].nodeValue = (colWidth * 1.1); }
As another example you can replace the text of an element:
function replace(elem, newtxt)
{
if(elem.childNodes.length == 1 && elem.firstChild.nodeType == 3)
{
elem.firstChild.nodeValue = newtxt;
}
}
The function makes one final verification that the element contains one child node and that it is a text type.
Related items: attributes, innerText, nodeType properties.
Drag - Drop Lists
November 28, 2009
This code uses an open source drag - drop library from Tool-Man to create drag-drop lists. Download and unpack the drag-drop libraries onto your server.
Code:
<html>
<head>
<title>Drag - Drop Lists</title>
<style>
#cities li {margin:0px;}
ul.box li {margin:3px;}
ul.sortable li {position:relative;}
ul.box
{
list-style-type:none;
padding:0px;
margin:2px;
width:20em;
font-size:13px;
font-family:"Times New Roman", Times, serif;
}
ul.box li
{
cursor:move;
padding:2px 2px;
border:1px solid #cccccc;
background:#eee;
}
.clickable a
{
display:block;
text-decoration:none;
cursor:pointer;
cursor:hand;
}
clickable li:hover
{
background:#f6f6f6;
}
</style>
<script type="text/javascript" src="source/org/tool-man/core.js"></script>
<script type="text/javascript" src="source/org/tool-man/events.js"></script>
<script type="text/javascript" src="source/org/tool-man/css.js"></script>
<script type="text/javascript" src="source/org/tool-man/drag.js"></script>
<script type="text/javascript" src="source/org/tool-man/coordinates.js"></script>
<script type="text/javascript" src="source/org/tool-man/dragsort.js"></script>
<script type="text/javascript" src="source/org/tool-man/cookies.js"></script>
<script type="text/javascript">
<!--
var dragsort = ToolMan.dragsort();
var junkdrawer = ToolMan.junkdrawer();
window.onLoad = function()
{
dragsort.makeListSortable(document.getElementById("cities"), verticalOnly, saveOrder);
}
function verticalOnly(item)
{
item.toolManDragGroup.verticalOnly();
}
function saveOrder(item) { }
function prepFields()
{
document.getElementById("cities_txt").value = junkdrawer.
serializeList(document.getElementById("cities"));
return true;
}
//-->
</script>
</head>
<body>
<ul id="cities" class="box">
<li>Paris</li>
<li>Rome</li>
<li>Athens</li>
</ul>
<form method="post" action="display.php">
<input type="hidden" name="cities" value="" id="cities_txt" />
<input type="submit" onclick="prepFields();" />
</form>
</body>
</html>
Save the code as dragdrop.html
The simple code below used to print out values from the list.
Code:
<html> <body> You chose: <?=$_POST['states']?> </body> </html>
Save the code as display.php.
nodeName Property
November 26, 2009
Value: string
Compatibility: WinIE5+, MacIE5+, Moz1+, Safari1+
For HTML and XML elements the name of a node is the same as the tag name. The value is an all-uppercase string of the tag name.
Some nodes such as the text content of an element do not have a tag, the nodeName property is a special value: #text.
The following example demonstrates one way to assing a new class name to every p element in an IE5+ document:
function setPClasses(className)
{
for(var i = 0; i < document.all.length; i++)
{
if(document.all[i].nodeName == "P")
{
document.all[i].className = "className";
}
}
}
Related item: tagName property
