JSHack: Collaborate Help

As part of my roll-out plan for Blackboard Collaborate I wanted to add some light contextual help that acknowledged that Collaborate was something new, that directed staff and students to support resources, and that stated the recommended browsers.  To this end I created a JSHack which I am now sharing to the wider community.


(Download link at end of article)

This is a simple box that floats at the bottom left corner of the collaborate screen within Blackboard.  It is easy for others to adjust to their preferred content and colour scheme.

To try to make it a little more prominent I added an animation where the box sweeps in from the right.  I tried to find the balance of subtle but noticeable.

Animation showing the help box sliding in. 

I have added a CSS rule to disable the animation when a user configures their browser to say they prefer the least amount of motion possible.

Since it is so simple I thought I would show the html and css and how easy you can re-purpose it, or suggest improvements to make it better.

First the HTML part of the snippet.  Here it loads the separate css file I made and sets up a simple div containing the info and a button to close it in case it gets in the way.  It will only be closed for that moment.  Going back into the Collab area will make the help box appear again.

<link rel="stylesheet" type="text/css" href="${resourcePath}/collabhelp.css">

<div id="MLEcollabfooter">
  <a href="#" title="Close." id="MLEcollabfooterClose" onclick="closeMLEcollabfooter()" alt="Close." style="display:block;float:right;"><img src="/images/ci/ng/close_mini.gif" align="right" height="18px"></a>
  Blackboard Collaborate is new.<br />
  Visit <a href="https://elearn.southampton.ac.uk/collaborate" target="_blank">our website</a> for more information.<br />
  For the best experience use Chrome or Firefox. 
</div>

Further into the snippet is a little bit of very simple JavaScript to allow the close button to work.

<script type="text/javascript">
function closeMLEcollabfooter() {
  var x = document.getElementById("MLEcollabfooter");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Next the CSS to which I have added comments inline.  Having learned about "prefers-reduced-motion" this is my first time using it.

/* Styling for the floating info box */
#MLEcollabfooter {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    line-height: 1.1 !important;
    background: #00131D;
    color: #E1E8EC;
    position: fixed;
    bottom: 2rem;
    right: auto;
    height: auto;
    width: 450px;
    z-index: 1;
    text-align: left;
    border: 3px solid #EF7D00;
    border-radius: 10px;
    padding: 1rem;
}

/* Styling for links... */
#MLEcollabfooter a {
    color: #B3DBD2;
}

#MLEcollabfooter a:hover {
    color: #FCBC00;
}

#MLEcollabfooter a:focus {
    outline: 2px solid #C1D100;
    outline-offset: 2px;
    transition: outline-offset .2s linear;
    color: #FCBC00;
}

#MLEcollabfooterClose:hover {
    outline: 2px solid #C1D100;
    outline-offset: 2px;
    transition: outline-offset .2s linear;
}


/* Tweak width and positioning slightly for smaller devices. */
@media only screen and (max-width: 700px) {
    #MLEcollabfooter {
        width: auto !important;
        overflow-y: auto;
        right: 1rem;
        left: 1rem;
    }
}

/* Make it slide in when loading, helping to make it more noticable */
@media (prefers-reduced-motion: no-preference) {
    #MLEcollabfooter {
        animation: nudge 1s ease-out;
    }
}

/* Remove animation if reduced motion is preferred by client */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
    }
}

/* Key frames of sliding in animation */
@keyframes nudge {
    0% {
        transform: translate(100px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

Hopefully it's clear that even if you only wanted to change the colours it is easy to do so.  Considering this time last year I had just started learning CSS it is nice to reflect upon it not taking more than an hour to make this and another few hours over the course of a week fine-tuning.

Download
This requires JSHack for Blackboard.  JSHack is very simple to install.  Once you have it you can simply upload the zip file below and enable it.

Download the Floating help for Collaborate
Filename: MLE-COLLAB-INFO.zip
Size: 2.40 KB

The final result within our Blackboard environment.