In my last post, I went over how to use IE9′s Site Pinning API to implement overlay icons to enhance user notifications. The demo focused on how to display a numeric icon to indicate when a specific event (e.g.: messages in an inbox) had occurred. 

<a href="http://blog.reybango.com/wp-content/uploads/2011/10/overlay-icon.png"><img src="http://blog.reybango.com/wp-content/uploads/2011/10/overlay-icon.png" alt="" title="overlay-icon" width="508" height="150" class="alignleft size-full wp-image-1710" /></a>
<em>Pinned site with overlay icon</em>

It's a really great way of letting your users know that there's pending information for them to check into but what happens if you have a site that offers multiple types of notifications? With websites offering so much functionality nowadays, it's pretty common for websites to offer multiple types of notifications from friend requests and event reminders to new messages and game invites.

<h2>Rotating Multiple Overlays Icons</h2>

The great thing about the Site Pinning API is that it's very flexible and through some JavaScript magic, you can easily display multiple overlay icons for the various services you have. In this demo, I want to rotate through 3 different overlay icons that alert the user to pending messages, requests and actions.

As before, I had to flex some of my artistic talent by creating the overlay icons. I created 5 of each and here's how the first three look:

<a href="http://blog.reybango.com/wp-content/uploads/2011/10/messages-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2011/10/messages-1.png" alt="" title="messages-1" width="32" height="32" class="alignleft size-full wp-image-1762" /></a><a href="http://blog.reybango.com/wp-content/uploads/2011/10/requests-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2011/10/requests-1.png" alt="" title="requests-1" width="32" height="32" class="alignleft size-full wp-image-1763" /></a><a href="http://blog.reybango.com/wp-content/uploads/2011/10/actions-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2011/10/actions-1.png" alt="" title="actions-1" width="32" height="32" class="alignleft size-full wp-image-1764" /></a>

The code changed slightly from the last demo in order to accommodate multiple bits of data per fetch. While previously, I was only fetching one piece of data, in this demo, I'm returning 3, one for each notification type:

[code lang="js"] myPin.init([{ &quot;data&quot; : [{ &quot;label&quot; : &quot;Messages&quot;, &quot;ntype&quot; : &quot;M&quot;, &quot;num&quot;: 2 }, { &quot;label&quot; : &quot;Requests&quot;, &quot;ntype&quot; : &quot;R&quot;, &quot;num&quot;: 1 }, { &quot;label&quot; : &quot;Actions&quot;, &quot;ntype&quot; : &quot;A&quot;, &quot;num&quot;: 3 }] },
		        { &quot;data&quot; : [{ &quot;label&quot; : &quot;Messages&quot;, &quot;ntype&quot; : &quot;M&quot;, &quot;num&quot;: 1 }, { &quot;label&quot; : &quot;Requests&quot;, &quot;ntype&quot; : &quot;R&quot;, &quot;num&quot;: 5 }, { &quot;label&quot; : &quot;Actions&quot;, &quot;ntype&quot; : &quot;A&quot;, &quot;num&quot;: 2 }] },
		        { &quot;data&quot; : [{ &quot;label&quot; : &quot;Messages&quot;, &quot;ntype&quot; : &quot;M&quot;, &quot;num&quot;: 5 }, { &quot;label&quot; : &quot;Requests&quot;, &quot;ntype&quot; : &quot;R&quot;, &quot;num&quot;: 1 }, { &quot;label&quot; : &quot;Actions&quot;, &quot;ntype&quot; : &quot;A&quot;, &quot;num&quot;: 4 }] }
			   ]);[/code]

As a reminder, the method <em>getData()</em> <strong>simulates</strong> grabbing remote data. So if we look at the data above, we can simulate pulling back three distinct bits of data. This is why we call the method every 10 seconds using setInterval. This allows us to see how notifications might look over a period of time. 

[code lang="js"]setInterval(function () { myPin.getData() }, 10000);[/code]

The next thing that changed is the use of a timer to allow a slight delay while rendering the overlay icons. Using <em>setTimeout()</em> provides enough of delay so that an individual overlay icon is visible to the user before rotating on to the next icon. If we didn't have this delay, the rotation would be way too fast to provide any useful notification. If we look at the following image, we can see what the notification will look like:

<a href="http://blog.reybango.com/wp-content/uploads/2011/10/overlay.png"><img src="http://blog.reybango.com/wp-content/uploads/2011/10/overlay.png" alt="" title="overlay" width="332" height="150" class="alignleft size-full wp-image-1773" /></a>
<em>Overlay icon showing numeric notification</em>

This is accomplished via the following code:

[code lang="js"]// Grab the current set of data...
currData = this.dataBin[this.currIndex++].data;		
		
/* We're going to display a new overlay every x number of seconds to display a new overlay icon so
   let's loop through the data elements for the current set of data... */
for (var i=0; i &lt; currData.length; i++ ){
					
	(function(idx) { setTimeout( function(){ myPin.dispOverlay( currData[idx] ); }, 1e3 * idx); }( i ));					
					
}[/code]

Here's what's happening. In the first line, I grab the current set of data that holds all of the notification information (messages, requests & actions). That data looks like this:

[code lang="js"][{ &quot;label&quot; : &quot;Messages&quot;, &quot;ntype&quot; : &quot;M&quot;, &quot;num&quot;: 2 }, 
{ &quot;label&quot; : &quot;Requests&quot;, &quot;ntype&quot; : &quot;R&quot;, &quot;num&quot;: 1 }, 
{ &quot;label&quot; : &quot;Actions&quot;, &quot;ntype&quot; : &quot;A&quot;, &quot;num&quot;: 3 }[/code]

I loop through each group of data and assign a timer using <em>setTimeout()</em> that will call <em>dispOverlay()</em> at a short, incrementing interval through each loop. That's the magic code that allows for the gradual icon rendering delay I mentioned before. 
