IE Pinned Sites Part 6: How to implement Overlay Icons

Article
04/28/2011

Today, we’ll dive into how to implement overlay icons in your pinned site.

Overlay icons are used to surface notifications or status to the user. When you pin a site to the Taskbar, remember that it is now always available in your Taskbar. While the pinned site is running, it has the ability to display a small icon overlaid on the Taskbar button, to draw the user’s attention back to the site or notify the user that some event has happened. The pinned site can display multiple overlay icons to the user, but it can only display one icon at a time.

Here’s a normal Taskbar button, and then a Taskbar button with an blue informational overlay icon. The overlay icon will display in the lower, right-hand corner of the Taskbar button.

For example, let’s say that you build a website that tracked specific search queries on Twitter, such as #ie for Internet-Explorer-related tweets. When pinned and running, this site could display a small icon overlaid on the Taskbar button that gives the number of new tweets with this search term found, and perhaps display a magnifying glass icon overlay while it’s searching. (There is a TweetFeed sample application that has this functionality, which can be found here.)

Now, let’s look at a real-world example of a popular website using overlay icons. A great example is Facebook. If you pin this sin, you will see that when you have new notifications (new friend requests, messages, etc.), the Facebook pinned site will overlay a red icon with a white asterisk to notify you.

To implement overlay icons in your own pinned sites, you will need to know how to both set and hide overlay icons.

To display an overlay icon to the user on the Taskbar button, you will use the msSiteModeSetIconOverlay method. It takes a parameter which is a URL pointing to an icon file (*.ico); this is the icon that will be overlaid on the Taskbar button. There is also a second, optional string parameter for a description of the icon overlay, for accessibility purposes.

 window.external.msSiteModeSetIconOverlay('Images/info.ico');

To clear an overlay icon from the Taskbar button, you will use the msSiteModeClearIconOverlay method.

 window.external.msSiteModeClearIconOverlay();

Let’s look at an example with a little meat on it. As you may have picked up on from these last couple of blog posts, I’ve been using code samples from my Windows Development Boot Camp website. However, this website contains mainly static content – the agenda for the event, what software you should load onto your computer before coming to participate in the labs, etc. Occasionally I will add a new location where we are holding an event, but there isn’t really that much information that changes often. Therefore, I can’t think of a single realistic scenario in which I’d want to use overlay icons in this website. However, I did write a contrived example using timers just to show how overlay icons work, but this example isn’t live on the website (since it would probably just annoy most people).

In my contrived example using timers, an overlay icon will be visible for 3 seconds, and then removed for 2 seconds. This pattern will repeat every 5-second interval.

I begin by using a JavaScript method called setInterval. This method will call the setIconOverlay function below every 5 seconds (the second parameter is in milliseconds, and 5000 ms == 5 sec).

So, every 5 seconds, setIconOverlay is called. This function checks to see if the site is pinned, and if so, it will overlay an icon called “info.ico”. Then, it calls a JavaScript method called setTimeout. The setTimeout method is very similar to setInterval, except while setInterval calls the specified function every x milliseconds, setTimeout calls the specified function in x milliseconds; it only calls it once rather than on a recurring basis. Therefore, it will “schedule” the clearIconOverlay function to be called in 3 seconds.

After 3 seconds, clearIconOverlay is called. It simply checks if the site pinned, and if so, it will clear the overlay icon. This pattern will repeat over and over again, since approximately 2 seconds later, setIconOverlay will be called again (due to the original setInterval call).

 <script type="text/javascript">
    // Icon Overlay
    setInterval(setIconOverlay, 5000);

    function setIconOverlay() {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeSetIconOverlay('Images/info.ico');
        }
        setTimeout(clearIconOverlay, 3000);
    }

    function clearIconOverlay() {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeClearIconOverlay();
        }
    }
</script>

One final fun fact about overlay icons: they require you to be using large icons on your Taskbar (which is the default). If you are using small icons, you will need to turn off this setting to see the overlay icons. To turn off small icons: