(Answer) (Category) Products of Aardvarks With Chisels : (Category) HTML : (Category) Javascript : (Category) layers.js :
view the code
http://www.cloudmaster.com/cloudmaster/demos/layers.js
// layers.js
// Danny Sauer, 12-5-2000
//  provides some functions for giving feedback, including moving layers
//  to overlap each other, and inserting newlines.  Maybe this should be
//  merged in with quizzes.js or something...
// 12-14-2000
//  modified to be more of a general-purpose library...
// 10/26/2001
//  modified to work with mozilla better
//  added calculation of missing properties

// based on PHPMyAdmin and ua.js, sortof
var agent=navigator.userAgent.toLowerCase();
var isIE=(agent.indexOf('msie') != -1) ? true : false;
var isDOM=(typeof(document.getElementById) != 'undefined' && !isIE) ? true : false;
var isNav4=(agent.indexOf('mozilla') != -1 && !isDOM && !isIE) ? true : false;

// returns left position
function getLeft(daObj){
        var returnVal;
        // set left if auto-calculated (left=0) or if not specified in-line/with style sheet
        if(isDOM){
                if(typeof(daObj.style.left)=='undefined' || daObj.style.left==''){
                        daObj.style.left = 
                                document.defaultView.getComputedStyle(daObj, '').getPropertyValue('left');
                }
                returnVal = parseInt(daObj.style.left);
        }
        else if(isNav4){ returnVal = daObj.left; } // daObj.pageY if undef
        else{ returnVal = daObj.style.pixelLeft; } // daObj.offsetLeft if undef
        return returnVal;
}

// sets left position
function setLeft(daObj, newLeft){
        if(isDOM){ daObj.style.left = newLeft + 'px'; }
        else if(isNav4){ daObj.left = newLeft; }
        else{ daObj.style.pixelLeft = newLeft; }
}

// returns top position
function getTop(daObj){
        var returnVal;
        if(isDOM){
                if(typeof(daObj.style.top)=='undefined' || daObj.style.top==''){
                        daObj.style.top = 
                                document.defaultView.getComputedStyle(daObj, '').getPropertyValue('top');
                }
                returnVal = parseInt(daObj.style.top);
        }
        else if(isNav4){ returnVal = daObj.top; } // daObj.pageX if undef
        else{ returnVal = daObj.style.pixelTop; } // daObj.offsetTop if undef
        return returnVal;
}

// sets top position
function setTop(daObj, newTop){
        if(isDOM){ daObj.style.top = newTop + 'px'; }
        else if(isNav4){ daObj.top = newTop; }
        else{ daObj.style.pixelTop = newTop; }
}

// gets object height
function getObjHeight(daObj){
        var returnVal;
        if(isDOM){
                if(typeof(daObj.style.height) == 'undefined' || daObj.style.height==''){
                        daObj.style.height = 
                                document.defaultView.getComputedStyle(daObj, '').getPropertyValue('height');
                }
                returnVal = parseInt(daObj.style.height);
        }else if(isIE){ returnVal = daObj.clientHeight; // daObj.offsetHeight if undef
        }else{ returnVal = daObj.clip.height; } // daObj.clip.height if undef
        return returnVal;
}

// gets object width
function getObjWidth(daObj){
        var returnVal;
        if(isDOM){
                if(typeof(daObj.style.width) == 'undefined' || daObj.style.width==''){
                        daObj.style.width = 
                                document.defaultView.getComputedStyle(daObj, '').getPropertyValue('width');
                }
                returnVal = parseInt(daObj.style.width);
        }else if(isIE){ returnVal = daObj.clientWidth; // daObj.offsetWidth if undef
        }else{ returnVal = daObj.clip.width; } // daObj.clip.width if undef
        return returnVal;
}

// returns window's innner width
function getWindowWidth(){
        var returnVal = isIE ? document.body.clientWidth : window.innerWidth;
        return returnVal;
}

// returns window's innner height
function getWindowHeight(){
        var returnVal = isIE ? document.body.clientHeight : window.innerHeight;
        return returnVal;
}

// return an object for a string or an object (just in case)
function getObject(daName){
        var daObj;
        if(typeof(daName) == "string"){
                if(isDOM){
                        daObj = document.getElementById(daName);
                }else if(isIE){
                        daObj = eval("document.all." + daName);
                }else{
                        daObj = eval("document." + daName);
                }
        }else{
                daObj = daName;
        }
        return daObj;
}

// shows an object
function show(daObj){
        var Obj = getObject(daObj);
        if(isNav4){
                Obj.visibility = 'visible';
        }else{
                Obj.style.visibility = 'visible';
        }
}

// hides an object
function hide(daObj){
        var Obj = getObject(daObj);
        if(isNav4){
                Obj.visibility = 'hidden';
        }else{
                Obj.style.visibility = 'hidden';
        }
}

// true if hidden, false if shown
function isHidden(daObj){
        var Obj = getObject(daObj);
        if(isNav4){
                returnVal = (Obj.visibility == 'hidden');
        }else{
                returnVal = (Obj.style.visibility == 'hidden');
        }
        return returnVal;
}

// moxes an object to a new coordinate (left, top) AKA (x, y)
function moveObjTo(daObj, newLeft, newTop){
        daObject = getObject(daObj);
        setLeft(daObject, newLeft);
        setTop(daObject, newTop);
}

// center an object in the screen
function moveToCenter(daObject){
        daObject = getObject(daObject);
        daHeight = getObjHeight(daObject);
        daWidth = getObjWidth(daObject);
        winHeight = getWindowHeight(daObject);
        winWidth = getWindowWidth(daObject);
        midLeft = (winWidth - daWidth) / 2;
        midTop = (winHeight - daHeight) / 2;
        moveObjTo(daObject, midLeft, midTop);
}

// locate topObj directly above topObj (alight upper left corners)
function overlayWith(bottomObj, topObj){
        var bottomO = getObject(bottomObj);
        var topO = getObject(topObj);
//      bottomO.moveBelow(topO);
        bottomO.zIndex = topO.zIndex - 1;
        newLeft = isNav4 ? bottomO.left : bottomO.pixelLeft;
        newTop = isNav4 ? bottomO.top : bottomO.pixelTop;
        moveObjTo(topO, newLeft, newTop);
}

// overlays with, then shows the lower and hides the upper
function overlayAndToggle(newBott, newTop){
        overlayWith(newBott, newTop);
        hide(newBott);
        show(newTop);
}

// overlays and toggles after moving to center
function overlayAndCenter(newBott, newTop){
        moveToCenter(newTop); // think about this - moving it twice?  Why? :)
        moveToCenter(newBott);
        overlayAndToggle(newBott, newTop);
}
[Append to This Answer]
2001-Nov-26 2:50pm
Previous: (Category) demos
This document is: http://www.cloudmaster.com/~sauer/projects/index.cgi?file=107
[Search] [Appearance]
This is a Faq-O-Matic 2.719.
This FAQ administered by sauer@cloudmaster.com