IE8 from MIX08 to developers

mehfuzh — Sat, 08 Mar 2008 18:55:48 GMT

Although I was not in mix08, I took interest in knowing every detail of how it is going on and downloaded the sessions and keynote as it is available at http://sesssions.visitmix.com , a clean Silverlight site with all the cool videos. This morning , I was watching out the keynote, and found Dean Hachamovitch (General manager,IE) point out some of the cool new features that really dropped my jaws.

Apart with the new W3C compliance and CSS 2.1 along with HTML 5, two things that really amazed me are (which I will be describing shortly)

Ajax Navigation
Connectivity Events.

Firstly, in order to use all the IE8 and HTML 5 features, we need to declare a doc type on top of our HTML file that looks like

<!DOCTYPE html>

This is the doc type of HTML 5, without using this doc type it is also possible to test your IE8 compatible script and for that SHIFT + F12 hotkey should be pressed, which will bring up the "Developer Tools" console, there from the View menu , you have to specify the compatibility mode to IE8 and hit F5 on your browser to see the effect :-)

Now, Let's start with simple but cool one called "Connectivity Events". It often happens that I am writing a big comment in someone's blog by the time ISP goes down or page expired, and to my frustration I write it again anyhow. But in IE8 you can let users save their data in case of anomalies by using the window.navigator.onLine property.Using this, you can check out if you lost your connectivity with the server and show your user with proper message, rather make him redo things again.This is pretty simple and I fused out a demo script which does right that.

I declared a DIV block that contains the message , when there is no connection.

<div id="offlineDiv" style="color:Red;font-size:14pt;display:none;">
Connection Status: offline
</div>

And another DIV block , that is visible when you are online.

<div id="onlineDiv" style="color:Green;font-size:14pt;display:block;">
Connection Status: online
</div>

And I wrote a sample script that uses the window.navigator.onLine , to check it out and put it in the head tag. The JS actually toggles the div on and off depending on the connection status.

function check()
{
 var online = window.navigator.onLine;
 
 if (!online) 
 {
   document.getElementById('offlineDiv').style.display = "block";
   document.getElementById('onlineDiv').style.display = "none";
 }
 else
 {
   document.getElementById('offlineDiv').style.display = "none";
   document.getElementById('onlineDiv').style.display = "block";
 }
}

Now, either I can execute this JS in body onload event or at the end of the function or I can further use the ononline and onoffline event in the body tag. Either way it will produce the same result.

<body ononline="check()" onoffline="check()">

...

</body>

You can see the online/offline status by checking/unchecking the tools->work offline or plugging on/off your Internet :-)

Moving to the another feature called "Ajax Navigation". We all know that browser back does not work properly with Ajax apps, you can read it further at MSDN, but I will do show the pointer to use it for making your app taking the advantage of it. The magic is done by a simple but a mighty window.location.hash property. Now, it is possible to set hash for pre IE8 browsers as well, but what makes it special is that the browser creates a history entry for the changed hash URL by which we can go back to the wizard step or map location by pressing the browser back in our favorite Ajax app.

But just going back and forth does not solve the problem , as we need to reproduce the step depending on the hash value and for that we need to trigger the appropriate function , when hash is changed. IE8 takes it further by introducing a window event called onhashchange.

window.onhashchange = function() { // your code goes here; }

This can be placed anywhere in the "Head" of your html doc. I have created a script file with step 1, 2 and 3 using some DIV and text, go to different steps and press browser back to see the effect, both this and the other script is added here (To Download) for you.

Finally, to try these and many more grab a copy of IE8 Beta from MSDN download center and make your app ready for IE8 today :-).

Updated on March 19, 2008

Mehfuz's WebLog : IE8

IE8 from MIX08 to developers