Archive for October, 2009
clientWidth and clientHeight Properties
Value: integer
Compatibility: WinIE4+, MacIE4+, NN7, Moz1+, Safari1+
These two properties by and large reveal the pixel height and width of the content within an element whose stylesheet rule includes height and width settings. In theory , these measures do not take into account any margins, borders or padding that you add to an element by way of stylesheets. In practice different combinations of borders , margins and padding influence these values in unexpected ways.
For the document.body object the clientwidth and clientheight properties return the inside width and height of the window or frame.
Code:
<html>
<head>
<title>clientWidth and clientHeight properties</title>
<script type="text/javascript">
function displayLogo()
{
var pWidth = document.getElementById("mydiv").clientWidth;
var pHeight = document.getElementById("mydiv").clientHeight;
//correct for Windows/Mac discrepancies
var pTop = (document.getElementById("mydiv").clientTop) ?
document.getElementById("mydiv").clientTop :
document.getElementById("mydiv").offsetTop;
var logoWidth = document.getElementById("logo").style.pixelWidth;
//center logo horizontally against paragraph
document.getElementById("logo").style.pixelLeft = (pWidth - logoWidth) / 2;
//position image immediately below end of paragraph
document.getElementById("logo").style.pixelTop = pTop + pHeight;
document.getElementById("logo").style.visibility = "visible";
}
</script>
</head>
<body>
<button onClick="displayLogo()">Position and show logo art</button>
<div id="logo" style="position:absolute;width:120px;visibility:hidden">
<img src="logo.gif" />
</div>
<div id="mydiv" style="width:200px;">
<p>From the valley of the shadows
Into the darkness beyond
Feel the calling of pleasures
Overshadow man's emptiness
My guiltiness bleeds internally
Inside tunnels of blocked emotions
The silent screams within my inner being
Bursting forth in desperation</p>
</div>
</body>
</html>
To assist in the vertical positioning of the logo, the offsetTop property of the div object provides the position of the start of the div with respect to its outer container (body).
Size Image Tags
All of the modern browsers start showing web pages as quickly as possible. This means browsers will start showing a page well before any images or other accompanying resources are downloaded. Because the browser hasn’t downloaded the image before rendering the page, it doesn’t know how big the image should be, unless you specify height and width attributes on the img tag.
If you don’t specify the width and height of images ,though, the page will jerk around as it’s being downloaded. The browser will guess at the size of the image but then find out after the image is downloaded that the actual size is much larger. Thus the browser will need to lay out the page again to adjust for the new size.
Code:
<html> <head> <title>Image Size</title> <?php function getImageSize($image) { list($width, $height) = getimagesize($image); print "<img src=\"$image\" width=\"$width\" height=\"$height\" />"; } ?> </head> <body> <?php getImageSize("your_image.png"); ?> </body> </html>
You can use this function anywhere you would have put an img tag previously, don’t use this function in static headers or footers where the size of the images will never change.
The className Property
A class name is an identifier that is assigned to the class attribute of an element. To associate a CSS rule with several elements in a document assing the same identifier to the class attributes of those elements, and use that identifier as the CSS rule’s selector. An element’s className property enables the application of different CSS rules to that element under script control.
Code:
<html>
<head>
<title>The className property</title>
<style type="text/css">
.newstyle{font-size:16pt;color:red}
</style>
<script type="text/javascript">
function toggleStyle(ID)
{
var elem = (document.all) ? document.all(ID) : document.getElementById(ID);
if(elem.className == "")
{
elem.className = "newstyle";
}
else
{
elem.className = "";
}
}
</script>
</head>
<body>
<form>
<input type="button" value="toogle" onClick="toggleStyle('article1')" />
</form>
<h1>Article 1</h1>
<p id="article1">Greece Hellas, officially known as the "Hellenic Republic" is the southeastern most country in Europe, occupying the southernmost part of the Balkan Peninsula.
It is bordered by Albania, X-Yugoslavia (the Republic of Skopje) and Bulgaria from the north, and the European part of Turkey from the northeast.
From the east by the Aegean Sea, from the south by the Mediterranean Sea, and from the west the Ionian Sea, including more than 400 islands,
which occupy more than one fifth of its total land territory the total area of the country is 131,957 square kilometers (50,949 square miles).</p>
<h1>Article 2</h1>
<p>The mainland portion of Greece comprises the regions of Thraki and Macedonia in the north;
Epirus, Thessaly, and Central Greece in the central section; and in the south Peloponnisos, a peninsula which is connected to the rest of the mainland by the Isthmus of Corinth.
The remainder of Greece consists of more than 400 islands, (only 149 are inhabited.)
These are Evia, Crete, or Kriti, the Northern Sporades, the Cyclades, the Dodecanisa, Chios, Limnos,
Lesvos, Samos, Samothraki, and Thassos, all of which are spread out in the Aegean Sea. In the west,
the Ionian Sea, is where the Eptanisa are found, a group of seven inhabited major islands and three small uninhabited ones.</p>
</body>
</html>
Save this code as class_name.html
Build Lightweight HTML Graphs
For simple bar graphs, you don’t need fancy images or flash movies, you can use this simple code to create bar graphs with HTML tables and PHP.
Code:
<html>
<head>
<title>HTML Graphs</title>
</head>
<?php
$data = array(
array('movies', 10),
array('music', 20),
array('games', 80),
array('series', 40)
);
$max = 0;
foreach($data as $dt)
{
$max += $dt[1];
}
?>
<body>
<table width="400" cellspacing="0" cellpadding="2">
<?php
foreach($data as $dt)
{
$percent = ($dt[1]/$max)*100;
?>
<tr>
<td width="20%"><?=$dt[0]?></td>
<td width="10%"><?=$dt[1]?>%</td>
<td>
<table width="<?=$percent?>%" bgcolor="#666666">
<tr><td> </td></tr>
</table>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>
Photo:
Save the code as html_graphs.php
Colored bar graphs
If you want to add some color to the data use the next code.
Code:
<html>
<head>
<title>HTML Graphs</title>
</head>
<?php
$data = array(
array('movies', 10, '#ff0000'),
array('music', 20, '#ff9900'),
array('games', 80, '#006600'),
array('series', 40, '#000000')
);
$max = 0;
foreach($data as $dt)
{
$max += $dt[1];
}
?>
<body>
<table width="400" cellspacing="0" cellpadding="2">
<?php
foreach($data as $dt)
{
$percent = ($dt[1]/$max)*100;
?>
<tr>
<td width="20%"><?=$dt[0]?></td>
<td width="10%"><?=$dt[1]?>%</td>
<td>
<table width="<?=$percent?>%" bgcolor="<?=$dt[2]?>">
<tr><td> </td></tr>
</table>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>
Photo:
Save the code as html_colored_graphs.php
Collecting Child Nodes
The childNodes property consists of an array of node objects contained by the current object.Note that child nodes consistof both elements objects and text nodes.Therefore ,depending on the containt of the current object, the number of childNodes and children collections may differ.
Caution: if you use the childNodes array in a for loop that iterates through a sequence of HTML or XML elements, watch out for the possibility that the browser treats source code whitespace as text nodes.
The code below contains an example of how you might code a function that “walks” the child nodes of a given node.
Code:
function walkChildNodes(objRef, n)
{
var obj;
if(objRef)
{
if(typeof objRef == "string")
{
obj = document.getElementById(objRef);
}
else
{
obj = objRef;
}
}
else
{
obj = (document.body.parentElement) ? document.body.parentElement : document.body.parentNode;
}
var output = ""; var indent = ""; var i, group, txt;
if(n)
{
for(i=0;i<n;i++)
{
indent += "+---";
}
}
else
{
n = 0;
output += "Child Nodes of " + obj.tagName;
output += "\n================\n";
}
group = obj.childNodes;
for(i=0;i<group.length;i++)
{
output += indent;
switch(group[i].nodeType)
{
case 1:
output += group[i].tagName;
output += (group[i].id) ? " ID=" + group[i].id : "";
output += (group[i].name) ? " NAME=" + group[i].name : "";
output += "\n";
break;
case 3:
txt = group[i].nodeValue.substr(0,15);
output += "[Text:" + txt.replace(/[\r\n]/g, "<cr>");
if(group[i].nodeValue.length > 15)
{
output += "...";
}
output += "]\n";
break;
case 8:
output += "[!COMMENT!]\n";
break;
default:
output += "[Node Type:" + group[i].nodeType + "]\n";
break;
}
if(group[i].childNodes.length > 0)
{
output += walkChildNodes(group[i], n+1);
}
}
return output;
}
Related items: nodeName, nodeType, nodeValue, parentNode properties.
cloneNode( ), hasChildNodes( ), removeNode( ), replaceNode( ), swapNode( ) methods.
Deep Blue 01 - Wordpress Theme
Photo:
Features:
- Valid HTML
- Valid CSS
- Two widget areas
- Gravatars
- Advertise banners 300×250px , 125×125px
Note: this is a free wordpress theme so i don’t have any demands, but if you want to reward the creator just let the link in the footer.
Controlling the accessKey Property
For many elements ,you can specify a keybord character that, when typed as an Alt+key combination (windows) or Ctrl+key (mac) brings focus to that element.
The example below shows how to use the accessKey property to manipulate the keyboard interface for navigating a web page.When you load the script abjust the height of the browser window so that you can see nothing below the second dividing rule.Enter any character into the settings portion of the page and press Enter.Then hold down the Alt (windows) or Ctrl (mac) key while pressing the same keybord key.
Code:
<html>
<head>
<title>accessKey Property</title>
<script type="text/javascript">
function assignKey(type, elem)
{
if(window.event.keyCode == 13)
{
switch(type)
{
case "button":
document.forms["output"].access1.accessKey = elem.value;
break;
case "text":
document.forms["output"].access2.accessKey = elem.value;
break;
case "table":
document.getElementById("myTable").accessKey = elem.value;
}
return false;
}
}
</script>
</head>
<body>
<h1>
accessKey property lab</h1>
<hr />
Settings:<br />
<form name="input">
Assign an accessKey value to the button below and press return:
<input type="text" size="2" maxlength="1" onkeypress="assignKey('button', this)" /><br />
Assign an accessKey value to the text box below and press return:
<input type="text" size="2" maxlength="1" onkeypress="assignKey('text', this)" /><br />
Assign an accessKey value to the table below (IE5.5+) and press return:
<input type="text" size="2" maxlength="1" onkeypress="assignKey('table', this)" /><br />
</form>
<br />
Then press Alt (windows) or control (mac) + the key.<br />
<i>Size the browser window to view nothing lower than this line.</i>
<form name="output" onsubmit="return false">
<input type="button" name="access1" value="Standar Button" />
<input type="text" name="access2" />
</form>
<table>
<tr>
<th>Quantity</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<tbody bgcolor="red">
<td width="100">4</td>
<td>primary widget</td>
<td>15</td>
</tr>
<tr>
<td>10</td>
<td>secondary widget</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
Adding-Replacing DOM Content
You can perform text changes either via the replaceChild( ) method or by assigning new text to a text node’s nodeValue property.The second way is a simpler approach for replacing text nodes.All it requires is a reference to the text node being replaced. You can assign that node’s nodeValue property its new string value:
document.getElementById(”parag2″).childNodes[0].nodeValue = “first”;
Code:
<html>
<head>
<title>Adding-replacing dom content</title>
<script type="text/javascript">
function modify()
{
var newElem = document.createElement("p");
newElem.id = "newP";
var newText = document.createTextNode("This is the second paragraph.");
newElem.appendChild(newText);
document.body.appendChild(newElem);
document.getElementById("parag2").childNodes[0].nodeValue = "first";
}
</script>
</head>
<body>
<button onclick="modify()">Add-Replace text</button>
<p id="parag1">This is the <span id="parag2">one</span> paragraph on the page.</p> </body> </html>
When an element’s content is entirely text this is the most streamlined way to swap text on the fly using the W3C DOM syntax.
Formatting Control with XSL
Amazon provides an interesting service to its corporate customers.The customer can skin an Amazon page by providing an XSL stylesheet that formats the XML data about the products,prices and related data.This means that if you are a corporate customer, you can add your own links and graphs and even customize the look of Amazon.com.
The scripts below do the same with PHP’s XSL engine.The processor takes two inputs, the input.xml file contains the data for the page, and the format.xsl file contains the formatting for the page.
Output from XML and XSL:
<?php
$xml = new DOMDocument();
$xml->Load("input.xml");
$xsl = new DOMDocument();
$xsl->Load("format.xsl");
$xslproc = new XSLTProcessor();
$xslproc->importStylesheet($xsl);
print $xslproc->transformToXML($xml);
?>
Save the code as output.php.
XML file:
<?xml version="1.0" encoding="UTF-8"?> <books> <book name="book1" /> <book name="book2" /> <book name="book3" /> </books>
Save the code as input.xml.
XSL to handle formatting:
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" /> <xsl:template match="/"> <html> <body> <xsl:for-each select="/books/book"> <xsl:value-of select="@name" /> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
Save the code as format.xsl.
Execute output.php from the command line:
% php output.php
Add tabs to your interface
An easy way to break up a site is to display it using tabs, where the data is broken into subelements each correlating to a named tab.
Code:
<?php require_once('tabs.php'); ?> <html> <head> <style type="text/css"> .tab { border-bottom:1px solid black; text-align:center; } .tab-active { border-left:1px solid black; border-top:1px solid black; border-right:1px solid black; text-align:center; font-weight:bold; } .tab-content { padding:5px; border-left:1px solid black; border-bottom:1px solid black; border-right:1px solid black; } </style> <title>Tabs</title> </head> <body> <div style="width:600px;"> <?php tabs_start(); ?> <?php tab('tab one'); ?> The first tab. <?php tab('tab two'); ?> The second tab. <?php tabs_end(); ?> </div> </body> </html>
Save the code as index.php.
Code:
<?php
$tabs = array();
function tabs_start()
{
ob_start();
}
function endtab()
{
global $tabs;
$text = ob_get_clean(); $tabs[count($tabs) - 1]['text'] = $text;
ob_start(); }
function tab($title)
{
global $tabs;
if(count($tabs) > 0)
{
endtab();
}
$tabs[] = array('title' => $title, 'text'=> '');
}
function tabs_end()
{
global $tabs;
endtab(); ob_end_clean();
$index = 0;
if($_GET['tabindex'])
{
$index = $_GET['tabindex'];
}
?> <table width="100%" cellspacing="0" cellpadding="0"> <tr> <?php $baseuri = $_SERVER['REQUEST_URI']; $baseuri = preg_replace("/\?.*$/", "", $baseuri);
$curindex = 0;
foreach($tabs as $tab)
{
$class = "tab";
if($index == $curindex)
{
$class = "tab-active";
}
?> <td class="<?=$class?>"> <a href="<?php echo $baseuri."?tabindex=".$curindex; ?>"> <?=$tab['title']?> </a> </td> <?php $curindex++; } ?> </tr> <tr><td class="tab-content" colspan="<?php echo(count($tabs) + 1); ?>"> <?php echo $tabs[$index]['text']; ?> </td> </tr> </table> <?php } ?>
Save the code as tabs.php.
