Jennifer Marsman

Windows Development

IE Pinned Sites Part 8: How to implement a Flashing Taskbar Button

IE Pinned Sites Part 8: How to implement a Flashing Taskbar Button

  • Comments 2

You have probably seen flashing taskbar buttons before.  Perhaps you have an instant messaging program which flashes the taskbar button when a new message comes in?  Flashing taskbar buttons are used to signal users that their attention or interaction is needed. 

Pinned sites can make their taskbar buttons flash as well.  To flash the pinned site taskbar button, use the msSiteModeActivate method. 

window.external.msSiteModeActivate();

This will cause the taskbar button of the pinned site to start flashing.  Now, notice that there is no deactivate method!  The taskbar button will continue to flash* until the user comes back to the site (clicks on it so the window has focus).  When the pinned site window comes to the foreground, the flashing will deactivate automatically. 

Now, notice something else that falls out of this.  We deactivate the flashing by giving the window focus.  So, if you call the activate method above when the window already has focus, nothing will happen. 

* I’m simplifying it slightly here.  The taskbar button won’t actually flash forever.  It will flash 20 times, and then the button will stay highlighted until the window comes to the foreground. 

Here’s some sample flashing taskbar button code that I wrote for the Windows Development Boot Camp site.  Note that this code is not live on the site, as the site isn’t updated frequently or highly interactive, so there are no real reasons to flash the taskbar button.  Therefore, I wrote a contrived example using timers.  This code uses a JavaScript method called setInterval, which will call the flashToolbar function below every 10000 milliseconds (or 10 seconds).  In the flashToolbar function, it checks to see if the site is pinned, and if so, it will start the taskbar button flashing. 

<script type="text/javascript">
    // Flashing TaskBar
    setInterval(flashToolbar, 10000);    // calls flashToolbar every 10000 ms

    function flashToolbar() {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeActivate();
        }
    }
</script>

A real-world example of a pinned site using a flashing taskbar button is the Southwest Airline Blog, “Nuts about Southwest”.  When pinned, this site will flash when they add a new item to their social stream (the panel on the right side of the site).  Here is the website, pinned:

BlogSouthwest

Here is the taskbar button flashing (well, you can’t really see it flashing from a picture, but hopefully you get the idea…it blinks orange on and off):

SouthwestBlogFlashing

Finally, remember, young Spiderman, with great power comes great responsibility.  Just because you can do something doesn’t mean that you should.  Flashing taskbar buttons can be very annoying.  Make sure that you use them only when they make sense, or you will drive your users crazy.  There is some good guidance in this article under “To Flash or Not To Flash”. 

My next post will be on patterns to support multiple browsers in pinned site code. 

 

Other Blog Posts in this Series

IE Pinned Sites Part 1: What Are Pinned Sites?

IE Pinned Sites Part 2: Why Implement Pinned Sites?

IE Pinned Sites Part 3: How to implement basic site properties

IE Pinned Sites Part 4: How to implement Jump List Tasks

IE Pinned Sites Part 5: How to implement dynamic Jump List Categories

IE Pinned Sites Part 6: How to implement Overlay Icons

IE Pinned Sites Part 7: How to implement Thumbnail Toolbar Buttons

IE Pinned Sites Part 8: How to implement a Flashing Taskbar Button

IE Pinned Sites Part 9: Patterns to make your pinned site code play nice in all browsers

IE Pinned Sites Part 10: Pinned Site Resources

  • Loading...
Leave a Comment
  • Please add 1 and 6 and type the answer here:
  • Post