Thursday, June 05, 2008

create DIV element on page

these script are to create DIV element on page with javascript
that can be define you size of header and navigator pane
by these variable headerHeight ,menuWidth
for future AJAX request to build your website


function createBlankpage(){
    var totalWidth = 0, totalHeight = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        totalWidth = window.innerWidth;
        totalHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        totalWidth = document.documentElement.clientWidth;
        totalHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        totalWidth = document.body.clientWidth;
        totalHeight = document.body.clientHeight;
    }
    var headerHeight = 150;
    var menuWidth = 170;
    var menuTop = headerHeight+'px';
    var menuHeight = totalHeight-headerHeight+'px';
    var mainTop =menuTop;
    var mainLeft = menuWidth;
    var mainWidth = totalWidth-menuWidth+'px';
    var mainHeight = menuHeight;
    createDiv('headerDIV','0px','0px',totalWidth,headerHeight);
    createDiv('menuDIV','0px',menuTop,menuWidth,menuHeight);
    createDiv('mainDIV',mainLeft,mainTop,mainWidth,mainHeight);
}

function createDiv(id,left,top,width,height,color){
    var id,top,left,height,width,visible;
    var creatingDiv = document.createElement("DIV");
    creatingDiv.id = id;
    creatingDiv.style.position="absolute";
    creatingDiv.style.left= left;
    creatingDiv.style.top= top;
    creatingDiv.style.width= width;
    creatingDiv.style.height= height;
    creatingDiv.style.verticalAlign="middle";
    creatingDiv.style.zIndex=5;
    creatingDiv.style.visibility = "visible";
    creatingDiv.innerHTML = "";
    document.body.appendChild(creatingDiv);
}