Creating Positionable Elements (Layers)
Using the W3C DOM, you can control any element in a web page, such as a paragraph or an image. You can change an element's style, as you learned in the previous hour. You can also use the DOM to change the position, visibility, and other attributes of the element.
Before the W3C DOM and CSS2 standards, you could only reposition layers, special groups of elements defined with a proprietary tag. Although you can now position any element, it's still useful to work with groups of elements in many cases.
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.
By the Way
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 positioning properties in the next section.
Did you Know?
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. You can also control these properties using JavaScript, as described later in this hour.
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:
position is the main positioning attribute and can affect the following properties. The position property can have one of three values: static defines items that are laid out in normal HTML fashion, and cannot be moved. This is the default. absolute specifies that an item will be positioned using coordinates you specify. relative defines an item that is offset a certain amount from the static position, where the element would normally have been laid out within the HTML page.
left and top specify offsets for the position of the item. For absolute positioning, this is relative to the main browser window or a containing item. For relative positioning, it's relative to the usual static position. right and bottom are an alternative way to specify the position of the item. You can use these when you need to align the object's right or bottom edge. width and height are similar to the standard HTML width and height attributes and specify a width and height for the item. z-index specifies how items overlap. Normally indexes start with 1 and go up with each layer added "on top" of the page. By changing this value, you can specify which item is on top.
By the Way
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 the layer can display. Two properties affect how the layer is displayed in this case:
overflow indicates whether the content of an element is cut off at the edges of the element, or whether a scroll bar allows viewing the rest of the item. Values include visible to display content outside the element; hidden to hide the clipped content; scroll to display scroll bars; auto to let the browser decide whether to display scroll bars; or inherit to use a parent object's setting. clip specifies the clipping rectangle for an item. Only the portion of the item inside this rectangle is displayed. Normally this is the same as the element's dimensions, but you can define an offset inside the element here.
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:
display specifies whether an item is displayed in the browser. A value of "none" hides the object. Other values include block to display the object preceded and followed by line breaks, inline to display it without line breaks, and list-item to display it as part of a list. visibility specifies whether an item is visible. Values include visible (default), hidden, and inherit. A value of inherit means the item inherits the visibility of any item it appears within (such as a table or a paragraph).
The difference between display and visibility is that objects set to display: none will not be displayed at all, and the page will be laid out as if the element wasn't there. Objects set to visibility: hidden will still be included in the layout of the page, but as empty space.
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:
background-color specifies the color for the background of any text in the layer. background-image specifies a background image for any text in the layer. border-width sets the width of the border for all four sides. This can be a numeric value or the keywords thin, medium, or thick. border-style sets the style of border. Values include none (default), dotted, dashed, solid, double, groove, ridge, inset, or outset. border-color sets the color of the border. As with other color properties, this can be a named color such as blue or an RGB color such as #FF03A5.
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 in this hour's Try It Yourself section.
By the Way
Some CSS properties, such as text-indent and border-color, have hyphens in their names. When you use these properties in JavaScript, you combine the hyphenated sections and use a capital letter: textIndent and borderColor.
|
As an example of positioning an element with JavaScript, you can now create an HTML document that defines a layer, and combine it with a script to allow the layer to be moved, hidden, or shown using buttons. Listing 13.2 shows the HTML document that defines the buttons and the layer.
Listing 13.2. The HTML Document for the Movable Layer Example
<html>
<head>
<title>Positioning Elements with JavaScript</title>
<script language="javascript" type="text/javascript"
src="position.js">
</script>
<style>
#square {
position:absolute;
top: 150;
left: 100;
width: 200;
height: 200;
border: 2px solid black;
padding: 10px;
background-color: #E0E0E0;
}
</style>
</head>
<body>
<h1>Positioning Elements</h1>
<hr>
<form name="form1">
<input type="button" name="left" value="<- Left"
onClick="pos(-1,0);">
<input type="button" name="right" value="Right ->"
onClick="pos(1,0);">
<input type="button" name="up" value="Up"
onClick="pos(0,-1);">
<input type="button" name="down" value="Down"
onClick="pos(0,1);">
<input type="button" name="hide" value="Hide"
onClick="hideSquare();">
<input type="button" name="show" value="Show"
onClick="showSquare();">
</form>
<hr>
<div id="square">
<p>This square is an absolutely positioned
layer that you can move using the buttons above.</p>
</div>
</body>
</html>
|
In addition to some basic HTML, this document consists of the following:
The <script> tag in the header reads a script called position.js, which you will create later in this section. The <style> section is a brief style sheet that defines the properties for the movable layer. It sets the position property to absolute to indicate that it can be positioned at an exact location, sets the initial position in the top and left properties, and sets border and background-color properties to make the layer clearly visible. The <input> tags within the <form> section define six buttons: four to move the layer left, right, up, or down, and two to control whether it is visible or hidden. The <div> section defines the layer itself. The id attribute is set to the value "square". This id is used in the style sheet to refer to the layer, and will also be used in your script.
Type this document (or download it from this book's website) and save it. If you load it into a browser, you should see the buttons and the "square" layer, but the buttons won't do anything yet. The script in Listing 13.3 adds the action to the HTML.
Listing 13.3. The Script for the Movable Layer Example
var x=100,y=150;
function pos(dx,dy) {
if (!document.getElementById) return;
x += 10*dx;
y += 10*dy;
obj = document.getElementById("square");
obj.style.top=y;
obj.style.left=x;
}
function hideSquare() {
if (!document.getElementById) return;
obj = document.getElementById("square");
obj.style.display="none";
}
function showSquare() {
if (!document.getElementById) return;
obj = document.getElementById("square");
obj.style.display="block";
}
|
The var statement at the beginning of the script defines two variables, x and y, that will store the current position of the layer. The pos function is called by the event handlers for all four of the movement buttons.
The parameters of the pos() function, dx and dy, tell the script how the layer should move: If dx is negative, a number will be subtracted from x, moving the layer to the left. If dx is positive, a number will be added to x, moving the layer to the right. Similarly, dy indicates whether to move up or down.
The pos() function begins by making sure the getElementById() function is supported, so it won't attempt to run in older browsers. It then multiplies dx and dy by 10 (to make the movement more obvious) and applies them to x and y. Finally, it sets the top and left properties to the new position, moving the layer.
Two more functions, hideSquare() and showsquare(), hide or show the layer by setting its display property to "none" (hidden) or "block" (shown).
To use this script, save it as position.js and then load the HTML document, Listing 13.2, into your browser. Figure 13.2 shows this script in action.
By the Way
By assigning values to the layer's positioning properties repeatedly rather than at each click of a button, you can produce an animation effect. See Hour 19, "Using Graphics and Animation," for an example of this technique.
|
|
Main Menu
|
