Skip navigation
All Places > System Administrator Community > Blog > 2019 > March
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) {

#IEMessage {

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.

Update April 3rd: Box reported an incident starting at 1:13 PM EDT which impacted New Box View.  Users might have seen latency and/or errors while using Inline Grading within the last few hours.  The issue has been resolved as of 3:28 PM EDT and service should be fully restored.  If you are still seeing any errors or latency, please let me know.

___________________________________________________________________________________________________________

Update March 28th: Box is postponing tomorrow's release to ensure all of the issues we reported are addressed.  We will be working with them to get an updated timeline and will provide updates as we know more.

____________________________________________________________________________________________________________

Update March 22: In case you weren't able to attend the 9.1 Office Hours meeting, Box is tentatively planning to release an update on March 29th.  We will be testing this release before it is made live to confirm the planned fixes as well as the critical regressions with the last release are fixed.  I'll be sharing more information next week, but wanted to give everyone advance notice of the upcoming release.

_____________________________________________________________________________________________________________

You've probably seen me responding to New Box issues but I haven't taken the time to fully introduce myself.  Some of you may know me from Cumulative Update releases, bug discussions or from our Learn Technical Preview program.  If you were an ANGEL client, you might even remember me from Tier 1 Support. I have been with Blackboard for almost 10 years and on the Learn Product Management team for the last 4.5 years.

 

With Trey's departure last month, I am the new lead with the New Box View integration for Inline Assignment Grading and our partnership with Box, Inc.

 

After researching the past few weeks, I've put together a list of the most requested features and where we need to go with the feature. Based on feedback, this will help bring New Box View in better alignment with the previous Crocodoc workflows and add additional functionality.

 

  1. Sidebar- Summary View- In Progress with Box and targeted for release later in the year.
  2. Editing annotations
  3. Re-usable comments/ Comment Bank
  4. Video based comments and feedback
  5. Strike-through Annotation Type
  6. Different colors for highlighting tool
  7. Different line color and drawing line thickness
  8. Indication of Comment in Highlighted Text
  9. Eraser

 

 

In addition to this list, there are navigational and display elements that need improving as well to enhance usability and flow.  While not considered new features, it's worth noting that these will also be reviewed as we drive roadmap discussions with Box.

 

Also, as we move forward, I will add that it's never my intention to be vague with release timelines when sharing information.  I promise to be open as much as possible with available information.  Part of the conversations we're having with Box is improving timeline communication.

 

Please feel free to leave any additional feedback on this post. Part of the research was reviewing Community site threads, but there is a possibility I have missed some important ideas.  I will be at the Office Hours meeting on March 19th at 12 PM ET that Edgar Gonzalez and Mark Burris host to review and discuss feedback as well.

 

As always, I appreciate the candid feedback and passion around improving this feature so it better fits the needs of users.

 

Thanks,
Julia Miller

Product Manager, Learn