Do you remember, the hypothetical example from chapter 4, On Navigation, Footers, Alerts, and Content, where MyPhoto only supports browsers above certain versions? 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 or 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 (refer to 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 the 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 per usual, go ahead and fire up your console and install the plugin using NPM:
npm install jquery.browser
Once the installation is complete, you should see a new directory under node_modules:
node_modules/jquery.browser
Inside the dist folder, you should see two files, namely, jquery.browser.js and jquery.browser.min.js.
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, this means that jquery.browser has been successfully installed.
Go ahead and reference the jquery.browser.min.js by adding the following script tag below the footer of our page:
<script
src=”node_modules/jquery.browser/dist/jquery.browser.min.js”></script>
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”.
Generally, it is not a good idea to couple CSS rules with an id, as this is bad for reusability. However, hold tight; we will talk more about this in Chapter 6, Customizing Your Plugins.
Because 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 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 no longer be visible.
Now it is finally time to start using our freshly installed jQuery plugin. To this end, and as noted in the jquery.browser documentation, the following variables are now available to us:
- $.browser.msie is true if the website visitor is using Microsoft Internet Explorer
- $.browser.webkit is true if the website visitor is using either Chrome, Safari, or Opera
- $.browser.version indicates the browser version (not type!) that the website visitor is using
To add the logic that makes the alert visible, let’s start with a general condition of whether or not the user is using Internet Explorer.
Let’s 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’s 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 (Version 9 and earlier) 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 <= 9) {
$(‘#unsupported-browser-alert’).show();
}
Go ahead and insert this snippet at the bottom 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 <= 9) {
$(‘#unsupported-browser-alert’).show();
}
});
</script>
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.