Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Email.Email article link
JavaScript & DHTML Cookbook (cover)

JavaScript & DHTML Recipe of the Day

The following recipe is from JavaScript & DHTML Cookbook, by Danny Goodman. All links in this recipe point to the online version of the book on the Safari Bookshelf.

Buy it now, or read it online on the Safari Bookshelf.

13.1. Making an Element Positionable in the Document Space

NN 4, IE 4

13.1.3. Discussion

There is nothing particularly dynamic about a positioned element, except that it is loaded with potential for scripting activity in motion, visibility, stacking, and clipping. Except in Navigator 4, the positioned element itself can be of any renderable HTML element, and may thus have event handler assignments (perhaps for mouse dragging) and any HTML content. Even an inline element (such as a span element) becomes a block-level element when it is positioned (even if the display style property value doesn't necessarily change to reflect its behavior).

As you will see in Recipe 13.3, scripted modifications to the position of an element are performed via the style property of the element. Using W3C DOM element referencing, for example, allows you to adjust the top coordinate of the example as follows:

document.getElementById("myDIV").style.top = "200px";

Note that the position property of the style object is read-only, which means that once an element renders according to its associated position CSS property, the value cannot be changed. Therefore, you cannot turn an inline element into a positioned element simply by altering the value assigned to the style.position property.

13.1.4. See Also

Recipe 13.3 for a script library of functions to control positioned elements; Chapter 11 for style sheet assignment syntax.

View the past week's recipes: Today | Yesterday | 3 days ago | 4 days ago | 5 days ago | 6 days ago | A week ago