Sams Teach Yourself JavaScript in 24 Hours

Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

Creating Positionable Elements

Netscape 4.0 included a <layer> tag, which defined a portion of the Web page that could be moved, shown, or hidden separately from the rest of the page. While this was proprietary, the CSS (Cascading Style Sheets) specification also includes methods of positioning elements.

Under the new DOM, you can control any element in the page. You can effectively create a layer, or a group of HTML objects that can be controlled as a group, using the <div> or <span> tags.

Note

The <div> and <span> tags are part of the HTML 3.0 standard. <span> defines an arbitrary section of the HTML document, and does not specify any formatting for the text it contains. <div> is similar, but includes a line break before and after its contents.

To create a layer with <div>, enclose the content of the layer between the two division tags and specify the layer's properties in the style attribute of the <div> tag. Here's a simple example:

<DIV ID="layer1" STYLE="position:absolute; left:100; top:100">
<p>This is the content of the layer.</p>
</DIV>

This code defines a layer with the name layer1. This is a moveable layer positioned 100 pixels down and 100 pixels to the right of the upper-left corner of the browser window. You'll learn more details about the layer properties in the next section.

Note

As with all CSS properties, you can specify the position property and other layer properties in a <style> block, in an external style sheet, or in the style attribute of an HTML tag.

Setting Object Position and Size

You can use various properties in the style attribute of the <div> tag when you define a layer to set its position, visibility, and other features. The following properties control the object's position and size:

Note

Properties such as left and top work in pixels by default. You can also use any of the units described in the previous hour: px, pt, ex, em, or percentages.

Setting Overflow Properties

Sometimes the content inside a layer is larger than the size of the layer can display. Two properties affect how the layer is displayed in this case:

Using Visibility Properties

Along with positioning objects, you can use CSS positioning to control whether the objects are visible at all, and how the document is formatted around them. These properties control how objects are displayed:

Setting Background and Border Properties

You can use the following properties to set the color and background image for a layer or other object and control whether borders are displayed:

Controlling Positioning with JavaScript

As you learned in the previous hour, you can control the style attributes for an object with the attributes of the object's style property. You can control the positioning attributes listed in the previous section the same way.

Suppose you have created a layer with the following <div> tags:

<div ID="layer1" STYLE="position:absolute; left:100; top:100">
<p>This is the content of the layer.</p>
</div>

To move this layer up or down within the page using JavaScript, you can change its style.top attribute. For example, the following statements move the layer 100 pixels down from its original position:

var obj = document.getElementById("layer1");
obj.style.top=200;

The document.getElementById method returns the object corresponding to the layer's <div> tag, and the second statement sets the object's top positioning property to 200. As you learned in the previous hour, you can also combine these two statements:

document.getElementById("layer1").style.top = 200;

This simply sets the style.top property for the layer without assigning a variable to the layer's object. You will use this technique to create an animation in this hour's Workshop section.

Note

Some CSS properties, such as text-indent and border-color, have hyphens in their names. Since this would cause JavaScript errors, you combine the hyphenated sections and use a capital letter when working with them in JavaScript: textIndent and borderColor.

Dealing with Older Browsers

While the new DOM makes it easy to manipulate styles, positions, and even portions of a document themselves, you should be aware that these features are only standardized and supported in Internet Explorer 5.0 and later, and Netscape 6.0 and later.

Furthermore, since the DOM features are new, you may run into differences in the ways the browsers implement these features. You should test any DOM-dependent scripts on both the latest Netscape and Internet Explorer browsers before publishing it.

Equally importantly, you should be aware that many users are using older browsers and will be for some time. Since Netscape 4.0 and Internet Explorer 4.0 support many of these features, although in non-standard ways, you can use browser detection to support these browsers as well as newer DOM-compliant browsers.

Note

You learned the techniques used in browser detection in Hour 14, "Creating Cross-Browser Scripts."

In particular, the layer positioning techniques you learned in this hour can be accomplished equally well in Netscape 4.0 or Internet Explorer 4.0. To begin with, both of these browsers support the CSS method of defining a layer with the <div> tag. These statements create the same layer in both 4.0 and DOM-compliant browsers:

<div ID="layer1" STYLE="position:absolute; left:100; top:100">
<p>This is the content of the layer.</p>
</div>

The difference is in the way you use JavaScript to control layer positioning. Here is the DOM method of changing the layer's top position to 200, as you learned above:

var obj = document.getElementById("layer1");
obj.style.top=200;

Internet Explorer 4.0 uses a similar syntax, but stores all objects under the document.all object rather than in a tree structure. Here is IE4's method of performing the same position change:

var obj=document.all.layer1;
obj.style.top=200;

Last but not least, Netscape 4.0 uses the layers array to store information about layer positions. Here is the Netscape 4.0 method of changing the layer's position:

var obj=document.layers["layer1"];
obj.top=200;

As you can see, the new DOM will make multiple-browser compatibility much easier when the latest browsers complete replace older ones. In the meantime, be sure to support older browsers if it's possible and practical for your pages.

Using Feature Sensing

In Hour 14, you learned how to detect the browser in use using the navigator object. While you could use this technique to support the 4.0 browsers for DHTML, using feature sensing makes your script easier to write and more compatible with future browsers.

In feature sensing, you detect whether an object or method exists rather than detecting the browser version. For example, this statement detects whether Netscape's document.layers object exists:

if (document.layers) alert ("layers!");

Using this technique, you can create a function that finds the correct object to manipulate regardless of the browser in use:

function GetStyleObject(id) {
   if (document.getElementById)
      return document.getElementById(id).style;
   else if (document.layers)
      return document.layers[id];
   else if (document.all)
      return document.all[id].style;
   else {
      alert("DHTML support not found.");
      return false;
   }
}

The GetStyleObject function determines whether to use getElementById for version 5-6 browsers, document.layers for Netscape 4.x, and document.all for Internet Explorer 4.x. It returns the correct parent object to use with style objects. If you add this function to a document and use it in place of the document.getElementById method, you can often make the script work in 4.x browsers.

Share ThisShare This

Informit Network