Circle Animation : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

 

Circle Animation



 
<!-- ***********************************************************
Example 4-6
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O'Reilly & Associates  ISBN 0-596-00316-1
http://www.oreilly.com
Copyright 2002 Danny Goodman.  All Rights Reserved.
************************************************************ -->

<html>
<head>
<script language="JavaScript" type="text/javascript">
/* ***********************************************************
Example 4-3 (DHTMLapi.js)
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O'Reilly & Associates  ISBN 1-56592-494-0
http://www.oreilly.com
Copyright 2002 Danny Goodman.  All Rights Reserved.
************************************************************ */
// DHTMLapi.js custom API for cross-platform
// object positioning by Danny Goodman (http://www.dannyg.com).
// Release 2.0. Supports NN4, IE, and W3C DOMs.

// Global variables
var isCSS, isW3C, isIE4, isNN4;
// initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
    if (document.images) {
        isCSS = (document.body && document.body.styletrue false;
        isW3C = (isCSS && document.getElementByIdtrue false;
        isIE4 = (isCSS && document.alltrue false;
        isNN4 = (document.layerstrue false;
        isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1">= 0true false;
    }
}
// set event handler to initialize API
window.onload = initDHTMLAPI;

// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
    var theObj;
    for (var i = 0; i < doc.layers.length; i++) {
        if (doc.layers[i].name == name) {
            theObj = doc.layers[i];
            break;
        }
        // dive into nested layers if necessary
        if (doc.layers[i].document.layers.length > 0) {
            theObj = seekLayer(document.layers[i].document, name);
        }
    }
    return theObj;
}

// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
    var theObj;
    if (typeof obj == "string") {
        if (isW3C) {
            theObj = document.getElementById(obj);
        else if (isIE4) {
            theObj = document.all(obj);
        else if (isNN4) {
            theObj = seekLayer(document, obj);
        }
    else {
        // pass through object reference
        theObj = obj;
    }
    return theObj;
}

// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
    var theObj = getRawObject(obj);
    if (theObj && isCSS) {
        theObj = theObj.style;
    }
    return theObj;
}

// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
            // equalize incorrect numeric value type
            var units = (typeof theObj.left == "string""px" 
            theObj.left = x + units;
            theObj.top = y + units;
        else if (isNN4) {
            theObj.moveTo(x,y)
        }
    }
}

// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
            // equalize incorrect numeric value type
            var units = (typeof theObj.left == "string""px" 
            theObj.left = getObjectLeft(obj+ deltaX + units;
            theObj.top = getObjectTop(obj+ deltaY + units;
        else if (isNN4) {
            theObj.moveBy(deltaX, deltaY);
        }
    }
}

// Set the z-order of an object
function setZIndex(obj, zOrder) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.zIndex = zOrder;
    }
}

// Set the background color of an object
function setBGColor(obj, color) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isNN4) {
            theObj.bgColor = color;
        else if (isCSS) {
            theObj.backgroundColor = color;
        }
    }
}

// Set the visibility of an object to visible
function show(obj) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.visibility = "visible";
    }
}

// Set the visibility of an object to hidden
function hide(obj) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.visibility = "hidden";
    }
}

// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (document.defaultView) {
        var style = document.defaultView;
        var cssDecl = style.getComputedStyle(elem, "");
        result = cssDecl.getPropertyValue("left");
    else if (elem.currentStyle) {
        result = elem.currentStyle.left;
    else if (elem.style) {
        result = elem.style.left;
    else if (isNN4) {
        result = elem.left;
    }
    return parseInt(result);
}

// Retrieve the y coordinate of a positionable object
function getObjectTop(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (document.defaultView) {
        var style = document.defaultView;
        var cssDecl = style.getComputedStyle(elem, "");
        result = cssDecl.getPropertyValue("top");
    else if (elem.currentStyle) {
        result = elem.currentStyle.top;
    else if (elem.style) {
        result = elem.style.top;
    else if (isNN4) {
        result = elem.top;
    }
    return parseInt(result);
}

// Retrieve the rendered width of an element
function getObjectWidth(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (elem.offsetWidth) {
        result = elem.offsetWidth;
    else if (elem.clip && elem.clip.width) {
        result = elem.clip.width;
    else if (elem.style && elem.style.pixelWidth) {
        result = elem.style.pixelWidth;
    }
    return parseInt(result);
}

// Retrieve the rendered height of an element
function getObjectHeight(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (elem.offsetHeight) {
        result = elem.offsetHeight;
    else if (elem.clip && elem.clip.height) {
        result = elem.clip.height;
    else if (elem.style && elem.style.pixelHeight) {
        result = elem.style.pixelHeight;
    }
    return parseInt(result);
}


// Return the available content width space in browser window
function getInsideWindowWidth() {
    if (window.innerWidth) {
        return window.innerWidth;
    else if (isIE6CSS) {
        // measure the html element's clientWidth
        return document.body.parentElement.clientWidth
    else if (document.body && document.body.clientWidth) {
        return document.body.clientWidth;
    }
    return 0;
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
    if (window.innerHeight) {
        return window.innerHeight;
    else if (isIE6CSS) {
        // measure the html element's clientHeight
        return document.body.parentElement.clientHeight
    else if (document.body && document.body.clientHeight) {
        return document.body.clientHeight;
    }
    return 0;
}


</script>
<script language="JavaScript" type="text/javascript">
// ** Global variables ** //
// circular motion arc interval controllers
var intervalCount = 1;
var intervalID;
// 'Corrector' positioning factor for IE/Mac et al., but doesn't hurt others
var fudgeFactor = {top:-1, left:-1};

// Set initial position offscreen and show object and
// start timer by calling glideToCenter()
function startRoll(layerName) {
    // 'obj' is the positionable object
    var obj = getRawObject(layerName);
    // set fudgeFactor values only first time
    if (fudgeFactor.top == -1) {
        if ((typeof obj.offsetTop == "number"&& obj.offsetTop > 0) {
            fudgeFactor.top = obj.offsetTop;
            fudgeFactor.left = obj.offsetLeft;
        else {
            fudgeFactor.top = 0;
            fudgeFactor.left = 0;
        }
        if (obj.offsetWidth && obj.scrollWidth) {
            if (obj.offsetWidth != obj.scrollWidth) {
                obj.style.width = obj.scrollWidth;    
            }
        }
    }
    var x = Math.round((getInsideWindowWidth()/2(getObjectWidth(obj)/2));
    var y = 50;
    shiftTo(obj, x - fudgeFactor.left, y - fudgeFactor.top);
    show(obj);
    intervalID = setInterval("goAround('" + layerName + "')"1);
}

// Move element along an arc that is 1/36 of a circle; stop at full circle
function goAround(layerName) {
    var obj = getRawObject(layerName);
    var x = Math.round(getObjectLeft(obj+ Math.cos(intervalCount * (Math.PI/18)) 10);
    var y = Math.round(getObjectTop(obj+ Math.sin(intervalCount * (Math.PI/18)) 10);
     shiftTo(obj, x - fudgeFactor.left, y - fudgeFactor.top);
    if (intervalCount++ == 36) {
        clearInterval(intervalID);
    }
}


</script>
</head>
<body onLoad="initDHTMLAPI(); startRoll('banner')" >
<span id="banner" style="position:absolute; visibility:hidden; left:0; top:0;
 background-color:yellow; font-size:36pt; color:red">
Congratulations!
</span>
</body>
</html>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Animation