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
nextSibling - previousSibling Properties
November 24, 2009
Value: Object reference
Compatibility: WinIE5+, MacIE5+, Moz1+, Safari1+
A sibling node is one at the same nested level as another node in the hierarchy of an HTML document. The following p element has tow child nodes (the i and b elements), those tow child nodes are siblings of each other.
<p>Ramones is <i>the</i> best <b>rock’n'roll</b> band.</p>
The i node has not previousSibling property, the b node has not nextSibling prorerty (return null).
The following example assings the same class name to all child nodes of an element:
function setChildClasses(parentElem, className)
{
var childElem = parentElem.firstChild;
while(childElem.nextSibling)
{
childElem.className = className;
childElem = childElem.nextSibling;
}
}
Related items: firstChild, lastChild, childNodes properties, insertAdjucentElement method.
Magnet Link
November 22, 2009
This PHP function return the urn (Uniform Resource Name) formed from the content hash of a particular torrent file. The urn refering to the Base32 encoded hash of the file.
Code:
function base32_encode ($hash)
{
$outString = '';
$compBits = '';
$BASE32_TABLE = array(
'00000' => 0x61,
'00001' => 0x62,
'00010' => 0x63,
'00011' => 0x64,
'00100' => 0x65,
'00101' => 0x66,
'00110' => 0x67,
'00111' => 0x68,
'01000' => 0x69,
'01001' => 0x6a,
'01010' => 0x6b,
'01011' => 0x6c,
'01100' => 0x6d,
'01101' => 0x6e,
'01110' => 0x6f,
'01111' => 0x70,
'10000' => 0x71,
'10001' => 0x72,
'10010' => 0x73,
'10011' => 0x74,
'10100' => 0x75,
'10101' => 0x76,
'10110' => 0x77,
'10111' => 0x78,
'11000' => 0x79,
'11001' => 0x7a,
'11010' => 0x32,
'11011' => 0x33,
'11100' => 0x34,
'11101' => 0x35,
'11110' => 0x36,
'11111' => 0x37,
);
/* Turn the compressed string into a string that represents the bits as 0 and 1. */
for ($i = 0; $i < strlen($hash); $i++) {
$compBits .= str_pad(decbin(ord(substr($hash,$i,1))), 8, '0', STR_PAD_LEFT);
}
/* Pad the value with enough 0's to make it a multiple of 5 */
if((strlen($compBits) % 5) != 0) {
$compBits = str_pad($compBits, strlen($compBits)+(5-(strlen($compBits)%5)), '0', STR_PAD_RIGHT);
}
/* Create an array by chunking it every 5 chars */
$fiveBitsArray = split("\n",rtrim(chunk_split($compBits, 5, "\n")));
/* Look-up each chunk and add it to $outstring */
foreach($fiveBitsArray as $fiveBitsString) {
$outString .= chr($BASE32_TABLE[$fiveBitsString]);
}
return $outString;
}
Parametres:
dn - Filename
xl - Size in bytes
xt - urn containing file hash
as - Web link to the file online
xs - P2P link
kt - Key words for search
mt - link to the metafile that contains a list of magneto
xt is the most important part of magnet links.
Sites that use this kind of magnet links: btscene.com , mininova.org
length Property
November 20, 2009
Value: integer
Compatibility: WinIE3+, MacIE3+, Moz1+, Sasfari1+
The length property returns the number of items in an array or collection of objects. While arrays and collections use integer values as index values (starting with zero), the length value is the actual number of items in the group.
for(var i = 0; i < myArray.length; i++)
{
...
}
All browsers: document.forms.length
All browsers: document.forms[0].elements.length
Moz, IE4+: document.images.length
Moz: document.layers.length
IE4+: document.all.length
IE5+, W3C: document.getElementById(”myID”).childNodes.length
Related items: area, select and Array objects.
Pop-Up Hints
November 18, 2009
Download the overLIB javascript library.
Code:
<?php
function popup($txt, $popup)
{
?>
<a href="javascript:void(0);"
onmouseover="return overlib('<?=$popup?>');"
onmouseout="return nd();">
<?=$txt?>
</a>
<?php } ?> <html> <head> <title>Popup hints</title> <script type="text/javascript" src="overlib.js"></script> </head> <body> <div id="over" style="position:absolute;visibility:hidden;z-index:1000;"> </div> Greece is a small
<?php popup( 'country ', 'Small but very beautiful<br /> with many islands' ); ?> in southeast Europe. </body> </html>
Save the code as index.php
Unpack the overLIB library into your web server’s documents directory, add in the index.php file and surf to it on your browser. This popup can be used with images, tables, fonts, styles and whatever you want.
innerHTML and innerText Properties
November 16, 2009
Value: String
Compatibility: WinIE4+, MacIE4+, Moz1+, Safari1+
The innerHTML property contains not only the text content for an element , but also every bit of HTML tagging that is associated with that content. The browser interprets any HTML tags that you include in a string you assign to an element’s innerHTML property as tags. This also means that you can introduce entirely new nested elements.
The innerText property knows only about the text content of an element container, if you assign a string to the innerText property of an element and that string contains HTML tags , the tags and their angle brackets appear in the rendered page and are interpreted as live tags.
Do not modify the innerHTML property to adjust the HTML for frameset, html, head and title objects.
Code:
<html>
<head>
<title>innerHTML and innerText properties</title>
<style type="text/css">
h1 {font-size:18pt;font-weight:bold;font-family:Comic Sans MS,Arial sans-serif}
.small {font-size:12pt;font-weight:400;color:gray}
</style>
<script type="text/javascript">
function setText(form)
{
var content = form.textInput.value;
if(content)
{
document.getElementById("label").innerText = content;
}
}
function setHTML(form)
{
var content = form.HTMLInput.value;
if(content)
{
document.getElementById("label").innerHTML = content;
}
}
</script>
</head>
<body>
<form>
<p>
<input type="text" name="HTMLInput"
value="<I>First</I> Article <span class='small'>(of ten)</span>" size="50" />
<input type="button" value="Change HTML" onclick="setHTML(this.form)"/>
</p>
<p>
<input type="text" name="textInput"
value="<I>First</I> Article <span class='small'>(of ten)</span>" size="50" />
<input type="button" value="Change Text" onclick="setText(this.form)"/>
</p>
</form>
<h1 id="label">Article 1</h1>
<p>Add these eight nutritional powerhouses to your diet to help you look and feel youthful.</p>
</body>
</html>
Related items: outerHTML, outerText properties, replaceNode( ) method.
firstChild - lastChild Properties
November 13, 2009
Value: Node object reference
Compatibility: winIE5+, macIE5+, moz1+, safari1+
W3C DOM-based document object models are built around an architecture known as a node map. Each object defined by HTML is a node in the map. A node has relationships with other nodes in the document. A child node is an element that is contained by another element. The container is the parent of such a child. A parent object have zero or more children.
var nodeArray = document.getElementById(”elementID”).childNodes;
While you can use this array to get a reference to the first or last child node, the firstChild and lastChild properties offers shortcuts to those positions.
Code:
<html>
<head>
<title>firstChild - lastChild properties</title>
<script type="text/javascript">
function makeNewLi(txt)
{
var newItem = document.createElement("li");
newItem.innerHTML = txt;
return newItem;
}
function prepend(form)
{
var newItem = makeNewLi(form.input.value);
var firstLi = document.getElementById("mylist").firstChild;
document.getElementById("mylist").insertBefore(newItem, firstLi);
}
function append(form)
{
var newItem = makeNewLi(form.input.value);
var lastLi = document.getElementById("mylist").lastChild;
document.getElementById("mylist").appendChild(newItem);
}
function replaceFirst(form)
{
var newItem = makeNewLi(form.input.value);
var firstLi = document.getElementById("mylist").firstChild;
document.getElementById("mylist").replaceChild(newItem, firstLi);
}
function replaceLast(form)
{
var newItem = makeNewLi(form.input.value);
var lastLi = document.getElementById("mylist").lastChild;
document.getElementById("mylist").replaceChild(newItem, lastLi);
}
</script>
</head>
<body>
<h1>firstChild and lastChild properties</h1>
<hr />
<form>
<input type="text" name="input" /><br />
<input type="button" value="Insert at top" onClick="prepend(this.form)" />
<input type="button" value="Insert at bottom" onClick="append(this.form)" />
<input type="button" value="Replace at top" onClick="replaceFirst(this.form)" />
<input type="button" value="Replace at bottom" onClick="replaceLast(this.form)" />
</form>
<ol id="mylist">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
</body>
</html>
Related items: nextSibling, parentElement, parentNode, previousSibling properties, appendChild( ), hasChildNodes( ), removeChild( ), removeNode( ), replaceChild( ), replaceNode( ) methods.
HTML Email
November 11, 2009
This code describes how to send email using a multipart construction, where one part contains a plain-text version of the email and the other part is HTML. If you customers have HTML email turned off they will still get a nice email even if they don’t get all of the HTML markup.
Code:
<?php
$to_nickname = "Jimmy";
$to = "jimmy@email.com";
$from_nickname = "Jack";
$from = "jack@email.com";
$subject = "HTML Email";
$random_hash = "2343qwe";
ob_start(); ?> To: <?=$to_nickname?> < <?=$to?> > From: <?=$from_nickname?> < <?=$from?> > MIME-Version: 1.0 Content-Type: multipart/alternative;boundary="==Multipart_Boundary_<?=$random_hash?>" <?php $headers = ob_get_clean(); ob_start(); ?>
This is a multi-part message in MIME format.
--==Multipart_boundary_<?php print "$random_hash\n"; ?> Content-Type: text/plain; charset="iso-8859-1" Content-Transfer-Encoding: 7bit
This is the text of the message in a simple tetx format.
--==Multipart_boundary_<?=$random_hash?> Content-Type: text/html; charset="iso-8859-1" Content-Transfer-Encoding: 7bit
<html> <body> <p>Here is something with HTML formatting. That can include all of the usual:</p> <ul> <li>Bulleted lists</li> <li>Tables</li> <li>Images (if you include them as attachments or external links)</li> <li>Character formatting</li> <li>etc</li> </ul> </body> </html>
--==Multipart_boundary_<?=$random_hash?>
<?php $message = ob_get_clean(); $mail = @mail($to, $subject, $message, $headers); $ok = $mail ? "Mail sent\n" : "Mail failed\n"; print $ok; ?>
The only hitch comes from the images or other file-based resources. You have two alternatives with images. The first is to reference an image on a remote server. There are a couple of problems with this approach. First it doesn’t work for offline mail reading. Second spammers use this mechanism to see whether you have opened their email.
The second approach is to embed the image as an attachment in another part of the multipart message. This will work, but the email message themselves will be larger because of the base-64-encoded images.
