Using JavaScript to Change the Order of Menu Items

NOTE: Programming changes made through JavaScript and CSS are not supported by the dominKnow support team.  

In some cases, your organization may want to prioritize the order of certain menu items.

While dominKnow | ONE's theme designer is quite flexible, you are not able to change the order of items in the menu of the course player. However, you can take advantage of the "Add JS" option in the theme builder to make these types of changes. 

Adding JavaScript to a Theme

Steps:

  1. Edit your desired theme.
  2. Select Add JS.
    1. NOTE: If you do not see this option, then it has been disabled by your admin for your user role. There are a variety of permission settings that an Admin (with the right permissions) can turn on and off. They will need to turn this option on to enable you to add JS to a theme.
  3. Paste in the JavaScript.
    1. NOTE: Do NOT include tags in your code. The code will automatically be put into script tags within the HTML.
  4. Select OK.
  5. Select Save.
  6. Test your changes.

Code for changing the order of menu items

This sample code is changing the order of items and putting "Course Outine" above Custom Menu Items. If you have no custom menu items, then you will not see a change.

NOTE: This code requires you have one or more custom menu items in the Course Player theme to work.

/**
 * Move "Custom Menu Items" after "Outline" in the left nav.
 */
(function () {
  var SOURCE_ID = "navmenu_custom0_wrapper";   // the 
  • you want to move var AFTER_ID = "navmenu_outline_wrapper"; // the
  • it should follow function moveAfter(sourceEl, afterEl) { if (!sourceEl || !afterEl || !afterEl.parentNode) return false; var parent = afterEl.parentNode; var next = afterEl.nextSibling; // If it's already in the right spot, do nothing if (next === sourceEl) return true; parent.insertBefore(sourceEl, next); // insertBefore(null) appends at end return true; } function runOnce() { var sourceEl = document.getElementById(SOURCE_ID); var afterEl = document.getElementById(AFTER_ID); if (!sourceEl || !afterEl) return false; return moveAfter(sourceEl, afterEl); } // Try immediately, then poll briefly in case the menu mounts later. function init() { if (runOnce()) return; var tries = 0, max = 200; // ~10s at 50ms var iv = setInterval(function () { if (runOnce() || ++tries >= max) clearInterval(iv); }, 50); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } // Re-apply after dynamic updates (e.g., menu rebuilt) if (window.MutationObserver) { try { var mo = new MutationObserver(function (muts) { // Only do work if something relevant changed for (var i = 0; i < muts.length; i++) { var m = muts[i]; if (!m.addedNodes || !m.addedNodes.length) continue; // Cheap heuristic: if left menu or the two items appear, try again for (var j = 0; j < m.addedNodes.length; j++) { var n = m.addedNodes[j]; if (n.nodeType !== 1) continue; if (n.id === "left_menu" || n.id === SOURCE_ID || n.id === AFTER_ID || n.querySelector && (n.querySelector("#" + SOURCE_ID) || n.querySelector("#" + AFTER_ID))) { runOnce(); return; } } } }); mo.observe(document.documentElement, { childList: true, subtree: true }); } catch (e) {} } })();
  •   0     0

    Similar Projects

    Questions  ( 0 )