Click here to Skip to main content
Click here to Skip to main content

Using Overlay Icon API to Make Client Notifications in IE9

, 10 Oct 2010
Rate this:
Please Sign up or sign in to vote.
Using Overlay Icon API to Make Client Notifications in IE9 Ever wanted to notify your site clients/users while they are surfing in your site. In one of the applications that I helped to build this was a customer requirement. So in the past you could have implemented a blinking behavior that will ma

Ever wanted to notify your site clients/users while they are surfing in your site. In one of the applications that I helped to build this was a customer requirement. So in the past you could have implemented a blinking behavior that will make the icon of the browser blinking. Not a very user friendly behavior for my taste. With IE9 you now able to use the new SiteMode Overlay Icon javascript behavior which is part of the site pinning feature.

Overlay Icon API

The Overlay Icon API include two simple methods:

  • msSiteModeSetIconOverlay – the method enables to communicate alerts, notifications and statuses to the site users by adding an icon on top of the the existing web site icon. The method takes two parameters – an image url and a tooltip value.
  • msSiteModeClearIconOverlay – the method clears any existing overlay icon.

Pay attention that this behavior will only work in a pinned site so check whether the site is in SiteMode before using these methods.

Overlay Icon In Action

When the following page is loaded in a pinned site the result will be an overlay icon on top of the pinned site icon:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head runat="server">
    <title>My application</title>

    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <meta name="application-name" content="My Application" />
    <meta name="msapplication-tooltip" content="My Application" />

    <meta name="msapplication-starturl" content="./" />
    <meta name="msapplication-task" content="name=My Blog;action-uri=http://blogs.microsoft.co.il/blogs/gilf;icon-uri=/favicon.ico" />

    <meta name="msapplication-task" content="name=My Linkedin Profile;action-uri=http://il.linkedin.com/in/gilfink;icon-uri=http://www.linkedin.com/favicon.ico" />
    <script type="text/javascript">

        window.external.msSiteModeSetIconOverlay('/info.ico', 'Attention Needed');
    </script>

</head>
<body>

    <form>
    <div class="page">

        <div class="header">
            <div class="title">

                <h1>
                    My ASP.NET Application

                </h1>
            </div>

            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">

                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server">Log In</a>

                        ]
                    </AnonymousTemplate>

                    <LoggedInTemplate>
                        Welcome <span class="bold">

                            <asp:LoginName ID="HeadLoginName" runat="server" />
                        </span>! [

                        <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
                            LogoutPageUrl="~/" />

                        ]
                    </LoggedInTemplate>

                </asp:LoginView>
            </div>

            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"

                    IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>

                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />

                        <asp:MenuItem NavigateUrl="~/IconOverlay.aspx" Text="Icon Overlay" />
                        <asp:MenuItem NavigateUrl="~/msPerformance.aspx" Text="msPerformance" />

                    </Items>
                </asp:Menu>

            </div>
        </div>

        <div class="main">
            <input type="button" value="Remove Icon Overlay" onclick="window.external.msSiteModeClearIconOverlay();" />

        </div>
        <div class="clear">

        </div>
    </div>

    <div class="footer">
    </div>

    </form>
</body>

</html>

The result of running this code can look like:
Icon Overlay Example
The full page can look like:
Icon Overlay
and when pressing the Remove Overlay Icon button it will remove the added information icon.

Summary

IE9 brings a new way to notify users about things that happen in web sites/applications. Using the simple but powerful overlay icon API in pinned sites can make your web site/application more user friendly and more shiny.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Gil Fink
Architect Sela Group
Israel Israel
Gil Fink is an expert in web development and Microsoft web and data platforms. He works as a senior consultant and architect at Sela Group. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also a co-author of several Microsoft Official Courses and training kits and the founder of Front-End.IL meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 11 Oct 2010
Article Copyright 2010 by Gil Fink
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid