Author Archive

0

Build Lightweight HTML Graphs

Posted by admin - October 22, 2009

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>&nbsp;</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>&nbsp;</td></tr>
 </table>
 </td>
 </tr>
 <?php
 }
 ?>
 </table>
 </body>
 </html>

Photo:

Save the code as html_colored_graphs.php

0

Collecting Child Nodes

Posted by admin - October 20, 2009

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.

0

Deep Blue 01 - Wordpress Theme

Posted by admin - October 18, 2009

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.

Download Deep Blue 01

0

Controlling the accessKey Property

Posted by admin - October 15, 2009

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>
0

Adding-Replacing DOM Content

Posted by admin - October 13, 2009

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.

0

Formatting Control with XSL

Posted by admin - October 11, 2009

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

0

Add tabs to your interface

Posted by admin - October 9, 2009

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.

0

Image Rollovers

Posted by admin - October 7, 2009

A favorite technique to add some pseudo-excitement is to swap button images as the user rolls the cursor atop them.The degree of change is largely matter of taste.The effect can be subtle-a slight highlight or glow around the edge of the image-or drastic-a radical change of color.Whatever your approach the scripting is the same.

Code:

<html>
 <head>
 <title>Image Rollovers</title>
 <script type="text/javascript">
 if(document.images)
 {
   var offImage = new Array();
   offImage['play'] = new Image(80,30);
   offImage['stop'] = new Image(80,30);
   offImage['pause'] = new Image(80,30);
   offImage['rewind'] = new Image(80,30);
   offImage['play'].src = "images/playoff.png";
   offImage['stop'].src = "images/stopoff.png";
   offImage['pause'].src = "images/pauseoff.png";
   offImage['rewind'].src = "images/rewindoff.png";
   var onImage = new Array();
   onImage['play'] = new Image(80,30);
   onImage['stop'] = new Image(80,30);
   onImage['pause'] = new Image(80,30);
   onImage['rewind'] = new Image(80,30);
   onImage['play'].src = "images/playon.png";
   onImage['stop'].src = "images/stopon.png";
   onImage['pause'].src = "images/pauseon.png";
   onImage['rewind'].src = "images/rewindon.png";
 }
 function imageOn(imgName)
 {
   if(document.images)
   {
     document.images[imgName].src = onImage[imgName].src;
   }
 }
 function imageOff(imgName)
 {
   if(document.images)
   {
     document.images[imgName].src = offImage[imgName].src;
   }
 }
 function setMsg(msg)
 {
   window.status = msg;
   return true;
 }
 </script>
 </head>
 <body>
 <form>
 Image Rollover
 <a onmouseover="imageOn('play'); return setMsg('Play the selected tune')"
 onmouseout="imageOff('play'); return setMsg('')">
 <img src="images/playoff.png" name="play" width="80" height="30" border="0" />
 </a>
 <a onmouseover="imageOn('stop'); return setMsg('Stop the selected tune')"
 onmouseout="imageOff('stop'); return setMsg('')">
 <img src="images/stopoff.png" name="stop" width="80" height="30" border="0" />
 </a>
 <a onmouseover="imageOn('pause'); return setMsg('Pause the selected tune')"
 onmouseout="imageOff('pause'); return setMsg('')">
 <img src="images/pauseoff.png" name="pause" width="80" height="30" border="0" />
 </a>
 <a onmouseover="imageOn('rewind'); return setMsg('Rewind the selected tune')"
 onmouseout="imageOff('rewind'); return setMsg('')">
 <img src="images/rewindoff.png" name="rewind" width="80" height="30" border="0" />
 </a>
 </form>
 </body>
 </html>
0

Precaching Images

Posted by admin - October 5, 2009

Javascript enabling scripts to load images into the browser’s memory cache without displaying the image, a technique called precaching images.

Precaching an image requires constructing an image object in memory:

var myImage = new Image(width, height);

parameters to the constructor function are the pixel width and height of the image.

Code:

<html>
 <head>
 <title>Image Object</title>
 <script type="text/javascript">
 var imageArray = new Array();
 imageArray['image1'] = new Image(100, 100);
 imageArray['image1'].src = "img1.gif";
 imageArray['image2'] = new Image(100, 100);
 imageArray['image2'].src = "img2.gif";
 imageArray['image3'] = new Image(100, 100);
 imageArray['image3'].src = "img3.gif";
 function loadImages(list)
 {
   var img = list.options[list.selectedIndex].value;
   document.thumb.src = imageArray[img].src;
 }
 </script>
 </head>
 <body>
 <h3>Image Object</h3>
 <img src="img1.gif" name="thumb" width="100" height="100" />
 <form>
 <select onchange="loadImages(this)">
 <option value="image1">Image 1</option>
 <option value="image2">Image 2</option>
 <option value="image3">Image 3</option>
 </select>
 </form>
 </body>
</html>
0

HTML Boxes

Posted by admin - October 2, 2009

Sometimes it’s useful to put your page content into boxes to make it easier for users to navigate your site.

Code:

<?php
 function boxStyles()
 {
?>
 <style type="text/css">
 .box
 {
   font-family:arial, verdana, sans-serif;
   font-size:x-small;
   background:#ccc;
 }
 .box_title
 {
   font-size:small;
   font-weight:bold;
   color:#fff;
   background:#777;
   padding:5px;
   text-align:center;
 }
 .box-content
 {
   background:#fff;
   padding:5px;
 }
 </style>
<?php
 }
 function start_box($title)
 {
?>
   <table class="box">
   <tr>
   <td class="box-title"><?=$title?></td>
   </tr>
   <tr>
   <td class="box-content">
<?php
 }
 function end_box()
 {
?>
   </td>
   </tr>
   </table>
<?php
 }
?>
<html>
 <head>
 <title>Html Boxes</title>
 <?php boxStyles(); ?>
 </head>
 <body>
 <div style="width:300px;">
 <?php start_box("Greece"); ?>
 Greece was the first area in Europe where advanced early civilizations emerged,
 beginning with the Minoan civilization in Crete
 and then the Mycenean civilization on the mainland...
 <?php end_box(); ?>
 </div>
 </body>
 </html>

Note: if you want several different colors of boxes you can create different CSS classes for the colors.

Previous Page
Next Page