Banner in Javascript : Banner « GUI Components « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » GUI Components » Banner 
Banner in Javascript

<!-- ***********************************************************
Example 4-4
"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 'corrector' for IE/Mac et al., but doesn't hurt others
var fudgeFactor = {top:-1, left:-1};

// Center a positionable element whose name is passed as 
// a parameter in the current window/frame, and show it
function centerIt(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 = Math.round((getInsideWindowHeight()/2(getObjectHeight(obj)/2));
    shiftTo(obj, x - fudgeFactor.left, y - fudgeFactor.top);
    show(obj);
}

// Special handling for CSS-P redraw bug in Navigator 4
function handleResize() {
    if (isNN4) {
        // causes extra re-draw, but gotta do it to get banner object color drawn
        location.reload();
    else {
        centerIt("banner");
    }
}
</script>
</head>

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



           
       
Related examples in the same category
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.