Browser Detection and Information Container

msgarcia
Community Contributor
‎11-03-2016 10:37 AM
11
2024

The Challenge

This initiative was brought about due to the fact that many of our students, and some of our instructors, have erroneously logged in to Canvas in an incompatible browser. While many receive the notification that Instructure has provided, some are still confused about what a browser is, or which one they should use.

Solution

I wanted the solution to provide the user with the following information:

  1. The name and version of the current browser that is being used
  2. Additional information related to that browser
  3. Canvas' list of compatible browsers
  4. Canvas' list of system requirements

For this solution, I created a fixed container that is appended to the <body> element use jQuery, and that is displayed on the user dashboard when a user first logs in to Canvas. This container provides the user with basic information related to the current browser in use, and the user can also gain additional information by clicking on links included in the container (addresses solutions points 2-4). Furthermore, to prevent the container from obscuring any containers behind it, I have included a close button that the user can click, which closes the container by sliding it out of view.

Demo

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)

Repository

If you are interested in applying this to your environment, please feel free to fork or download from my Bitbucket repository, which can be found here. If you previously downloaded this package, please be sure to download the most updated version from the repo to ensure that the code will work as intended.

[UPDATE]: With the renewed interest in this repository, I wanted to give you a live demo of it in action. You can find a slightly modified version of it (with comments) on JSFiddle.

[UPDATE 2]: Instructure modified the html for their Dashboard page. Previously, in the <title> tag of the page, the text "User Dashboard" was present. Now the text has been updated to "Dashboard." I have modified the file in the repository to match this. I have also updated the JSFiddle to match.

Tags (2)
11 Comments