Blackboard - Active Navigation

During the upgrade from SP13 to April 2014, a question was asked about whether we could create an 'active' class for course navigation, extra to the breadcrumbs at the top. The aim was to assist users in knowing where they were in the course, or how they got to where they were.

This was another job for the JSHack building block, and quite complicated compared to previous hacks I had created. The actual function is too big to paste in here, but there are 2 ways that the active link could be determined. The first is through adding to the end of the URL, and checking on page load whether that string exists:

First Method:

Append to URL

if(subLink.href.indexOf('webapps')>-1){
    // If the link is an internal webapp link, try and append '?liRef' to the end.
    subLink.href+='?liRef='+i;
}

Add Active Class

if(_url.indexOf('?liRef=')>-1){
	// This presents true if the link contains ?liRef=# where # is the item number.
    var courseMenu = document.getElementById('courseMenuPalette_contents');
    var subItems = courseMenu.getElementsByTagName('li');
    var x = _url.substring(_url.indexOf('?liRef=')+7);
	// Add the active class to the item.
	uscClassList(subItems[x],'add','active');
}

Second Method:

If this method fails, we jump into a bigger and dirtier one, where we grab the contents of the navigation menu, the breadcrumb trail, and the title of the page. We then grab the root node of the bread trail, and compare the string of that with all of the navigation menu options, if there's a match, we have our active link.

if(breadRoot.innerHTML.trim().toLowerCase() == linkText.innerHTML.trim().toLowerCase()){
	uscClassList(subItems[i],'add','active');
	break;
}

And now, wherever you are in one of our courses, you can see where you came from, however many levels deep you go.