Vivian Crap

There is a bug in IE (version 6 and 7) in which the clarity between window.onresize and body.onresize is muddied. This can cause quite a problem for developers and even render the client’s browser unresponsive (throttling the CPU to near 100%) if you’re not very careful. IE fires the onresize multiple times while Firefox only fires it once after the browser has completed resizing.

• Solution One: setTimeout()

          				var elements = {"wrapper": null, "topHeader": null, "bottomFooter": null, "leftSide": null, "rightSide": null, "content": null};
          				var properties = ["clientWidth", "clientHeight", "offsetWidth", "offsetHeight"];
          				var resizeTimeout = null;
          				var onloadHandler = function() {
          					for (var name in elements)
          						elements[name] = document.getElementById(name);
          					onresizeHandler();
          				};
          				var onresizeHandler = function() {
          					if (resizeTimeout) clearTimeout(resizeTimeout);
          					resizeTimeout = setTimeout(function(){
          						var height = GEOMETRY.getViewportHeight() - elements.topHeader.offsetHeight - elements.bottomFooter.offsetHeight;
          						height -= parseInt(CSS.get(elements.topHeader, "margin-top"), 10) - parseInt(CSS.get(elements.topHeader, "margin-bottom"), 10) - parseInt(CSS.get(elements.bottomFooter, "margin-top"), 10) - parseInt(CSS.get(elements.bottomFooter, "margin-bottom"), 10);
          						CSS.set(elements.leftSide, {"height": height});
          						CSS.set(elements.rightSide, {"height": height});
          						CSS.set(elements.content, {"height": height});
          					}, 400);
          				};
          				GENERIC.addEvent(window, "load", onloadHandler);
          				GENERIC.addEvent(window, "resize", onresizeHandler);
          			

          				<div id="wrapper" class="wrapper">
          					<div id="topHeader" class="top-header">Header</div>
          					<div id="leftSide" class="side-bar align-left">Side Bar</div>
          					<div id="rightSide" class="side-bar align-right">Side Bar</div>
          					<div id="content" class="content">Content</div>
          					<div id="bottomFooter" class="bottom-footer">Footer</div>
          				</div>
          			

ViewDemo

• Solution Two: setInterval()

          				var elements = {"wrapper": null, "topHeader": null, "bottomFooter": null, "leftSide": null, "rightSide": null, "content": null};
          				var properties = ["clientWidth", "clientHeight", "offsetWidth", "offsetHeight"];
          				var initHeight = 0;
          				var resizeInterval = null;
          				var onloadHandler = function() {
          					for (var name in elements)
          						elements[name] = document.getElementById(name);
          					if (resizeInterval) clearInterval(resizeInterval);
          					resizeInterval = setInterval(function(){
          						onresizeHandler();
          					}, 100);
          				};
          				var onresizeHandler = function() {
          					var height = GEOMETRY.getViewportHeight() - elements.topHeader.offsetHeight - elements.bottomFooter.offsetHeight;
          					height -= parseInt(CSS.get(elements.topHeader, "margin-top"), 10) - parseInt(CSS.get(elements.topHeader, "margin-bottom"), 10) - parseInt(CSS.get(elements.bottomFooter, "margin-top"), 10) - parseInt(CSS.get(elements.bottomFooter, "margin-bottom"), 10);
          					if (initHeight != height)
          						CSS.set(elements.leftSide, {"height": height});
          						CSS.set(elements.rightSide, {"height": height});
          						CSS.set(elements.content, {"height": height});
          						initHeight = height;
          					}
          				};
          				GENERIC.addEvent(window, "load", onloadHandler);
          			

          				<div id="wrapper" class="wrapper">
          					<div id="topHeader" class="top-header">Header</div>
          					<div id="leftSide" class="side-bar align-left">Side Bar</div>
          					<div id="rightSide" class="side-bar align-right">Side Bar</div>
          					<div id="content" class="content">Content</div>
          					<div id="bottomFooter" class="bottom-footer">Footer</div>
          				</div>
          			

ViewDemo

• Is it possible to have .NET chart auto-resize to fill area on a page?
• Beat the IE Resize Bug
• window.onresize 連續觸發的問題

The W3C standard API for determining the computed style of an element is the getComputedStyle() method of the Window object. The first argument to this method is the element whose computed style is desired. The second argument is any CSS pseudoelement, such as “:before” or “:after” whose style is desired. In the Mozilla and Firefox implementation of this method, the second argument is required and may not be omitted. As a result, you’ll usually see getComputedStyle() invoked with null as its second argument.

IE provides a simpler alternative: every HTML element has a currentStyle property that holds its computed style.

          			var CSS =  {
						getStyle: function(element) {
							if (!element) return;
							if (typeof element == "string") element = document.getElementById(element);
							if (element.currentStyle) // For IE
								return element.currentStyle;
							else if (document.defaultView && document.defaultView.getComputedStyle) // For Modern Browsers
								return document.defaultView.getComputedStyle(element, null);
							else
								return element.style;
						}
          			};
          		

These two approaches frequently require different ways of referring to the style properties. In the case of the IE currentStyle object, references are made via the same object model syntax as is used for getting and setting style values. Therefore, hyphenated CSS property names must be referenced via the intercapitalization system (e.g., margin-left becomes marginLeft). But the property name for the W3C DOM getPropertyValue() method must be in the CSS property format (e.g., margin-left is margin-left).

Also be aware that for some CSS properties, different browser versions may return different value types-especially in colors that are specified by CSS syntax other than rgb(r, g, b). For example, if you set the color with a plain-language color name (e.g., orange), the value returned from the browsers may be in a different format. For the most part, if you specify colors in rgb(r, g, b) format, you’ll get that back.

CSS values consisting of length measurements typically contain units (pixels, points, ems, and so on). If you tend to utilize the value of a style property for any math, such as adding five pixels to the left edge of a positioned element, be sure to extract the numeric portion of sorting values that include units. Use the parseInt() function for integers and the parseFloat() function for numeric values that may have digits to the right of the decimal (e.g., 0.5em).

Once you assign a value to a property of an element’s style object, the value can be read subsequently through the style property. But for consistency’s sake, you can continue to read a value the getPropertyValue() method and currentStyle object because it returns the effective value applied to the element at any instant.

          			var CSS =  {
						get: function(element, name) {
							if (!element) return;
							if (typeof element == "string") element = document.getElementById(element);
							// Convert "background-color" to "backgroundColor"
							var camelCase = name.replace(/\-(\w)/g, function(all, letter) {
								return letter.toUpperCase();
							});
							if (element.currentStyle) { // For IE
								return element.currentStyle[name] || element.currentStyle[camelCase];
							} else if (document.defaultView && document.defaultView.getComputedStyle) { // // For Modern Browsers
								name = name.replace(/([A-Z])/g, "-$1").toLowerCase();
								return document.defaultView.getComputedStyle(element, null).getPropertyValue(name);
							} else {
								return element.style[name] || element.style[camelCase];
							}
						},
						set: function(element, properties) {
							if (!element) return;
							if (typeof element == "string") element = document.getElementById(element);
							for (var name in properties) {
								// Convert "background-color" to "backgroundColor"
								var camelCase = name.replace(/\-(\w)/g, function(all, letter) {
									return letter.toUpperCase();
								});
								if (typeof properties[name] == "number") element.style[camelCase] = (parseInt(properties[name], 10) || 0) + "px";
								if (typeof properties[name] == "string") element.style[camelCase] = properties[name];
							}
						}
          			};
          		

• Javascript Get Styles
• Reading Effective Style Sheet Property Values

Preparation

Preparation

Preparation

Preparation