Javascript
offsetParent
Value: Object reference
Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+
The offsetParent property returns a reference to the object that acts as a positioning context for the current element.Values for the offsetLeft and offsetTop are measured relative to the top-left corner of the offsetParent object.
The returned object is usually , but not always the next outermost block-level container. For most document elements the offsetParent object is the document.body object.
The property behaves predictably for positioned elements in most browsers.
Code:
<html>
<head>
<title>offsetParent Property</title>
<script type="text/javascript">
function setImagePosition()
{
var x = 0;
var y = 0;
var offsetPointer = document.getElementById("myCell");
while(offsetPointer)
{
x += offsetPointer.offsetLeft;
y += offsetPointer.offsetTop;
offsetPointer = offsetPointer.offsetParent;
}
//correct for MacIE body margin factors
if(navigator.userAgent.indexOf("Mac") != -1 &&
typeof document.body.leftMargin != "undefined")
{
x += document.body.leftMargin;
y += document.body.topMargin;
}
document.getElementById("myDiv").style.left = x + "px";
document.getElementById("myDiv").style.top = y + "px";
document.getElementById("myDiv").style.visibility = "visible";
}
</script>
</head>
<body onLoad="setImagePosition()">
<h1>The offset property</h1>
<p>After the document loads, the script positions a small image in the upper
corner of the second table cell.</p>
<table border="1" align="center">
<tr>
<td>First cell</td>
<td id="myCell">Second cell</td>
</tr>
</table>
<img src="image.png" id="myDiv" height="12" width="12"
style="position:absolute;visibility:hidden;" />
</body>
</html>
Move Images using Javascript
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
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
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.
nodeValue
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.
nodeName Property
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
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.
length Property
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.
innerHTML and innerText Properties
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
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.
