Using JavaScript to Alter Topic Menus

 Article #: GEN1022Z  Product: Flare   Version: 2017 r3

Summary:

As of Flare version 2017 r3 we've added a "loaded" jQuery event that will fire once the dynamic menu finishes loading. If a user’s script listens for that event on the menu, they can handle it with their custom js code. This jQuery event should address issues that arose for users utilizing custom scripts to pull in values from the topic menu. These issues were introduced in Flare 2017 r2 when the menu items went from being written directly to individual topics to being dynamically loaded at runtime.

Solution:

To use this feature, wrap your own custom JavaScript code within the following lines:

$(document).ready(function(){
   $(".menu").on("loaded", function () { 
      [YOUR CUSTOM JAVASCRIPT]
   });
});

If you use the selector ".menu", the code will fire multiple times because the slide-out navigation also has a ".menu" class, in addition to the menu proxy. With that in mind you'll probably want to make the selector more specific, so that it only selects the menu proxy. An example only using the menu proxy:

$(document).ready(function(){
   $(".menu.mc-component").on("loaded", function () { 
      [YOUR CUSTOM JAVASCRIPT]
   });
});

The loaded event can also be used for any other navigation element in Flare’s output that loads dynamically. Below are examples of each.

Menu Proxy:

$(".menu.mc-component").on("loaded", function () { 
   [YOUR CUSTOM JAVASCRIPT]
});

Top Menu:

$("ul.navigation").on("loaded", function () { 
   [YOUR CUSTOM JAVASCRIPT]
});

Off Canvas Menu:

$(".menu.off-canvas-list").on("loaded", function () { 
   [YOUR CUSTOM JAVASCRIPT]
});

Attribution:

Last updated:

October 19, 2017

Author:

Steven Moreno

Contributions by:

David Lee