Preparation

Preparation

Preparation

HTML

          			<div id="wrapperDiv" class="wrapper">
          				<div class="top-left"></div>
          				<div class="top-right"></div>
          				<div class="top-center"><div class="hack-ie6"></div></div>
          				<div id="bodyCenterDiv" class="body-center">
          					<div class="contents">contents right here</div>
          				</div>
          				<div class="bottom-left"></div>
          				<div class="bottom-right"></div>
          				<div class="bottom-center"><div class="hack-ie6"></div></div>
          			</div>
          		

Stylesheet

          			.wrapper {
          				width: 500px;
          				margin: 10px auto;
          			}
          			.wrapper .top-left, .wrapper .top-center, .wrapper .top-right,
          			.wrapper .bottom-left, .wrapper .bottom-center, .wrapper .bottom-right {
          				background: transparent url(../images/png8.png) left top scroll no-repeat;
          				overflow: hidden;
          			}
          			.wrapper .top-left {
          				width: 15px;
          				height: 46px;
          				background-position: left top;
          				float: left;
          			}
          			.wrapper .top-center {
          				height: 46px;
          				background-position: -15px top;
          				_float: left;
          			}
          			.wrapper .top-right {
          				width: 15px;
          				height: 46px;
          				background-position: right top;
          				float: right;
          			}
          			.wrapper .body-center {
          				width: 496px;
          				background-color: #fff;
          				border-left: 2px solid #333;
          				border-right: 2px solid #333;
          			}
          			.wrapper .bottom-left {
          				width: 15px;
          				height: 31px;
          				background-position: left -46px;
          				float: left;
          			}
          			.wrapper .bottom-center {
          				height: 31px;
          				background-position: -15px -46px;
          				_float: left;
          			}
          			.wrapper .bottom-right {
          				width: 15px;
          				height: 31px;
          				background-position: right -46px;
          				float: right;
          			}
          			*html .wrapper .hack-ie6 {
          				width: 100%;
          				overflow: hidden;
          			}
          		

HTML

          			<div id="wrapperDiv" class="wrapper">
          				<div class="top-left"></div>
          				<div class="top-right"></div>
          				<div class="top-center"><div class="hack-ie6"></div></div>
          				<div class="body-left">
          					<div class="body-right">
          						<div id="bodyLeftDiv" class="body-left-hack-ie6"></div>
          						<div id="bodyRightDiv" class="body-right-hack-ie6"></div>
          						<div id="bodyCenterDiv" class="body-center">
          							<div class="contents">contents right here</div>
          						</div>
          					</div>
          				</div>
          				<div class="bottom-left"></div>
          				<div class="bottom-right"></div>
          				<div class="bottom-center"><div class="hack-ie6"></div></div>
          			</div>
          		

Stylesheet

          			.wrapper {
          				width: 500px;
          				margin: 10px auto;
          			}
          			.wrapper .top-left {
          				width: 40px;
          				height: 40px;
          				background: transparent url(../images/top-left-png24.png) left top scroll no-repeat;
          				float: left;
          			}
          			.wrapper .top-center {
          				height: 40px;
          				background: transparent url(../images/top-center-png24.png) left top scroll repeat-x;
          				_float: left;
          				overflow: hidden;
          			}
          			.wrapper .top-right {
          				width: 40px;
          				height: 40px;
          				background: transparent url(../images/top-right-png24.png) left top scroll no-repeat;
          				float: right;
          			}
          			.wrapper .body-left {
          				width: 100%;
          				background: transparent url(../images/body-left-png24.png) left top scroll repeat-y;
          			}
          			.wrapper .body-center {
          				background-color: #e9f2f5;
          				margin: 0 40px;
          			}
          			.wrapper .body-right {
          				width: 100%;
          				background: transparent url(../images/body-right-png24.png) 100% top scroll repeat-y;
          			}
          			.wrapper .bottom-left {
          				width: 40px;
          				height: 40px;
          				background: transparent url(../images/bottom-left-png24.png) left top scroll no-repeat;
          				float: left;
          			}
          			.wrapper .bottom-center {
          				height: 40px;
          				background: transparent url(../images/bottom-center-png24.png) left top scroll repeat-x;
          				_float: left;
          				overflow: hidden;
          			}
          			.wrapper .bottom-right {
          				width: 40px;
          				height: 40px;
          				background: transparent url(../images/bottom-right-png24.png) left top scroll no-repeat;
          				float: right;
          			}
          		

Stylesheet For IE 6

          			*html .wrapper .hack-ie6 {
          				width: 100%;
          			}
          			*html .wrapper .top-left {
          				background: none;
          				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top-left-png24.png', sizingMethod='image');
          			}
          			*html .wrapper .top-center {
          				background: none;
          				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top-center-png24.png', sizingMethod='scale');
          			}
          			*html .wrapper .top-right {
          				background: none;
          				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top-right-png24.png', sizingMethod='image');
          			}
          			*html .wrapper .body-left, *html .wrapper .body-right {
          				background: none;
          			}
          			*html .wrapper .body-center {
          				width: expression(document.getElementById('wrapperDiv').offsetWidth - document.getElementById('bodyLeftDiv').offsetWidth - document.getElementById('bodyRightDiv').offsetWidth + "px");
          				margin: 0 40px
          			}
          			*html .wrapper .body-left-hack-ie6 {
          				width: 40px;
          				height: expression(document.getElementById('bodyCenterDiv').offsetHeight + "px");
          				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body-left-png24.png', sizingMethod='scale');
          				margin: 0 -40px 0 0
          				float:left
          			}
          			*html .wrapper .body-right-hack-ie6 {
          				width: 40px;
          				height: expression(document.getElementById('bodyCenterDiv').offsetHeight + "px");
          				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body-right-png24.png', sizingMethod='scale');
          				margin: 0 0 0 -40px
          				float:right
          			}
          			*html .wrapper .bottom-left {
          				background: none;
          				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom-left-png24.png', sizingMethod='image');
          			}
          			*html .wrapper .bottom-center {
          				background: none;
          				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom-center-png24.png', sizingMethod='scale');
          			}
          			*html .wrapper .bottom-right {
          				background: none;
          				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom-right-png24.png', sizingMethod='image');
          			}
          		

• Liquid Round Corners
• PNG Drop Shadows
• Four Sided PNG Drop Shadows
• Get Started With CSS 3
• Mountaintop Corners

Preparation

Preparation

Preparation

Preparation

The z-index property determines the stack level of an HTML element. The stack level refers to the element’s position on the Z axis (as opposed to the X axis or Y axis). A higher z-index value means the element will be closer to the top of the stacking order. This stacking order runs perpendicular ot the display, or viewport.

In an HTML page, the natural stacking order (i.e. the order of elements on the Z axis) is determined by a number of factors. Below is a list showing the order that iterms fit into a stacking context, starting with the bottom of the stack. This list assumes none of the items has z-index applied:

• Background and borders of the element that establish stacking context.
• Elements with negative stacking contexts, in order of appearance.
• Non-positioned, non-floated, block-level elements, in order of appearance.
• Non-positioned, floated elements, in order of appearances.
• Inline elements, in order of appearance.
• Positioned elements, in order of appearance.

The elements above do not have z-index values set; their stacking order is the natural, or default, order. The overlaps that occur are due to the negative margins.

Although z-index is not a difficult proerpty to understand, due to false assumptions it can cause confusion for beginning developers. This confusion occurs because z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.

The z-index property can affect the stack order of both block-level and inline elements, and is declared by a positive or negative integer value, or a vluae of auto. A value of auto gives the element the same stack order as its parent.

• The Z-Index CSS Property: A Comprehensive Look

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

• Location-based

Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). In the example below (from SitePoint), each text link is for a page that is one level higher than the one on its right.



• Attribute-based

Attribute-based breadcrumb trails display the attributes of a particular page. For example, in Newegg, breadcrumb trails show the attributes of the items displayed on a particular page:



This page displays all computer cases that have the attributes of being manufactured by Lian Li and having a MicroATX Mini Tower form factor.

• Path-based

Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

• Convenient for users

Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

• Reduces clicks or actions to return to higher-level pages

Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

• Doesn’t usually hog screen space

Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

• Reduces bounce rates

Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate.

• Using breadcrumbs when you don’t need to

In the below example, Slicethepie risks overwhelming users with too many navigation options. The (1) primary navigation, (2) breadcrumb trail and (3) secondary navigation are very close together. The breadcrumb trail in this application offers users no added convenience because the secondary navigation for lower-level pages sits right below it. Additionally, clicking on the second-level link in the breadcrumb trail (”Music”) takes you back to the first tab (”Listen”), which mistakenly suggests that the first tab is on a higher level than the other two (”Search” and “Artist hall of fame”).



• Using breadcrumb trails as primary navigation



In the above example, mefeedia does not offer a primary navigation menu for viewing videos. Though there is text link navigation in the footer section, there’s no navigation menu in the body of the pages, making it hard to navigate to other sections of the website.



If you arrive on a video page directly — say, for example, through a Google search result — the only navigation option you may have is the breadcrumb trail. Or if you’ve already been browsing a website’s pages and reach a page that does not display the primary navigation menu, you will have to hit the “Back” button in your browser to access the main menu.

• Using breadcrumbs when pages have multiple categories

Breadcrumb trails have a linear structure, so using them will be difficult if your pages can’t be classified into neat categories. Deciding whether to use breadcrumbs largely depends on how you’ve designed your website hierarchy. When a lower-level page is (or can be put) in more than one parent category, breadcrumb trails are ineffective, inaccurate and confusing to the user.

• What should be used to separate link items?

The commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.



Other symbols used are arrows pointing to the right, right angle quotation marks (») and slashes (/).



The choice depends on the aesthetics of the website and the type of breadcrumb used. For example, for path-based breadcrumbs in which the links do not necessarily have a hierarchical relationship to each other, using a “greater than” symbol may not convey their relationship accurately.

• How big should it be?

You don’t want your breadcrumbs to dominate the page. A breadcrumb trail functions merely as an aid to users (a convenience); its size should convey this to users and thus should at least be smaller, or less prominent, than the primary navigation menu. A good rule of thumb to follow when sizing your breadcrumb trail is that it shouldn’t be the first item that grabs the user’s attention when arriving on a page.



• Where should breadcrumbs be located?

Breadcrumb trails are usually displayed in the top half of the page, below the primary navigation menu if a horizontal menu layout is used.

Nestle uses a breadcrumb trail whose text is significantly smaller than the text on the rest of the page, effectively making it unobtrusive.

Overstock.com uses the standard “greater than” symbol for its attribute-based breadcrumb trail. Checkboxes for product attributes are used so that users can uncheck them to filter them out.

Right-pointing Triangles

Slashes

Right-angled Quotation Mark

Right-pointing Arrows

Semi-colons (:)

Statement Tracker uses a breadcrumb trail to indicate the steps involved in registering for an account, as well as a progress indicator.

Flickr uses a breadcrumb trail to indicate the number of sections in the Flickr tour.

MarketWatch has a fly-out sub-navigation menu that appears when you hover over a breadcrumb link.

Profoto has a unique breadcrumb trail: clicking on a breadcrumb link opens an area below it that gives users additional attributes to select from.

Cranfield University has a similar fly-out breadcrumb scheme, which serves a dual function: as an location indicator for the user and as a robust and interactive secondary navigation scheme.

Lonely Planet also has a fly-out breadcrumb trail in which you can change attributes.

Clicking on a breadcrumb link takes you to that item’s page, while clicking on the downward-pointing arrow opens additional options.

MSDN has a breadcrumb trail that opens a scrollable sub-navigation list when the user hovers over a link.

Wowhead has a multi-level sub-navigation scheme.

Delicious lets you remove items in the breadcrumb trail of keyword tags to help you quickly find bookmarks.

Booreiland uses a breadcrumb-style navigation scheme for its primary menu, allowing visitors to quickly understand what they’re currently viewing.

• Breadcrumbs in Web Design: Examples and Best Practices

• Provide large clickable areas
• Don’t use underlines
• Identify the current page
• Space out page links
• Provide Previous and Next links
• Use First and Last links (where applicable)
• Put First and Last links on the outside

• Navigation options are invisible

The color of the links on Hugg.com has a very low contrast with the white background. The hover-effect isn’t provided.



• Pagination isn’t intuitive

Helium.com is a perfect example for this mistake. Take a look at the screenshot below: what do the arrows stand for? For the page you’ve already visited or for the page you are currently on? And why does the link to the second page have a white background color? Why do the arrows have different colors? This is unintuitive.



Unintuitive designs result from the lack of structure, hierarchy and well thought-out design decisions. “Blank” pagination is as unintuitive as overcrowded design solution.



Not spaced out page links are harder to scan and to navigate through. Make-Believe.org as an example. The design is unintuitive.

Slider-based Pagination Menu

Dirty.ru uses a slider-based pagination menu; users can drag it to get more available options, that means links to the older pages of the site.

Further Navigation Options

Erweiterungen.de, the German version of the official Firefox extensions web-site, provides more navigation options once the visitor clicks on the “…”-button.

In some cases users can provide the number of the page they’d like to see manually, via the input-element. This is common for paginations with the limited number of options — e.g. in these designs you can’t jump to the last page if you’d like to.

• Pagination Gallery: Examples and Good Practices
• Some Styles for Your Pagination

Vintage/Retro Styles

Handwritten Notes and Paper Clips

Grungy

Splatter Ink

Watercolor

Collage

Sketches and Handwritten Fonts

Big Fonts

Script Fonts

Wood Pattern

Zig Zag Pattern

• 2008 Design Trends
• Grunge Style In Modern Web Design
• The Secrets Of Grunge Design
• Hand-Drawing Style In Modern Web Design
• Hand-Drawing Style In Modern Web Design – Volume 2
• Retro and Vintage In Modern Web Design
• 35 Beautiful Vintage and Retro Photoshop Tutorials

• Creating an XMLHttpRequest object.
• Specifying and submitting your HTTP request to a web server.
• Synchronously or asynchronously retrieving the server’s response.

          			function createHttpRequest() {
          				var httpRequest = null;
          					if (window.ActiveXObject) // For IE6 and below
          						httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
          					else // For IE7 and Modern Browsers
          						httpRequest = new XMLHttpRequest();
          				return httpRequest;
          			}
          		

          			XMLHttpRequest.open("GET", url, true);
          		

If you pass false as the third argument to open(), the send() method is synchronous: it blocks and does not return until the server’s response has arrived. Asynchronous responses are generally preferred.

HTTP GET

          			var xmlHttpRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
          			xmlHttpRequest.onreadystatechange = function() {

          			}
          			xmlHttpRequest.open("GET", "query.php?username=vivian", false);
          			xmlHttpRequest.send(null);
          		

HTTP POST

          			var xmlHttpRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
          			xmlHttpRequest.onreadystatechange = function() {

          			}
          			xmlHttpRequest.open("POST", "query.php", false);
          			xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          			xmlHttpRequest.send("username=vivian");
          		

With POST requests, data is passed to the server in the body of the request, rather than encoding it into the URL itself. Since request parameters are encoded into the URL of a GET request, the GET method is suitable only when the request has no side effects on the server — that is, when repeated GET requests for the same URL with the same parameters can be expected to return the same result. When there are side effects to a request (such as when the server stores some of the parameters in a database), a POST request should be used instead.

Escape the Data

          			var HTTPUTILITY = {
          				encodeFormData: function(data) {
          					if (!data) return;
          					var pairs = [];
          					var regexp = /%20/g; // A regular expression to match an encoded space.
          					for (var name in data) {
          						// Create a name/value pair, but encode name and value first. The global function encodeURIComponent does almost what we want,
          						// but it encodes spaces as %20 instead of as "+". We have to fix that with String.replace().
          						var value = data[name].toString();
          						var pair = encodeURIComponent(name).replace(regexp, "+") + "=" + encodeURIComponent(value).replace(regexp, "+");
          						pairs.push(pair);
          					}
          					return pairs.join("&"); // Concatenate all the name/value pairs, separating them with &.
          				}
          			};
          		

The POST method uses the AJAX.encodeFormData() function to convert the properties of an object to a string form that can be used as the body of a POST request. This string is then passed to the XMLHttpRequest.send() method and becomes the body of the request. (The string returned by AJAX.encodeFormData() can also be appended to a GET URL; just use a quest-mark character to separate the URL from the data.)

          			var xmlHttpRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
          			xmlHttpRequest.onreadystatechange = function() {
          				if (xmlHttpRequest.readyState != 4) {
          					// Start to progress
          				} else { // The server's response is complete.
          					if (xmlHttpRequest.status == 0 || xmlHttpRequest.status == 200)
          						callback(xmlHttpRequest.responseText)
          					else
          						// Error
          				}
          			}
          			xmlHttpRequest.open("POST", "query.php", false);
          			xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          			xmlHttpRequest.send("username=vivian");
          		

Notes on readyState 3

Data is being received from the server.readyState 3 differs somewhat in Firefox and Internet Explorer. Firefox invokes the onreadystatechange handler multiple times in readyState 3, to provide download progress feedback. A script might use these multiple invocations to display a progress indicator to the user. Internet Explorer, on the other hand, interprets the event handler name strictly, and invokes it only when the readyState value actualy changes. This means that it is invoked only once for readyState 3, no matter how large downloaded document is.

          			var timer = null;
          			var timeout = 1000;
          			var xmlHttpRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
          			if (timeout) {
          				if (timer) clearTimeout(timer);
          				timer = setTimeout(function(){
          					xmlHttpRequest.abort();
          				}, timeout);
          			}
          			xmlHttpRequest.onreadystatechange = function() {
          				if (xmlHttpRequest.readyState != 4) {
          					// Start to progress
          				} else { // The server's response is complete.
          					if (timer) clearTimeout(timer);
          					if (xmlHttpRequest.status == 0 || xmlHttpRequest.status == 200)
          						callback(xmlHttpRequest.responseText)
          					else
          						// Error
          				}
          			}
          			xmlHttpRequest.open("POST", "query.php", false);
          			xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          			xmlHttpRequest.send("username=vivian");
          		

By appending the julian day number to the end of the URL(?timestamp=123412341234), we effectively make each call unique and that means Internet Explorer will not cache the Ajax call as it is wont to do.

• The XMLHttpRequest Object
• XMLHttpRequest Level 2
• Access Control
• The Ultimate AJAX Object

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