- Refresher on the Different Types of Scripting
- Displaying Random Content on the Client Side
- Understanding the Document Object Model
- Using window Objects
- Working with the document Object
- Accessing Browser History
- Working with the location Object
- More About the DOM Structure
- Working with DOM Nodes
- Creating Positionable Elements (Layers)
- Hiding and Showing Objects
- Modifying Text Within a Page
- Adding Text to a Page
- Changing Images Based on User Interaction
- Thinking Ahead to Developing HTML5 Applications
- Summary
- Q & A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating Positionable Elements (Layers)
Now that you understand a little more about how the DOM is structured, you should be able to start thinking about how you can control any element in a web page, such as a paragraph or an image. For example, you can use the DOM to change the position, visibility, and other attributes of an element.
Before the W3C DOM and CSS2 standards (remember, we’re now on CSS3), you could only reposition layers, or special groups of elements defined with a proprietary tag. Although you can now position any element individually, 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 together, using the <div> container element.
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:100px; top:100px;"> This is the content of the layer. </div>
This code defines a container with the name layer1. This is a movable container positioned 100 pixels down and 100 pixels to the right of the upper-left corner of the browser window.
You’ve already learned about the positioning properties and seen them in action in Chapter 3, “Understanding the CSS Box Model and Positioning.” The remaining examples in this chapter use HTML and CSS like what you’ve already seen in this book, but they describe JavaScript-based interactions with the DOM.
Controlling Positioning with JavaScript
Using the code snippet from the preceding section, you’ll see an example in this section of how you can control the positioning attributes of an object, using JavaScript.
Here is our sample layer (a <div>):
<div id="layer1" style="position:absolute; left:100px; top:100px;"> This is the content of the layer. </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 200px. You can also combine these two statements, like so:
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.
Now let’s create an HTML document that defines a container and then combine it with a script to allow the container to be moved, hidden, or shown using buttons. Listing 6.5 shows the HTML document that defines the buttons and the container. The script itself (position.js) follows in Listing 6.6.
LISTING 6.5 The HTML Document for the Movable Container Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Positioning Elements with JavaScript</title>
<script type="text/javascript" src="position.js"></script>
<style type="text/css">
#buttons {
text-align: center;
}
#square {
position: absolute;
top: 150px;
left: 100px;
width: 200px;
height: 200px;
border: 2px solid black;
padding: 10px;
background-color: #e0e0e0;
}
div {
padding: 10px;
}
</style>
</head>
<body>
<h1>Positioning Elements</h1>
<div id="buttons">
<button type="button" name="left"
onclick="pos(-1,0);">Left</button>
<button type="button" name="right"
onclick="pos(1,0);">Right</button>
<button type="button" name="up"
onclick="pos(0,-1);">Up</button>
<button type="button" name="down"
onclick="pos(0,1);">Down</button>
<button type="button" name="hide"
onclick="hideSquare();">Hide</button>
<button type="button" name="show"
onclick="showSquare();">Show</button>
</div>
<hr>
<div id="square">
This square is an absolutely positioned container
that you can move using the buttons above.
</div>
</body>
</html>
In addition to some basic HTML, Listing 6.5 contains the following:
The <script> tag in the header reads a script called position.js, which is shown in Listing 6.6.
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 <button> tags 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.
If you load the HTML into a browser, you should see the buttons and the "square" layer, but the buttons won’t do anything yet. The script in Listing 6.6 adds the capability to use the actions. When you load the code in Listing 6.5 into your browser, it should look as shown in Figure 6.6.
)
FIGURE 6.6 The movable container, ready to be moved.
Listing 6.6 shows the JavaScript variables and functions that are called in the HTML in Listing 6.5. This code is expected (by the <script> tag) to be in a file called position.js.
LISTING 6.6 The Script for the Movable Layer Example
var x=100;
var y=150;
function pos(dx,dy) {
if (!document.getElementById) return;
x += 30*dx;
y += 30*dy;
var obj = document.getElementById("square");
obj.style.top=y + "px";
obj.style.left=x + "px";
}
function hideSquare() {
if (!document.getElementById) return;
var obj = document.getElementById("square");
obj.style.display="none";
}
function showSquare() {
if (!document.getElementById) return;
var 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 container. 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 container should move: If dx is negative, a number is subtracted from x, moving the container to the left. If dx is positive, a number is added to x, moving the container 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 30 (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 (including the “px” to indicate the unit of measurement), thus moving the container layer.
Two more functions, hideSquare() and showsquare(), hide or show the container 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 in Listing 6.6 into your browser. Figure 6.7 shows this script in action—well, after an action, that is. Figure 6.7 shows the script after the Right button has been clicked four times and the Down button five times.
)
FIGURE 6.7 The movable container has been moved.