Added jQuery browser check for ODT and Skillport eLearning

I noticed a mac user getting frustrated when trying to log in to the eLearning site the other day.
The log in process was hung up on the loading screen for a few minutes:

I pointed out that it said ‘click here’ if it doesn’t load after 40 seconds but I realize that’s not very helpful.
It turns out they were using Firefox, which isn’t one of the supported browsers.

We do have the browser compatibility information on the page but that content is collapsed. So the user would have to look for it.
So I decided to add some browser compatibility tests and display a message to mac / firefox users to save them some trouble.

So now users with compatible browsers continue to see the same screen as before:

But if we determine that the platform is Mac and the browser is Mozilla or MSIE then they get a different message.

And if they click the ‘Click here’ link in my message a script attempts to load the latest compatibility info.:

 

Here’s some php, javascript code for how we achieved this:

<div></div>
<div><a href="/skillport/login">Click to continue to Skillport eLearning</a></div>
&lt;?php
//attach a script that loads the supported browser curl page capture on click.
$addJS = &lt;&lt;&lt;javascript
/* ##################### Add JS ##################### */
//http://stackoverflow.com/questions/1429058/change-link-destination-based-on-whether-user-has-mac-or-pc
function yourOS() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf(&quot;win&quot;) != -1) {
      return &quot;Windows&quot;;
  } else if (ua.indexOf(&quot;mac&quot;) != -1) {
      return &quot;Macintosh&quot;;
  } else if (ua.indexOf(&quot;linux&quot;) != -1) {
      return &quot;Linux&quot;;
  } else if (ua.indexOf(&quot;x11&quot;) != -1) {
      return &quot;Unix&quot;;
  } else {
      return &quot;Computers&quot;;
  }
}
function yourBrowser() {
	var ub = jQuery.browser;
  if (ub.safari) {
    return &quot;Safari&quot;;
  } else if (ub.opera) {
    return &quot;Opera&quot;;
  } else if (ub.msie) {
    return &quot;Internet Explorer&quot;;
  } else if (ub.mozilla) {
    return &quot;Mozilla&quot;;
  } else {
    return &quot;&quot;;
  }
}

/*alert(yourOS()+&#039; &#039;+yourBrowser()+&#039; &#039;+jQuery.browser.version);*/
function getBrowserCompatTable(elementIdStr){
  //load browser compat table
  $(&#039;#&#039;+elementIdStr).html(&#039;<p><img src='/.../loading.gif' alt='loading' /></p>');
  $.post('/.../current_supported_browsers.php',
  function(data) {
    $('#'+elementIdStr).html(data);
  });
}

$(document).ready(function(){
  if (yourOS() == "Macintosh" &amp;&amp; (yourBrowser() == "Internet Explorer" || yourBrowser() == "Mozilla")) {
    $('#browser_note').html("<p class='red'>Certain browsers are not supported on Skillport eLearning. You appear to be using a non-compatible Platform / Browser combination.</p> <p>Please review the compatibility information and log in using a supported browser. We recommend using Safari on Mac.</p> <p><a href='#' class='currentBrowsersCompatLink'>Click here</a> to view the current compatibility table.</p> <div></div><br />");
    $('.currentBrowsersCompatLink').click(function() {
      getBrowserCompatTable('currentBrowserCompat');
    });
  }
});
/* ##################### End Add JS ##################### */
JAVASCRIPT;
drupal_add_js($addJS, 'inline');
?&gt;

I added a simple div (id: browser_note) above the Skillport log in link and then added some script that loaded some content into that browser_note div if one of our known unsupported platforms and browsers was detected.
Valuable functions include

  • yourBrowser(); which returns the browser from a jQuery.browser call.
  • yourOS(); which parses navigator.userAgent to determine the platform. (Thanks to http://stackoverflow.com/questions/1429058/change-link-destination-based-on-whether-user-has-mac-or-pc for that.
  • $(document).ready(function(); which checks for the non-supported platform/browser and populates the browser_note div above the Skillport link. It also sets up the click function on the ‘click here’ link that opens the compatibility table.
  • getBrowserCompatTable(elementIdStr); which retrieves the compatibility table via a jQuery post call to a local page (current_supported_browsers.php) that cURLs the Skillport support site.

All that is wrapped in a php HEREDOC and pushed to the header with drupal_add_js.

I do realize that we don’t use $(document).ready with Drupal anymore but that functions’ been in place for a while and not complaining so I didn’t retrofit it with a Drupal.behaviors. Maybe later.

Leave a Comment