Building `Drag-and-Drop` DIVs: Polishing the Look and Feel - Nesting and styling DIV elements: defining the “DOMWindow()” function
(Page 3 of 5 )
Having at my disposal the “DOMDiv()” function, which is tasked with building each block element that comprises the whole dragging structure, what I’ll do next is define another useful function, “DOMWindow()”, that simply will create the DIV elements corresponding to each section of the DOM-based window. So, let’s first have a look at its signature, and then see how it works:
function DOMWindow(x,y,w,h,title,content){
// create window structure
var winBody=new DOMDiv(x,y,w,h,'#ccc');
// assign ID attribute
winBody.setAttribute('id','domdiv');
winBody.style.border='2px outset #aaa';
winBody.style.cursor='default';
// create window title bar
var titleBar=new DOMDiv(4,4,w-14,18,'#00c');
titleBar.style.font='bold 10pt Arial';
titleBar.style.color='#fff';
titleBar.style.paddingLeft='4px';
// create window 'content area'
var contentArea=new DOMDiv(4,26,w-10,h-40,'#fff');
contentArea.style.width=document.all?(parseInt
(contentArea.style.width)-4)+'px':(parseInt
(contentArea.style.width)-7)+'px';
contentArea.style.border='1px inset #ccc';
contentArea.style.overflow='auto';
contentArea.style.padding='0px 2px 0px 4px';
contentArea.style.font='normal 10pt Arial';
// append title to title bar
titleBar.appendChild(document.createTextNode(title));
// append text to content area
contentArea.appendChild(document.createTextNode(content));
// append title bar
winBody.appendChild(titleBar);
// append content area
winBody.appendChild(contentArea);
// append window to document tree
document.getElementsByTagName('body')[0].appendChild(winBody);
}
The above function might look overly complicated, but it’s actually fairly simple. In order to understand it better, let’s dissect its code into simpler pieces and see how they work. The first fragment of code calls up the “DOMDiv()” function, in order to create the general containing DIV, which will hold the box corresponding to the window’s title bar, as well as the DIV element used as the window’s content area.
Once this general container, which I called “winbody”, has been created, it’s properly styled by applying to it a 2px border and specifying the shape of the mouse cursor as well. The next task the function performs is creating the window’s title bar, by using a similar method to the one used to build the general containing DIV. In this case, in order to get a beveled border, the title bar is absolutely positioned by specifying a left-top offset of 4px from the position of the general containing DIV, and it’s also appropriately styled.
Finally, the function creates the DIV that composes the window’s content area, by following the same sequence of steps performed for building up the previous DIVs, and finally inserts these elements into the structure of the web document.
Of course, a picture is worth a thousand words, so below I’ve included a screenshot that illustrates quite accurately the final look of the DOM-based window. Take a look:
Definitely you’ll agree that the look and feel of the window-like DIVs have been considerably improved, taking into account that the above structure has been constructed with no background images at all. It’s only three nested DIVs and pure presentational JavaScript code.
At this stage, I think I have enough building blocks to actually start turning DOM-based DIVs into drag-and-drop elements. Bearing this in mind, let’s leap forward and see how this task is carried out. Trust me, it’s not difficult at all.
Next: Turning DOM-based DIVS into dragging elements: using the X library >>
More JavaScript Articles
More By Alejandro Gervasio
/ 8 
