Tuesday, December 17, 2013

How To Display Browser Not Supported Message in SharePoint Modal Dialog

With the rapid emergence of new and feature rich browsers, we find ourselves building web sites that work better in more recent versions of the browsers as opposed to their predecessors. You could spend a lot of development time and money and build sites that work in ALL browser versions, old and new. But sometimes this may not be worth it. This is when you have to draw the line, and build sites that only work in browser version x and higher. And you to have convey this message to your users that browse to your site using an older browser version.

So, how do you gracefully communicate the message to the user, and offer alternatives?

One quick and easy method to convey this message is to use some CSS, HTML, JavaScript, and the out-of-the-box SharePoint Modal Dialog.

In this blog I will demonstrate how to display a message to users browsing with Internet Explorer version 7 (or earlier).

CSS

Used to hide the <div> tag that stores the message that is displayed to the user.

.hidden {

	display: none;

}


HTML

Snippet 1 – This is where we check for Internet Explorer 7 (or earlier) browser versions

<!--[if lt IE 7 ]> <div id='ieVersion' class="ie6"></div> <![endif]-->

<!--[if IE 7 ]>    <div id='ieVersion' class="ie7"></div> <![endif]-->

<!--[if (gt IE 7)|!(IE)]><!-->

<div id="ieVersion" class=""></div>

<!--<![endif]-->

Snippet 2 – This is where we will store the message that we want to display to the user. Note that the <div> tag containing the message is hidden using a CSS class.

<div id="oldBrowserMessage" class="hidden">



   <p>

      Hello! Welcome to our new web site. This site is not fully supported in Internet Explorer 7 (and earlier) versions.     

      Please upgrade your Internet Explorer browser to a newer version.

   </p>



   <p>

        As an alternative, you can use either of the options below to browse the site:

   </p>



   <ol>

     <li>Use Google Chrome browser. Here is the <a href="https://support.google.com/chrome/answer/95346?hl=en">download link.</a></li>

     <li>Use Firefox browser. Here is the <a href="http://www.mozilla.org/en-US/firefox/new/">download link.</a></li>

   </ol>



   <p>

   Thanks.

    </p>     



</div>


JavaScript

<script>//<![CDATA[

        (function ($) {

            "use strict";



            var oldIEVersion;

            if ($('#ieVersion').is('.ie6, .ie7')) {

                oldIEVersion = true;

            }



            if (oldIEVersion) {

                SP.SOD.executeFunc('sp.js', 'SP.ClientContext', displayOldBrowserAlert);

            }

        }(jQuery));



            function displayOldBrowserAlert() {

                SP.UI.ModalDialog.showModalDialog({

                    title: "Browser Not Supported",

                    width: 500,

                    height: 370,

                    html: document.getElementById("oldBrowserMessage")

                });

                $("#oldBrowserMessage").removeClass("hidden");

            }  

        

        //]]>

</script>

This is the code to display the message using SharePoint’s modal window. Note that the “hidden” class is removed in the code above.

Shown below is a screenshot of the message that is displayed to the user in a SharePoint modal window:

Credit to my esteemed colleague, Greg Ostrowski, who helped with the above approach. You can read his recent blog on Underused CSS3 styles.

Attached is a zip containing a custom master page and style sheet with the above code. Enjoy!

A few notes on the custom master page:

  1. It is based on the out-of-the-box SharePoint 2013 ‘seattle.html’ file.
  2. Minified jQuery 1.10.2 version hosted on Google CDN is used.
  3. CSS file referenced resides in a folder in the masterpage gallery.