Harnessing The Power of Standards: The DOMWindow
By Scott Andrew LePera
November 19, 2000 | Printer-friendly version
Part I: The Building Blocks
A quick word of warning: we're just going to jump right in and start building this sucker. I'm not going to stop to explain in detail all the different DOM methods and features we're going to use. If you haven't already, I recommend reading Scripting For The 6.0 Browsers and DHTML First-Aid For The 6.0 Browsers before continuing if you want to know more of the mechanics of this demo.
The DOMWindow is almost completely built out of DIV elements. Because we are forward-thinking web developers, we're not going to even bother with coding DIV tags. Scripting is the only way to go! We're going to generate our DIVs with JavaScript and DOM methods.
We can easily create a DIV using the DOM method, createElement. After setting a few style properties, we can assign the DIV object to the document:
var lyr = document.createElement("DIV")
lyr.style.position = "absolute"
lyr.style.left = "100px"
lyr.style.top = "100px"
lyr.style.width = "150px"
lyr.style.height = "100px"
lyr.style.backgroundColor = "#ff0000"
lyr.style.visibility = "visible"
lyr.style.padding= "0px 0px 0px 0px"
document.body.appendChild(lyr)
However, since each DOMWindow is assembled from several DIVs, we could develop serious wrist problems retyping this block of code for every DIV. The operative phrase here is code reuse. So let's create a special function that will create a DIV object and set the style properties for us.
We'll call it the DOMDiv constructor.
function DOMDiv (x,y,w,h,col){
var lyr = document.createElement("DIV")
lyr.style.position = "absolute"
lyr.style.left = x + "px"
lyr.style.top = y + "px"
lyr.style.width = w + "px"
lyr.style.height = h + "px"
lyr.style.backgroundColor = col
lyr.style.visibility = "visible"
lyr.style.padding= "0px 0px 0px 0px"
return lyr
}
Now whenever we want to create a new DIV element, we can just call this DOMDiv constructor with a few parameters:
div1 = new DOMDiv(200,100,100,100,"#ff0000")
document.body.appendChild(div1)
EXAMPLE: Three layers created with the DOMDiv constructor
DOMDiv constructor will save us time, browser resources, and wrist pain.
Okay, now let's throw together the basic framework of the DOMWindow.