Ask a Jedi: Delaying CFMENU

Ronald asks:

Ray, I am new to ColdFusion (and web programming) and really like the new CF8 menu tags. I am using a horizonal menu on a site I am developing and on one page I have embedded a google calendar. It works great except that it takes a couple of seconds to get the google calendar and during that time the menu gets a little crazy and show the menu items in horizonal fashion. It only lasts a second or 2, but is enough to be an annoyance. Do you have any suggestions? Is there a way to turn off the menu until after the page content appears?

Absolutely. Don’t forget that you can embed items on a page via the CFDIV tag. Consider this simple example:

<!--- Menu ---> <cfdiv id="menuDiv" />

<p> Normal content… </p> </code>

When rendered, all you will see is “Normal content…” because we didn’t actually load anything into menuDiv. ColdFusion makes it easy to load the content though via the ColdFusion.navigate function:

ColdFusion.navigate('menu.cfm','menuDiv');

Where menu.cfm is simply your menu. Here is what I used:

<cfmenu name="mainMenu" selectedFontColor="white" selectedItemColor="red"> <cfmenuitem display="Alpha" href="foo" /> <cfmenuitem display="Geta" href="foo" /> <cfmenuitem display="Gamma" href="foo" /> </cfmenu>

The only thing you have to remember is to use the CFAJAXIMPORT tag in your main page. This “warns” ColdFusion that it will be using a feature at some point that requires particular JavaScript files. Here is the complete sample file I used.

<cfajaximport tags="cfmenu"> <html> <head> <script> function loadMenu() { ColdFusion.navigate('menu.cfm','menuDiv'); } </script> </head>

<body>

<!— Menu —> <cfdiv id=”menuDiv” />

<cfset sleep(2000)> <p> Normal content… </p>

</body> </html>

<cfset ajaxOnLoad(“loadMenu”)> </code>

In my code, I used a sleep() call to represent the ‘slow’ Google Map. I told the page to run loadMenu when done. You would need to change this to find some other way to see if your Google Map is done. All loadMenu does then is load the menu into the div.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments