I have to admit that when it comes to IE9, I am not as updated as I should be in terms of features.  Although we know certain features exist, sometimes you just have try and experiment with them to remember.  (In this case, a feature that already existed in IE8).

I’m glad I got the chance to attend a whole day pre-MIX event here in MIX11 touching on topics about HTML5 and IE9. The event was mostly about HTML5 really, but I learned a lot about IE9 as well.  So I got to re-visit IE features, and probably spent a bit more time thinking about Jump Lists and what else can be done.

Jump Lists

One of the most common uses of Jump Lists is to make features of your website more accessible to users.  If you have some hard-to-reach or less obvious existing page/feature you want to highlight, you can use Jump Lists to increase their visibility and usage. It does this through a “right-click experience” on a Pinned Site.  If you want to read more about Pinned Sites and Jump Lists, you can check out the MSDN page here.

Personally though, I feel that Jump Lists can be more than just pointing to your existing assets.  I’m leaning towards a functionality that can be implemented site-wide, like changing page background, or translating pages, etc. 

After iterating potential use-case scenarios for Jump Lists in my head, I settled on something that allows a user to save the current html so that there’s a way to view the page later with the same content when he saved it.  This would be particularly useful (IMHO) for sites with home pages notorious for changing content frequently, such as a news site.  I would also like to do this without having to resort to saving pages on my local machine as mht files, or anything that would leave messy files on my machine. The Jump List implementation looked like this…

For this implementation, we will use Jump Lists, and the Web Storage API (localStorage)

Nitty Gritty

You can check out this simple test site I created that shows how this can be done.

1.  When the page loads, you will see the local time of the server where the page is hosted.  This would be our analog to the “current articles” on a news site.  (I needed to get the time from the server so that I can write out the html explicitly on the client and read it using javascript).

2.  You can then “Pin” this site by dragging the default icon to the left of the address bar (or the tab if you have a bunch of other pages open)  all the way to the taskbar.  You can refer to this page to learn more about Pinning Sites.  After that, you will have access to the Jump Lists..

You can view the Javascript source code through F12 or simply right-clicking on the page and “View source code”.  (F12 has some cool developer debugging features, which deserves it’s own post, I’ll probably do that soon).  Here’s the critical part of the Javascript source code that builds the Jump Lists

You can check this link if you want to know how to create your own Jump Lists.

3. When you click on “Save this page”, we are doing a bunch of things behind the scenes.  First, from the Jump List code above, you see that we are actually refreshing the page and passing in a parameter to tell the page that it is in save mode.  Which then opens us up to the following conditions

The line at the topmost calls a custom function that pulls in the value passed in the url parameter.  In this case we are getting “save”.  This allows us in to the part of the code where we pull the content of the body and save it in localStorage.

So after all this, the “Time loaded…” part is saved, and the page is reloaded

4.  We now need to Load this page.  I’ll just go grab a coffee and wait a while so we have a huge and obvious time gap for this demo.  (You probably should go grab a coffee too )

…..

Ok I’m done stalling.  Before you click on the “Load saved page”, click on the “Go to current page” first so we know the current time.

That’s roughly 6 minutes of getting coffee.  Now that we know what the current time is, we can now click “Load saved page”

We got that old page back because we pulled it from localStorage, and then inserted/replaced that content into the body tag.  (See code in number 3 above).

This is a pretty simple example but this could easily be extended to any site viewed in IE8 or IE9.  The point of this exercise is to show other uses for Jump Lists, not just pointing to other parts of your site.  If you have other ideas on a Jump List implementation, we’d love to hear them.

Also, there will be exciting announcements on IE9 here in MIX11.  Tune in to http://live.visitmix.com/

Related Posts