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
);
29 //registerStartupFunction(initDHTMLAPI)
31 // Seek nested NN4 layer from string name
32 function seekLayer(doc
, name
) {
34 for (var i
= 0; i
< doc
.layers
.length
; i
++) {
35 if (doc
.layers
[i
].name
== name
) {
36 theObj
= doc
.layers
[i
];
39 // dive into nested layers if necessary
40 if (doc
.layers
[i
].document
.layers
.length
> 0) {
41 theObj
= seekLayer(document
.layers
[i
].document
, name
);
47 // Convert object name string or object reference
48 // into a valid element object reference
49 function getRawObject(obj
) {
51 if (typeof obj
== "string") {
53 theObj
= document
.getElementById(obj
);
55 theObj
= document
.all(obj
);
57 theObj
= seekLayer(document
, obj
);
60 // pass through object reference
66 // Convert object name string or object reference
67 // into a valid style (or NN4 layer) reference
68 function getObject(obj
) {
69 var theObj
= getRawObject(obj
);
70 if (theObj
&& isCSS
) {
71 theObj
= theObj
.style
;
76 // Position an object at a specific pixel coordinate
77 function shiftTo(obj
, x
, y
) {
78 var theObj
= getObject(obj
);
81 // equalize incorrect numeric value type
82 var units
= (typeof theObj
.left
== "string") ? "px" : 0
83 theObj
.left
= x
+ units
;
84 theObj
.top
= y
+ units
;
91 // Move an object by x and/or y pixels
92 function shiftBy(obj
, deltaX
, deltaY
) {
93 var theObj
= getObject(obj
);
96 // equalize incorrect numeric value type
97 var units
= (typeof theObj
.left
== "string") ? "px" : 0
98 theObj
.left
= getObjectLeft(obj
) + deltaX
+ units
;
99 theObj
.top
= getObjectTop(obj
) + deltaY
+ units
;
101 theObj
.moveBy(deltaX
, deltaY
);
106 // Set the z-order of an object
107 function setZIndex(obj
, zOrder
) {
108 var theObj
= getObject(obj
);
110 theObj
.zIndex
= zOrder
;
114 // Set the background color of an object
115 function setBGColor(obj
, color
) {
116 var theObj
= getObject(obj
);
119 theObj
.bgColor
= color
;
121 theObj
.backgroundColor
= color
;
126 // Set the visibility of an object to visible
128 var theObj
= getObject(obj
);
130 theObj
.visibility
= "visible";
134 // Set the visibility of an object to hidden
136 var theObj
= getObject(obj
);
138 theObj
.visibility
= "hidden";
142 // Retrieve the x coordinate of a positionable object
143 function getObjectLeft(obj
) {
144 var elem
= getRawObject(obj
);
146 if (document
.defaultView
) {
147 var style
= document
.defaultView
;
148 var cssDecl
= style
.getComputedStyle(elem
, "");
149 result
= cssDecl
.getPropertyValue("left");
150 } else if (elem
.currentStyle
) {
151 result
= elem
.currentStyle
.left
;
152 } else if (elem
.style
) {
153 result
= elem
.style
.left
;
157 return parseInt(result
);
160 // Retrieve the y coordinate of a positionable object
161 function getObjectTop(obj
) {
162 var elem
= getRawObject(obj
);
164 if (elem
.offsetTop
) {
165 result
= elem
.offsetTop
;
166 } else if (document
.defaultView
) {
167 var style
= document
.defaultView
;
168 var cssDecl
= style
.getComputedStyle(elem
, "");
169 result
= cssDecl
.getPropertyValue("top");
170 } else if (elem
.currentStyle
) {
171 result
= elem
.currentStyle
.top
;
172 } else if (elem
.style
) {
173 result
= elem
.style
.top
;
177 return parseInt(result
);
180 // Retrieve the rendered width of an element
181 function getObjectWidth(obj
) {
182 var elem
= getRawObject(obj
);
184 if (elem
.offsetWidth
) {
185 result
= elem
.offsetWidth
;
186 } else if (elem
.clip
&& elem
.clip
.width
) {
187 result
= elem
.clip
.width
;
188 } else if (elem
.style
&& elem
.style
.pixelWidth
) {
189 result
= elem
.style
.pixelWidth
;
191 return parseInt(result
);
194 // Retrieve the rendered height of an element
195 function getObjectHeight(obj
) {
196 var elem
= getRawObject(obj
);
198 if (elem
.offsetHeight
) {
199 result
= elem
.offsetHeight
;
200 } else if (elem
.clip
&& elem
.clip
.height
) {
201 result
= elem
.clip
.height
;
202 } else if (elem
.style
&& elem
.style
.pixelHeight
) {
203 result
= elem
.style
.pixelHeight
;
205 return parseInt(result
);
209 // Return the available content width space in browser window
210 function getInsideWindowWidth() {
211 if (window
.innerWidth
) {
212 return window
.innerWidth
;
213 } else if (isIE6CSS
) {
214 // measure the html element's clientWidth
215 return document
.body
.parentElement
.clientWidth
216 } else if (document
.body
&& document
.body
.clientWidth
) {
217 return document
.body
.clientWidth
;
221 // Return the available content height space in browser window
222 function getInsideWindowHeight() {
223 if (window
.innerHeight
) {
224 return window
.innerHeight
;
225 } else if (isIE6CSS
) {
226 // measure the html element's clientHeight
227 return document
.body
.parentElement
.clientHeight
228 } else if (document
.body
&& document
.body
.clientHeight
) {
229 return document
.body
.clientHeight
;