Lesson 5 : Positioning Elements

Overview

In this JavaScript video tutorial, we demonstrate the two main methods of positioning elements in JavaScript: static and absolute. Although these positioning methods exist in JavaScript, they originated in CSS. In fact, if you want to read more about these methods and the other two types of positioning, you can read my CSS blog post entitled Types of Positioning for HTML Elements with CSS.

Download Code

For this lesson, you will need an HTML file and a JavaScript file like the ones that we created in Lesson 1. We use a different JavaScript file, but our HTML file will be essentially the same, except for the filename and the name of the JavaScript file that it calls. The final code files for this lesson are given below. They can be downloaded by left-clicking the link to the right of the video player above.

Lesson5.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="Lesson5.js"></script>
</body>
</html>

Lesson5.js

var qaTrinity = [];

qaTrinity[0] = new Image();
qaTrinity[0].src = "Creation_Michelangelo_1.jpg"
qaTrinity[0].style.position = "absolute";
qaTrinity[0].style.left = "250px";
qaTrinity[0].style.top = "50px";
document.body.appendChild(qaTrinity[0]);

qaTrinity[1] = new Image();
qaTrinity[1].src = "TheDescentOfTheHolyGhost_Titian_2.jpg"
qaTrinity[1].style.position = "absolute";
qaTrinity[1].style.left = "450px";
qaTrinity[1].style.top = "250px";
document.body.appendChild(qaTrinity[1]);

qaTrinity[2] = new Image();
qaTrinity[2].src = "TheLastJudgment_Michelangelo_3.jpg"
qaTrinity[2].style.position = "absolute";
qaTrinity[2].style.left = "50px";
qaTrinity[2].style.top = "250px";
document.body.appendChild(qaTrinity[2]);

The JavaScript code above is the same as the code for Lesson 4, except that I have added three extra lines for each image. The first of these lines sets the positioning to absolute. The second line sets the horizontal position of the upper-left corner of the image relative to the upper-left corner of the window. The third line sets the vertical position of the upper-left corner of the image relative to the upper-left corner of the window. Executing the code, will display the images in the triangular arrangement shown above, similar to what is typically done for the Trinity.

The positioning in this lesson is called absolute and is different from the static positioning used in the prior lesson. Static positioning is where the images are laid out in left to right and then top to bottom order, much like reading. We did not need to specify the positioning as static in the last lesson because it is the default when nothing else is specified. However, explicitly setting the positioning to static will not cause problems and may be advantageous in some cases.