Forked for Brightspace VLE: Responsive Full Width Tabs (from Codrops Blueprints)

1. Upload the entire contents of the repo into Shared Files, in a directory named "fullwidthtabs"

2. The below code goes in a widget at the root of your Learning Environment and is then shared with courses as appropriate (I've left the CDATA nonsense that Brightspace inserts as it attempts to sanitize the code so you aren't puzzled when the code changes):

<script>// <![CDATA[
(function() {
     var contentFile = '/shared/fullwidthtabs/index.html';
     var iframe = document.createElement('iframe'); 
    iframe.addEventListener('load', function() { 
    var orgUnitId = {orgUnitId};
    var UserName = '{UserName}';
    iframe.contentWindow.start(orgUnitId, UserName); 
    }); 
    iframe.style.width = '100%'; 
    iframe.style.height = '700px';
    iframe.src = contentFile; 
    document.currentScript.parentNode.insertBefore(iframe, document.currentScript);
    })();
// ]]></script>

Then identify each LTI link that requires an {orgUnitID} token with its own id in the HTML

EG:

<div class="mediabox"><a id="mindomoLink" href="/content/" target="_blank"><img src="img/smallermindomo.png" alt="Mindomo Logo" /></a>
<h3>Mindomo</h3>
</div>

That URL is then constructed by the "function start(orgUnitId)" javascript function at the bottom of index.html

document.getElementById("mindomoLink").href = "https://hwdsb.elearningontario.ca/d2l/common/dialogs/quickLink/quickLink.d2l?ou=" + orgUnitId + "&type=lti&rcode=eLO-9882434&srcou=7587";

##Credits, Props, Thanks:

• Initial widget code provided by Jacob Parker (https://github.com/j3parker) on the Brightspace Community Forum:

https://community.brightspace.com/devcop/f_technical/code_getting_stripped_from_widget_in_html_editor

• Javascript triaging by https://github.com/bfowler

• and Codrops for the entire full width tabs blueprint:

100% width tabbed content with some example media queries for smaller screens.

article on Codrops

demo

The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration. Check out all of our Blueprints here

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License