1 /* ***********************************************************
2 Example 4-3 (DHTMLapi.js)
3 "Dynamic HTML:The Definitive Reference"
6 Published by O'Reilly & Associates ISBN 1-56592-494-0
8 Copyright 2002 Danny Goodman. All Rights Reserved.
9 ************************************************************ */
10 // DHTMLapi.js custom API for cross-platform
11 // object positioning by Danny Goodman (http://www.dannyg.com).
12 // Release 2.0. Supports NN4, IE, and W3C DOMs.
15 var isCSS
, isW3C
, isIE4
, isNN4
;
16 // initialize upon load to let all browsers establish content objects
17 function initDHTMLAPI() {
18 if (document
.images
) {
19 isCSS
= (document
.body
&& document
.body
.style
) ? true : false;
20 isW3C
= (isCSS
&& document
.getElementById
) ? true : false;
21 isIE4
= (isCSS
&& document
.all
) ? true : false;
22 isNN4
= (document
.layers
) ? true : false;
23 isIE6CSS
= (document
.compatMode
&& document
.compatMode
.indexOf("CSS1") >= 0) ? true : false;
26 // set event handler to initialize API
27 //window.onload = initDHTMLAPI;
28 addListener(window
, 'load', initDHTMLAPI
);
30 // Seek nested NN4 layer from string name
31 function seekLayer(doc
, name
) {
33 for (var i
= 0; i
< doc
.layers
.length
; i
++) {
34 if (doc
.layers
[i
].name
== name
) {
35 theObj
= doc
.layers
[i
];
38 // dive into nested layers if necessary
39 if (doc
.layers
[i
].document
.layers
.length
> 0) {
40 theObj
= seekLayer(document
.layers
[i
].document
, name
);
46 // Convert object name string or object reference
47 // into a valid element object reference
48 function getRawObject(obj
) {
50 if (typeof obj
== "string") {
52 theObj
= document
.getElementById(obj
);
54 theObj
= document
.all(obj
);
56 theObj
= seekLayer(document
, obj
);
59 // pass through object reference
65 // Convert object name string or object reference
66 // into a valid style (or NN4 layer) reference
67 function getObject(obj
) {
68 var theObj
= getRawObject(obj
);
69 if (theObj
&& isCSS
) {
70 theObj
= theObj
.style
;
75 // Position an object at a specific pixel coordinate
76 function shiftTo(obj
, x
, y
) {
77 var theObj
= getObject(obj
);
80 // equalize incorrect numeric value type
81 var units
= (typeof theObj
.left
== "string") ? "px" : 0;
82 theObj
.left
= x
+ units
;
83 theObj
.top
= y
+ units
;
90 // Move an object by x and/or y pixels
91 function shiftBy(obj
, deltaX
, deltaY
) {
92 var theObj
= getObject(obj
);
95 // equalize incorrect numeric value type
96 var units
= (typeof theObj
.left
== "string") ? "px" : 0;
97 theObj
.left
= getObjectLeft(obj
) + deltaX
+ units
;
98 theObj
.top
= getObjectTop(obj
) + deltaY
+ units
;
100 theObj
.moveBy(deltaX
, deltaY
);
105 // Set the z-order of an object
106 function setZIndex(obj
, zOrder
) {
107 var theObj
= getObject(obj
);
109 theObj
.zIndex
= zOrder
;
113 // Set the background color of an object
114 function setBGColor(obj
, color
) {
115 var theObj
= getObject(obj
);
118 theObj
.bgColor
= color
;
120 theObj
.backgroundColor
= color
;
125 // Set the visibility of an object to visible
127 var theObj
= getObject(obj
);
129 theObj
.visibility
= "visible";
133 // Set the visibility of an object to hidden
135 var theObj
= getObject(obj
);
137 theObj
.visibility
= "hidden";
141 // Retrieve the x coordinate of a positionable object
142 function getObjectLeft(obj
) {
143 var elem
= getRawObject(obj
);
145 if (document
.defaultView
) {
146 var style
= document
.defaultView
;
147 var cssDecl
= style
.getComputedStyle(elem
, "");
148 result
= cssDecl
.getPropertyValue("left");
149 } else if (elem
.currentStyle
) {
150 result
= elem
.currentStyle
.left
;
151 } else if (elem
.style
) {
152 result
= elem
.style
.left
;
156 return parseInt(result
);
159 // Retrieve the y coordinate of a positionable object
160 function getObjectTop(obj
) {
161 var elem
= getRawObject(obj
);
163 if (elem
.offsetTop
) {
164 result
= elem
.offsetTop
;
165 } else if (document
.defaultView
) {
166 var style
= document
.defaultView
;
167 var cssDecl
= style
.getComputedStyle(elem
, "");
168 result
= cssDecl
.getPropertyValue("top");
169 } else if (elem
.currentStyle
) {
170 result
= elem
.currentStyle
.top
;
171 } else if (elem
.style
) {
172 result
= elem
.style
.top
;
176 return parseInt(result
);
179 // Retrieve the rendered width of an element
180 function getObjectWidth(obj
) {
181 var elem
= getRawObject(obj
);
183 if (elem
.offsetWidth
) {
184 result
= elem
.offsetWidth
;
185 } else if (elem
.clip
&& elem
.clip
.width
) {
186 result
= elem
.clip
.width
;
187 } else if (elem
.style
&& elem
.style
.pixelWidth
) {
188 result
= elem
.style
.pixelWidth
;
190 return parseInt(result
);
193 // Retrieve the rendered height of an element
194 function getObjectHeight(obj
) {
195 var elem
= getRawObject(obj
);
197 if (elem
.offsetHeight
) {
198 result
= elem
.offsetHeight
;
199 } else if (elem
.clip
&& elem
.clip
.height
) {
200 result
= elem
.clip
.height
;
201 } else if (elem
.style
&& elem
.style
.pixelHeight
) {
202 result
= elem
.style
.pixelHeight
;
204 return parseInt(result
);
208 // Return the available content width space in browser window
209 function getInsideWindowWidth() {
210 if (window
.innerWidth
) {
211 return window
.innerWidth
;
212 } else if (isIE6CSS
) {
213 // measure the html element's clientWidth
214 return document
.body
.parentElement
.clientWidth
;
215 } else if (document
.body
&& document
.body
.clientWidth
) {
216 return document
.body
.clientWidth
;
220 // Return the available content height space in browser window
221 function getInsideWindowHeight() {
222 if (window
.innerHeight
) {
223 return window
.innerHeight
;
224 } else if (isIE6CSS
) {
225 // measure the html element's clientHeight
226 return document
.body
.parentElement
.clientHeight
;
227 } else if (document
.body
&& document
.body
.clientHeight
) {
228 return document
.body
.clientHeight
;