Recall the hypothetical example from Chapter 4, On Navigation, Footers, Alerts, and Content, where MyPhoto only supports browsers above certain versions. To this end, we added a Bootstrap alert to our page, which notified visitors that their browser is not supported. Up until now, however, we had no way to actually identify which browser or browser version a MyPhoto visitor was using. Lacking any logic to hide and display the alert, the alert was visible regardless of whether or not the user's browser was actually supported by our website. Now the time has come for us to implement this missing logic.

Web browsers identify themselves by specifying their name and version information using a special field called User-Agent, which is part of the HTTP Request Header (see Figure 5.1). JavaScript allows users to access this field using the window.navigator property. This property contains the exact same string that is present in the User-Agent field of the HTTP Request Header. Therefore, to determine whether our visitor's browser is indeed supported, all that one needs to do is match the supported browser against the string presented by window.navigator. However, as can be seen from Figure 5.1, these strings are typically quite long and complex. As a result, matching different browsers can be tedious and prone to programming errors. Therefore, it is much better to use external resources that do this matching for us, and have been well tested, well documented, and are kept up to date. The popular, open source jQuery browser plugin (https://github.com/gabceb/jquery-browser-plugin) is one such resource that we can use. Let's go ahead and do just that! As usual, go ahead and fire up your console and install the plugin using Bower:

    bower install jquery.browser

Once the installation is complete, you should see a new directory under

bower_components:

bower_components/jquery.browser

Inside the dist folder, you should see two files, namely,  jquery.browser.js and jquery.browser.min.js.

Take a look at the following screenshot:

Figure 5.1: An example of a User-Agent string transmitted as part of the HTTP header when making a request.

If you can see the aforementioned files, then this means that jquery.browser has been successfully installed. Now, before we start using jquery.browser, we first need to work some more on our alert. The first thing that we will need to do is find a way of uniquely identifying it. Let's use the HTML id attribute for this purpose. Add the id attribute to our alert: id="unsupported-browser-alert".

Next, we should tidy up our markup. Go ahead and open css/myphoto.css and move the inline styles for our alert into our style sheet.

This won't affect browser detection, but will simply allow us to keep our markup nice and tidy. Observe the following code:

    #unsupported-browser-alert { 
        position: fixed; 
        margin-top: 4em; 
        width: 90%; 
        margin-left: 4em; 
    } 

Since we only want the alert to display under certain conditions (namely, if the user is using a specific version of Internet Explorer), we should hide the alert div by default. Go ahead and add the following CSS to our alert styles:

    display: none;

Save and refresh. The alert at the top of the page should now no longer be visible. Furthermore, our outermost alert div should now only contain id and class attributes:

    <div class="alert alert-danger" id="unsupported-browser-alert">
        <a href="#" class="close" data-dismiss="alert" aria-label="close"
        >&times;</a> 
<strong class="alert-heading"><i class="fa fa-exclamation"></i>
        Unsupported browser</strong> Internet Explorer 8 and lower are
        not supported by this website.
    </div>

Now it is finally time to start using our freshly installed jQuery plugin. Open the MyPhoto index.html file and include the minified jquery.browser JavaScript file within the head of the document:

    <script
    src="bower_components/jquery.browser/dist/jquery.browser.min.js">         
    </script> 
    Great. The head of our index.html should now look as follows: 
    <head> 
        <meta charset="UTF-8"> 
        <title>ch05</title> 
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css
        /bootstrap.min.css" /> 
        <link rel="stylesheet" href="styles/myphoto.css" /> 
        <link rel="stylesheet" href="bower_components/components-
        font-awesome/css/font-awesome.min.css" /> 
        <script src="bower_components/jquery/dist/jquery.min.js"></script> 
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js">
        </script> 
        <script src=
        "bower_components/jquery.browser/dist/jquery.browser.min.js">
        </script> 
        <script type="text/javascript"> 
            $( document ).ready(function() { 
                $("nav ul li a").on('click', function(evt) { 
                    evt.preventDefault(); 
                    var offset = $(this.hash).offset(); 
                    if (offset) { 
                        $('body').animate({ 
                            scrollTop: offset.top 
                        }); 
                    } 
                }); 
            }); 
        </script> 
    </head> 

We are now ready to use jquery.browser to detect which browser the visitor is using. To this end, and as noted in the jquery.browser documentation, the following variables are are available:

To add the logic that makes the alert visible, let us start with a general condition of whether or not the user is using Internet Explorer. We will move to a more specific condition later (whether the user is using a specific version of Internet Explorer). In other words, let us begin by making the browser alert visible only if the visitor's browser is identifying itself as Internet Explorer. The code for this is fairly straightforward. We simply check the $.browser.msie variable. If this variable evaluates to true, then we use jQuery to make our alert visible:

    if ($.browser.msie) { 
        $('#unsupported-browser-alert').show(); 
    } 

Now let us make our browser test more specific. We now want to test whether the visitor is using both Internet Explorer and whether the version of Internet Explorer (let's say version 8 and below) is unsupported by MyPhoto. To do so, we simply perform a second check using the $.browser.version variable. If the conditional evaluates to true, then the show() function is executed. The show() function modifies the display rule of an element to make it visible:

    if ($.browser.msie && $.browser.version <= 8) { 
        $('#unsupported-browser-alert').show(); 
    }

Go ahead and insert this snippet into the head of our HTML document:

    <script type="text/javascript"> 
        $( document ).ready(function() { 
            $("nav ul li a").on('click', function(evt) { 
                evt.preventDefault(); 
                var offset = $(this.hash).offset(); 
                if (offset) { 
                    $('body').animate({ 
                        scrollTop: offset.top 
                    });

                }

            }); 
            if ($.browser.msie && $.browser.version <= 7) { 
                $('#unsupported-browser-alert').show(); 
            }
    
        });

    </script>

<!--[if IE 8]-->
         <insert IE specific markup here>
     [endif]-->