rh0071219

Internet Exploder, indeed. (Learn 9.1, SaaS)

Blog Post created by rh0071219 on Mar 7, 2019

About: Internet Explorer and Blackboard Learn don't play nice together. This article explains how to create a warning that will appear only for users who attempt to log in to your Blackboard environment using Internet Explorer.

 

What's the Problem?

For the better part of my career as an LMS administrator, I've told anyone who would listen that Internet Exploder (Explorer) is good for only one thing; downloading a different browser. While I've seen many people abandon the little blue "e" for a more modern browser, there remains a coterie of diehard IE adherents who simply refuse to switch.

 

In their defense, there are plenty of reasons folks may still be on IE. Some are running old machines. Some lack (or think they lack) the technical knowledge needed to update their browser. Others are comfortable with the way things are and just don't want to change. Whatever the reason, (and I'm sure the reason is a very good one), it's time for a change. It's 2019. Microsoft officially ended support for Internet Explorer three years ago, and the old blue "e" just ain't what it used to be.

 


Why Now?

 

Deep in the heart of the Learn SaaS v3500.0.3 Flexible Deployment release (roughly equivalent to v3500.9.0 for Continuous Delivery), something changed, rendering useless some functionality for Internet Explorer users. Since the release of 3500.0.3, we've received calls from frustrated IE users for whom the platform no longer functioned properly and we had to break the bad news to them that the only way to fix their problem was to stop using Internet Explorer.

 

But it's far better to catch these users before they log in to the system so that they aren't in the middle of something when they realize that there is an issue.

 

To help minimize frustration for our end users, we created an "Incompatible Browser" warning that appears on the login page. We didn't want to do was use the login page announcements area (because these messages cycle through) or display the warning to users who were already on a compatible browser.

 

So we had to come up with a different solution...

NOTE: If you're working with a single sign-on portal that bypasses the Blackboard login page, you might as well stop reading here, contact your portal admin and ask for their help in creating an appropriate intervention for IE users.

 


Danger, Will Robinson! Danger!

 

Still with me? Cool.

 

Our solution to this issue was to create a warning. It's only a warning. It doesn't force anyone to do anything, but it provides users with critical information based upon their system configuration, explains the problem and provides instructions on how to correct the issue.

 

The warning is designed so it will only be seen by IE users but will not prevent them from logging in. It is also configured so that it cannot be dismissed by the end user.

 

Since we're writing code for old browsers, we want to keep it as simple as possible and avoid using JavaScript or other elements that the browser might not recognize or render properly. So, the simplest solution is one that is 100% CSS and HTML.

CAVEAT: Each institution's login page is configured differently. Before beginning, make sure you have a backup copy of your login page downloaded to a local machine. When you go to test your changes, make sure you're logged in to your environment in a separate browser from the one through which you're uploading the updated .jsp file. This way, if you accidentally insert code that breaks your login page, you can still change it back to the previous version.

To Catch IE (or, the part you want to go to if you skipped all that intro text)

 

To ensure that you get all the IE users, you have to approach it from two different directions, because in the world of Internet Explorer, there are two different technologies. Newer versions of Internet Explorer (10 and up), can be identified by using a media query. Old versions of Internet Explorer (9 and earlier) can be detected with a conditional comment (something that was abandoned after version 9).

 

First Things First

Both technologies will display the same warning. So we're creating a <div> element and making it visible when certain conditions are met. Before we worry about how to make it visible, we need to first create the element and hide it. To do this, I opened the login.jsp file and found the CSS section. After the main components were configured, I added the <div> element and set it to be hidden by default. It looks like this...

 

#IEMessage {

display: none;

}

 

 

Media Queries

I mentioned that there were two different ways we had to approach this. The first is the more modern media query method to detect IE10 and higher. I'm not going to go into what media queries are (you can do that research on your own), but suffice it to say that it's a little piece of CSS that says to the browser, "Hey! If you can interpret this code, please use these parameters. Otherwise, ignore it." In this case, all browsers EXCEPT for Internet Explorer will look at the code and be like "I have no idea what you're talking about. I'm ignoring you." You can add this at any point in the CSS, because CSS isn't compiled code and it isn't rendered in any particular order.

 

The @media all and (-ms-high-contrast: active), (-ms-high-contrast: none)media query tells the browser to display the div ONLY IF the stated conditions are met, and since -ms-high-contrast is a setting that only pertains to IE 10+, it will be ignored by everything except IE10+. The most important setting is display: inline-block; part because that's what tells the browser to make it visible (there are options other than inline-block, but I'll let you research that on your own). The rest is purely cosmetic.

 

 

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {

#IEMsesage {

border: 4px outset #EAEAEA;

display: inline-block;

margin: auto;

position: relative;

text-align: center;

width: 70%;

max-width: 600px;

background-color: #FAEBD7;

color: #CCCCCC;

}

}

 

Conditional Comments

Conditional Comments only work on IE9 and older versions. Conditional comments are statements that go in the HTML part of the page (not the CSS) and should immediately follow any <meta> tags. The conditional comment, similar to the media query, says to the browser "Hey! If you can read this, do this. Otherwise, ignore it." To take your CSS from the media query and put it into the conditional comment, just paste everything from the #IEMessage div into the space between <style> and </style> tags.

 

 

<!--[if lte IE 9]>

<style>

 

</style>

<![endif]-->

 

 

Add the <div> to the <html>

The HTML area of the login.jsp file lays out exactly how the elements on your homepage will be displayed. In this part, you WILL need to worry about positioning because these are the content and formatting information that is passed to the browser.

 

In our case, I added the warning above the login options (we have three buttons from which users select their role in our system and are then directed to the login page appropriate to their role).

 

This part contains the actual text of the message, and you can say whatever you want, just make sure it's properly formatted. The key is to create a <div> with the ID of "IEMessage" (or whatever you named the div in the CSS) and insert all your code.

 

 

<div id="IEMessage" style="margin-left: 5px; margin-right: 5px;">

<h1>WARNING!</h1>

<b><i>We have detected that you are using Internet Explorer to access Blackboard.</i></b><br><br>Please note that Internet Explorer is<b>not</b> compatible with Blackboard and may not perform as expected. To avoid errors and frustration, we

<b>strongly</b> suggest that you use a different web browser.<br><br>For best results, we recommend <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Mozilla Firefox</a>,<br> but any of the <a href="https://help.blackboard.com/Learn/Student/Getting_Started/Browser_Support" target="_blank">supported browsers in this list</a> will work as well.<br><br>

If you wish to proceed using Internet Explorer, you may log in below.

</div>

 

Now, all you have to do is save your updated file, upload it into Blackboard and navigate to your login page using Internet Explorer. If it worked, you'll see your message displayed.

 

ie_warning.png

 

To see how it will render under various versions of Internet Explorer, you can click on the cog in the IE menu and select "F12 Developer Tools" from the dropdown. To preview the page as it would be rendered in other versions of Internet Explorer, change the document mode by clicking on the funky little document mode icon (just to the right of "Memory" in the menubar) and selecting which version of IE you'd like to render the page using.

 

iedevtools.png

 

At this point, there are only 3 more things you need to do....

 

  1. Tweak.
  2. Test.
  3. Repeat.

 

Hopefully this made some sense to someone out there.

Outcomes