Drop Down Menu / Posts /

How to check if menu has loaded?

1
Hi.

I'm aware of how to load the menu manually, but how do you check to see if it loaded?

My external scripts (including the ddmenu script) are loaded deferred and use an external menu.

Occasionally I notice no menu, just the menu link. I suspect it's a timing problem and I need to delay loading the menu or run a script that tests for the presence of the menu and the loads it via ddmenu.init();

If I simply run init I will usually get two menus, which is obviously not what I want.

Obviously I could also just inline the menu, but I'd rather explore other options first.

Thanks.

Rick Steinwand  10 years ago   viewed: 7514    

5 Answers

0

You can add the following script to your page and call it at the time you need:

<script> function isMenuReady() { var menuReady = false; if (ddmenuOptions) { var myMenu = document.getElementById(ddmenuOptions.menuId); if (myMenu) { var lis = myMenu.getElementsByTagName("li"); if (lis.length) menuReday = true; } } return menuReady; } </script>

Is it fit for your scenario?

You may have noticed the var ddmenu = new McDdMenu(ddmenuOptions); in the ddmenu.js, but you cannot test it by
 if(ddmenu) {return true;}
as even if ddmenu is initialized, the DOM may not be ready and the ddmenu is still waiting for the DOM ready event to populate the menu.

Milo   10 years ago
0
Thanks for the prompt reply, but unfortunately not. 

Maybe a better question would have been "how to run a function after the menu loads"?
Rick Steinwand   10 years ago
0
Yes function check is the right approach:
<script> function isMenuReady() { var menuReady = false; if (typeof ddmenu.init == "function") { menuReday = true; } return menuReady; } </script>
Milo   10 years ago
0
Thanks, but I think you misunderstood me.

After ddmenu has finished loading and is visible, I'd like to run a function to tweak the location of items in the header. I can't do that until I know the size and position of the menu. (I'm using a responsive layout so the menu could be anywhere.)
  1. menu init()
  2. menu functional and visible
  3. now run my script.
Just wondering if there's something more elegant than running a simple timer
var ready = false;
do{
    ready = isMenuReady();
    (1 second timer)
}
while(ready==false);
fixAppearance();

Thanks.
Rick Steinwand   10 years ago
0
Within the ddmenu constructor, var ddmenu = new McDdMenu(ddmenuOptions), it has a built-in function that will check if DOMContentLoaded(same as jQuery's $(document).ready), and if the menu's parent element is visible. When those conditions are met, the ddmenu will be fully populated, and then return an object that contains the init() function. The constructor will not call the ddmenu.init(), but the init() can be called manually by user when required(for example, the ddmenu HTML has been changed, and need to re-populate the menu).

Currently there is no even handler to be triggered when the ddmenu is fully populated. So you have to set a repeated timer loop to run/check the isMenuReady() function as you mentioned. 
Milo   10 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲