Most people just leave it to the browser to position the objects automatically, when they are developing a HTML-file for a web page. But as a professional web site designer you will frequently want to have more control over their positioning. Fortunately there are a number of methods to do that.
Most of the things presented here is part of DHTML that is limited to MS-Internet Explorer 4+. In Netscape Navigator and other browsers they are not guaranteed to work. When you look at http://www.thecounter.com (Global Stats, Browsers), you will see that more than 90% of browsers are
Objects
"Object" is the generic name for all those things you see on screen, created by the browser according to your html-code. (For example: paragraphs, images, links, tables, etc.) They can be distinguished by the following structure:
In HTML a single object can be a "block element" (like a paragraph
Sometimes you will want to have some objects grouped, e.g. if they are to be moved collectively. As of IE 4.0 you can have that by bracketing them in
DIV-clauses can even be nested, for building object hierarchies. (In the demo pertaining to this article the "Floating Menu" is implemented by nested DIV's.)
Positioning
Positioning can be done automatically (by the browser) or explicitly. Explicit positioning falls into Static and Dynamic Positioning:
Most objects, at least the "HTML elements", could be positioned right in the HTML-code by declaring them with a STYLE-attribute:
<object_type STYLE="position:absolute;
If positioning does not work for an object directly, it should be made a DIV:
<DIV STYLE="position:absolute;
If you want to modify any STYLE attribute during runtime, you need to declare an identifier to each object you want to position. TOP and LEFT are needed only if you want to place it at an initial position:
<object_type ID=... STYLE="position:absolute;
The ID can be any combination of letters, digits and underscore ('_'), starting with a letter. The attributes for TOP and LEFT are given by numbers (meaning distances in pixels, referring to the top-left corner of the browser's client area).
Static Positioning: changing VISIBILITY
Thus you can have an object positioned at an initial place, yet it is still invisible:
<object_type ID=..id.. STYLE="position:absolute;
When it is needed, the visitor clicks a button. In html-code it is implemented by
<BUTTON onclick="change_visibility(id)"
Note that the object identifier 'id' is used as parameter when calling the script 'change-visibility()'. It looks basically like this:
function change_visibility(obj) {
var object=eval("document.all."+obj);
object.style.visibility = "visible"; }
Note that the actual position of the object is not changed - only its visibility. So it pops up when the visitor clicks the button.
Static Positioning: changing DISPLAY
Formally that's quite similar to changing the visibility - only the STYLE attribute is different:
<object_type ID=..id.. STYLE="position:absolute;
Consequently, the BUTTON-clause should be now something like the following:
<BUTTON onclick="change_display()"
This time let's assume that there is only one object in your html-file whose DISPLAY is to be changed. Therefore you don't need to pass it to the script as a parameter but you can code it right into the script:
function change_display() {
if (document.all.id.style.display == "") {
document.all.id.style.display = "none";}
else{ document.all.id.style.display= ""; } }
Now the object's DISPLAY is toggled: Once the visitor clicks the button, the object pops up (and all the other objects following it in the html-file are moved down). When the visitor clicks the button again, the object disappears (and all the other objects following it in the html-file are moved up).
Static Positioning: changing Z-order
This trick you can use if you have any "floating" object that the visitor can move anywhere on the screen. So it can as well be covering another object. If you want to bring it to the foreground, just provide a button:
<BUTTON onclick="change_zOrder(id)"
This time you don't need any special precaution in the object's initial positioning.
Note that the object identifier 'id' is used as parameter when calling the script 'change- zOrder()'. Its code is something like the following:
function change_zOrder(obj) {
var object=eval("Div"+obj);
if (object.style.zIndex == 1) { object.style.zIndex = 0; }
else { object.style.zIndex = 1; } }
When the object is in the background, once the visitor clicks the button, it is brought to the foreground. When the visitor clicks the button again, it is stowed away in the background.
Beyond that, there are many other ways to modify the appearance of an object such that a visitor is tempted to think that it has been re-positioned. In fact, however, the object stayed at the same place on screen - but its STYLE (i.e. border lines, background color, etc.) has been changed as to make it look as if it had been moved. Usually that requires some coding effort, so that there is no point here to enter into the details.
Dynamic Positioning: changing TOP and/or LEFT
To do that, you can position the object to be moved later anywhere on screen. (It can be even off screen, if you don't want to have it visible to the visitor at first. Just use negative coordinates for TOP and/or LEFT.) Don't forget to declare it with an identifier. The other STYLE attributes are not needed now:
<object_type ID=..id.. STYLE="position:absolute;
Let's assume, there is no button for moving the object . Instead, moving starts when the visitor double-clicks anywhere on the screen background. When the visitor double-clicks again, the object is "released" (moving it stops). Consequently you need to declare it in the BODY tag:
<BODY ondblclick="toggleMove()" onmousemove="moveIt()">The script looks quite simple:
var move=false;
function toggleMove() { move=~move; }
Note that we need a global variable now that is checked by another script that handles the moving.
It's a bit more complicated, so we'll confine ourselves to its essential code lines:
function moveIt(e) {
:
if (move)
{ id.style.pixelLeft=tempX;
id.style.pixelTop=tempY; }
}
For a demonstration of all kinds of positioning click: article218a.htm