Welcome to the Internet Explorer 8 New Feature Demo Site

Welcome to the Internet Explorer 8 Developer Demonstration Web site. This site is designed to provide website developers and designers a single resource for seeing the new developer features and functionality in action. Internet Explorer 8 includes a host of new features and enhancements—all driven from real-world scenarios and customer feedback—that puts the Web at your service. This site provides fully functioning demonstrations and code samples to demonstrate the new and enhanced features in Internet Explorer 8.

Customize Your Rental

Pick Up

Date*

Time*
AM PM

Drop Off

Date*

Time*
AM PM

Location

Airport*

City, State

* required fields

Compact

Mid-Size

SUV

Convertable

Car

Pick Up

Total price:

Drop Off

Dates & Location Car Type Confirmation

Vertical Text

Xhtml

(Copy Code)

<div>
    <h2>Customize Your Rental</h2>
</div>

CSS

(Copy Code)

#form-label h2 {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 0 6px;
    padding: 0;
    writing-mode: tb-rl;
    filter: flipv fliph;
}

Box-sizing Property

Xhtml

(Copy Code)

<div>
    <h2>Customize Your Rental</h2>
</div>

CSS

(Copy Code)

#form-label {
	float: left;
	padding-bottom: 10px;
	width: 31px;
	height: 304px;
	overflow: hidden;
	box-sizing: border-box;
	background: url(../../images/form-label-bg.gif) no-repeat;
}

DataURI Support

Xhtml

(Copy Code)

<img src="data:image/gif;base64,
        R0lGODlhoABVAOYAAO/v71tzh3OJnl96kGyIoWqDmSsvMczY6jU6O2SAloWGiBkdHkJIS67B2IuN
        jyInKNvj77rK4H1+gMnW6D1CRNXf7oCBg4OdtcbU57XF26e70pWXmXZ4eo+nvr/O45qcnU1TV3p7
        fXOMo5CSlEhNUcPR5aS3zFVqetLc62RnaW5wc1xgY7q7vHFzdVZaXIKXq+Pp73yYsoeiu76+wMHC
        w3mTq3KPqWpsbhEVFXR2eGd6i5WtxZyyy3SSrZytv6KjpZ6focvMzaqrrM7a7eTm6KGyw46fsbKz
        tMTExuvv732OnpanudHR0sjIyd3e4LW1tqSlp7CxsaanqLG/z9bX2Orr7L/M2rnE0be3t7i5uqio
        qa6vsHWCjq2trktcaMrU4c/Z5cbGx8fR3KGgoMDI0JujrLC5wqqzu6WqrqKste+ZWrOlla6Yg+/v
        y4Z6btu6m+/Nm55oTZeSjJmKf8Wup9TNvb+5sXRGQKmlpAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5
        BAAAAAAALAAAAACgAFUAAAf/gACCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp+goaKjpJsw
        EFVVEGCsYlavr2JiX2AoEDBJEERJpb2+jkmqEK5fERkRyMnKyx5WHs/PGGC0ENUAvL/ZnbkoGB4Z
        DeHiDRnlyB7GGR4YExju7BPx8gcTB/YHQ/TxGCX8rLfaAkaCMCGDhiI+lig08sKIwwsXjHTgYUKD
        xQYHl5iIUOJZiX7w5LVzJ7KevSFDUKC8VwGXwJeEYGA46KOITYQ1TSzR4MNERRM+GBrZwYOoBhMM
        i2SYYqJImjJlPmwY4cCBgqtYsVYdsWEDEChozpiZceWKlS9EYGqD4KEpQiNK/7hwaKHiRt0bJFys
        WKFCiRENDZC+2LGjA1EjKxRYkMAhRwu6Kh4/zpGDg+UQISRIsJB1K9cPY6AI2WKGhRO1pGROQfiC
        y2MOm686UJFCrwIJIVqkWJFChxGMLwzLkJFis2bMlpNTTs4Bs+bYCrY6GPEZyA8oUrR0iTKaDGpQ
        ECI0fZEjRHSvULocwQIlBV6sW7ZoAeIgx94XHpYQlnEihwXMIVhGmWSUhWDBdB+ktwF0DnzAHRQ/
        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
        J9oK+MRHPhjFKHwoytGOevSjIA0pSAMBADs=" alt="Compact Car" />

Fixed getElementById() and Get/setAttribute for interop

Javascript

(Copy Code)

var summaryCarPhoto = document.getElementById("carPhoto");
switch (formData.carType) {

    case "Compact":
	$("#carPhoto").attr("src", "images/cars/car3a-home.gif");
	$(".sum_totalPrice").html("$214");
	// updated setAttribute method is no longer case sensative (attribute is lower case in XHTML)
	summaryCarPhoto.setAttribute("Title", "Compact Rental Car");
	break;
    case "MidSize":
	$("#carPhoto").attr("src", "images/cars/car2a-home.gif");
	$(".sum_totalPrice").html("$234");
	summaryCarPhoto.setAttribute("Title", "Mid-size Rental Car");
	break;
    case "SUV":
	$("#carPhoto").attr("src", "images/cars/car1a-home.gif");
	$(".sum_totalPrice").html("$264");
	// updated setAttribute method is no longer case sensative (attribute is lower case in XHTML)
	summaryCarPhoto.setAttribute("Title", "SUV Rental Car");
	break;
    case "Convertable":
	$("#carPhoto").attr("src", "images/cars/car4a-home.gif");
	$(".sum_totalPrice").html("$314");
	// updated setAttribute method is no longer case sensative (attribute is lower case in XHTML)
	summaryCarPhoto.setAttribute("Title", "Convertable Rental Car");
	break;

}

Xhtml

(Copy Code)

<div class="column">
	<h3>Car</h3>
	<h4  class="sum_carType"></h4>
	<div class="column-bottom"><img src="images/cars/car1a-home.gif" id="carPhoto" alt="Rental Car" title="Rental Car" /></div>
</div>

<div id="promos">
	<img src="images/special-offer.png" name="carPhoto" alt="Special Offer" border="0" />
	<a href="car-gallery.html"><img src="images/car-gallery.png" alt="Car Gallery" border="0" /></a>
</div>

DOM Storage & Native JSON Support

Javascript

Saving data

(Copy Code)

function storeRentalForm() {
	var formData = {};

	// Get all the form fields except for those with type="submit"
	$("input:not([@type=submit])").each(function(i) {

		// If current field is NOT a radio button or check box we'll
		// just use its value. If current field IS a radio button or
		// check box only pull the checked value
		if (!$(this).hasClass("selection")) {
			formData[$(this).attr("name")] = $.trim($(this).val());
		}
		else {
			formData[$(this).attr("name")] = $.trim($("input[@name=" + $(this).attr("name") + "]:checked").val());
		}

	});

	// Because localStorage can only store string values
	// we can use IE8's built in JSON methods to convert
	// our formData object to a string
	formData = JSON.stringify(formData);
	localStorage.rentalForm = formData;
}

Loading data back into the form

(Copy Code)

function loadRentalForm() {

	if (localStorage.rentalForm) {

		var formData = {};

		// Because localStorage can only store string values
		// we can use IE8's built in JSON methods to convert
		// the saved JSON string back to an object
		formData = JSON.parse(localStorage.rentalForm);

		$.each(formData, function(index, value) {

			if (!$("input[@name=" + index + "]").hasClass("selection")) {
				$("input[@name=" + index + "]").val(value);
			}
			else
				$("input[@name=" + index + "][value=" + value + "]").attr("checked", true);

		});

	}

	return false;
}

Selectors API

Javascript

(Copy Code)

// We can use IE's querySelector method to select
// the price widget within the document by its ID
var priceWidget = document.querySelector('#priceWidget');

AJAX Navigation

Javascript

(Copy Code)

/**
* Traditional browser functionality for "Customize Your Rental" form
*/
function OnHashChange() {

	var hash = document.location.hash;

	if (hash && hash.length > 0) {

		// Get the current step after the # symbol
		var step = hash.substring(1, hash.length);

		switch (step) {

			case "DatesAndLocation":
				showStep1();
				break;
			case "CarType":
				showStep2();
				break;
			case "Confirmation":
				showStep3();
				break;
			default:
				showStep1();

		}

	}
}

Xhtml

(Copy Code)

<body onhashchange="OnHashChange();">

Cross Document Messaging (XDM)

Javascript

Parent Page

(Copy Code)

/**
* Price widget via Cross-document Messaging (XDM)
*/
function getRemoteQuotes() {

	var formData = {};

	// Because localStorage can only store string values
	// we can use IE8's built in JSON methods to convert
	// the saved JSON string back to an object
	formData = JSON.parse(localStorage.rentalForm);

	// We can use IE's querySelector method to select
	// the price widget within the document by its ID
	var priceWidget = document.querySelector('#priceWidget');

	// Post a cross-document message containing the type of car
	// for the quote comparison JSON service
	priceWidget.contentWindow.postMessage(formData.carType, "http://domain");
	showBox2();

}

iFrame

(Copy Code)

/**
* Listener for Cross-document Messaging (XDM)
*/
window.attachEvent('onmessage', receiver);
function receiver(e) {
	if (e.origin == 'http://domain') {
		data = remoteJsonRequest(e.data);
	}
}

Cross Domain Requests (XDomainRequest)

Javascript

(Copy Code)

/**
* XDomainRequest
*/
var xdr;
function remoteJsonRequest(postData) {

    // URL of remote JSON service the price widget will use
    // to obtain the quotes.
    var url = "http://www.ie7demos.com/powerofie-quotes/jsonService.asmx/jsonResponse";

    if (window.XDomainRequest) {
	xdr = new XDomainRequest();
	if (xdr) {

	    // Format our post data into a JSON string
	    var jsonPostData = '{"carType":"' + postData + '"}';

	    xdr.onerror = err;
	    xdr.ontimeout = timeo;
	    xdr.timeout = 10000;
	    xdr.onload = processRemoteData;

	    xdr.open("POST", url);
	    xdr.send(jsonPostData);
	}
	else {
	    alert('Failed to create');
	}
    }
    else {
	alert('XDR doesnt exist');
    }

}

function processRemoteData(quotes) {
    var responseData = {};

    // The example service returns an object as a JSON formatted string. We can
    // retrieve the response through the responseText property of the XDomainRequest
    // object we created.
    //
    // We can use IE8's built in JSON methods to convert the JSON string to an
    // object.
    //
    // Server response is formatted as: {"d","{Quotes object formatted as JSON string}"}
    responseData = JSON.parse(xdr.responseText);

    // The quotes we are interested in are available in the data property of the
    // object (data.d). Again, we can use IE8's built in JSON methods to convert the
    // JSON string to an object.
    quotes = JSON.parse(responseData.d);

    // Clear quote table before filling with latest quotes
    $("table#quotes").html(" ");

    // Add each company's quoted price to quote table
    $.each(quotes, function(index, value) {
	$("table#quotes").append("<tr><td>" + index + "</td><td class=\"cost\">" + value + "</td></tr>");
    });

}

function err() {
    $("table#quotes").html("<tr><td>An error occurred while attempting to connect to remote service. Please try again later.</td></tr>");
}

function timeo() {
    $("table#quotes").html("<tr><td>The remote service has timed out. Please try again later.</td></tr>");
}

DOM Storage & Native JSON Support

Javascript

(Copy Code)

function updateSummary() {

    if (localStorage.rentalForm) {

	var formData = {};

	// Because localStorage can only store string values
	// we can use IE8's built in JSON methods to convert
	// the saved JSON string back to an object
	formData = JSON.parse(localStorage.rentalForm);

	$.each(formData, function(index, value) {
	    $(".sum_" + index).html(value);
	});

	var summaryCarPhoto = document.getElementById("carPhoto");
	switch (formData.carType) {

	    case "Compact":
		$("#carPhoto").attr("src", "images/cars/car3a-home.gif");
		$(".sum_totalPrice").html("$214");
		// updated setAttribute method is no longer case sensative (attribute is lower case in XHTML)
		summaryCarPhoto.setAttribute("Title", "Compact Rental Car");
		break;
	    case "MidSize":
		$("#carPhoto").attr("src", "images/cars/car2a-home.gif");
		$(".sum_totalPrice").html("$234");
		summaryCarPhoto.setAttribute("Title", "Mid-size Rental Car");
		break;
	    case "SUV":
		$("#carPhoto").attr("src", "images/cars/car1a-home.gif");
		$(".sum_totalPrice").html("$264");
		// updated setAttribute method is no longer case sensative (attribute is lower case in XHTML)
		summaryCarPhoto.setAttribute("Title", "SUV Rental Car");
		break;
	    case "Convertable":
		$("#carPhoto").attr("src", "images/cars/car4a-home.gif");
		$(".sum_totalPrice").html("$314");
		// updated setAttribute method is no longer case sensative (attribute is lower case in XHTML)
		summaryCarPhoto.setAttribute("Title", "Convertable Rental Car");
		break;

	}

    }

    return false;

}

Xhtml

(Copy Code)

<div id="rental-summary">
	<div class="column">
		<h3>Car</h3>
		<h4  class="sum_carType"></h4>
		<div class="column-bottom"><img src="images/cars/car1a-home.gif" id="carPhoto" alt="Rental Car" title="Rental Car" /></div>
	</div>
	<div class="column">
		<h3>Pick Up</h3>
		<h4 class="sum_pickUpDate"></h4>
		<span class="sum_pickUpTime"></span> &nbsp; <span class="sum_pickUpAmPm"></span><br />
		<span class="sum_airport"></span><br />
		<span class="sum_location"></span>
		<div class="column-bottom"><h3>Total price: <span class="sum_totalPrice"></span></h3></div>
	</div>
	<div class="column">
		<h3>Drop Off</h3>
		<h4 class="sum_returnDate"></h4>
		<span class="sum_returnTime"></span> &nbsp; <span class="sum_returnAmPm"></span><br />
		<span class="sum_airport"></span><br />
		<span class="sum_location"></span>
	</div>
	<div class="buttons">
		<a href="#" id="open-price-widget"><img src="images/compare-price-button.gif" alt="Compare Prices" border="0" onclick="getRemoteQuotes();" /></a>
		<a href="rental-agreement.html"><img src="images/confirm-continue-button.gif" alt="Confirm And Continue" class="step3submit" border="0" /></a>
	</div>
</div>

Meta tag

Xhtml

(Copy Code)

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Mutable DOM Prototypes

Javascript

(Copy Code)

/**
* Mutable DOM Prototypes
*/
function checkRequired() {

    // We can find all required inputs by using the getElementsByClassName()
    // method we added to the document object's prototype.
    var requiredFields = document.getElementsByClassName('required');
    var validForm = true;


    // We can now iterate through our required inputs
    // and set whether or not they are valid through the
    // validInput parameter we've added to the element object's
    // prototype. By setting this value to false, the background
    // and border of the element is changed to alert the user.
    // When set to true, it is reset to its default value.
    for (i = 0; i < requiredFields.length; i++) {
        if (requiredFields[i].value.length == 0) {
            requiredFields[i].validInput = false;
            validForm = false;
        }
        else
            requiredFields[i].validInput = true;
    }

    if (validForm == true)
        return true;
    else
        return false;

}

// We define a new property 'validInput' on every HTML
// element by calling Object.defineProperty()
// and passing it the DOM object we'd like to modify,
// the property name we are adding, and the descriptor object
// that includes a get function and set function
Object.defineProperty(Element.prototype, "validInput", {
    get: function(valid) {
        if (valid == false)
            return "No";
        else
            return "Yes";
    },
    set: function(valid) {
        if (valid == false) {
            this.style.backgroundColor = "#FFDFDF";
            this.style.borderColor = "#999";
        }
        else {
            this.style.backgroundColor = "#fff";
            this.style.borderColor = "#aaa";
        }
    }
});

function _MS_HTML5_getElementsByClassName(classList) {
    var tokens = classList.split(" ");
    // Pre-fill the list with the results of the first token search.
    var staticNodeList = this.querySelectorAll("." + tokens[0]);
    // Start the iterator at 1 because the first match is already collected.
    for (var i = 1; i < tokens.length; i++) {
        // Search for each token independently
        var tempList = this.querySelectorAll("." + tokens[i]);
        // Collects the "keepers" between loop iterations
        var resultList = new Array();
        for (var finalIter = 0; finalIter < staticNodeList.length; finalIter++) {
            var found = false;
            for (var tempIter = 0; tempIter < tempList.length; tempIter++) {
                if (staticNodeList[finalIter] == tempList[tempIter]) {
                    found = true;
                    break; // Early termination if found
                }
            }
            if (found) {
                // This element was in both lists, it should be perpetuated
                // into the next round of token checking...
                resultList.push(staticNodeList[finalIter]);
            }
        }
        staticNodeList = resultList; // Copy the AND results for the next token
    }
    return staticNodeList;
}
HTMLDocument.prototype.getElementsByClassName = _MS_HTML5_getElementsByClassName;
Element.prototype.getElementsByClassName = _MS_HTML5_getElementsByClassName;