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.
currentStyle Property
November 5, 2009
Value: style object
Compatibility: WinIE5+, MacIE5+
Every element has style atrributes applied to it even if those atrributes are the browser’s default settings. Because an element’s style object reflects only those properties whose corresponding atrributes are set via CSS statements , you can not use the style property of an element object to view default style settings applied to an element.That’s where the currentStyle property comes in.
This property returns a read-only style object that contains values for every possible style property applicable to the element.
Related items: runtimeStyle, window.getComputedStyle( )
contentEditable Property
November 3, 2009
Value: Boolean
Compatibility: WinIE5.5+
Element tags can include a contentEditable attribute , whose value is echoed via the contentEditable property of the element. The default value for this property is inherit , which means that the property inherits whatever setting this property has in the hierarchy of HTML containers outward to the body. If you set the contentEditable property to true that element and all nested elements set to inherit the value become editable, conversely a setting of false turns off the option to edit the content.
Code:
<html>
<head>
<title>contentEditable property</title>
<style type="text/css">
.normal{color:black;}
.editing{color:red}
</style>
<script type="text/javascript">
function toogleEdit()
{
var newState = !editableText.isContentEditable;
editableText.contentEditable = newState;
editableText.className = (newState) ? "editing" : "normal";
editBtn.innerText = (newState) ? "Disable Editing" :"Enable Editing";
}
</script>
</head>
<body>
<h1>Editing Contents</h1>
<hr />
<p>Turn on editing to modify the follolwing text:</p>
<div id="editableText">
Edit this text on the fly...
</div>
<p>
<button id="editBtn" onclick="toogleEdit()" onfocus="this.blur()">Enable Editing</button>
</p>
</body>
</html>
Related items: isContentEditable property
clientWidth and clientHeight Properties
October 31, 2009
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
October 29, 2009
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
October 25, 2009
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
