[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 431
  • Last Modified:

JQuery Menu system with dynamically loading sections?

Hello Experts,

I'm *really* hoping someone can help with this.

I've created a library system for thousands of documents which has a left hand navigation menu. For the navigation menu I've used Filament's iPod-style menu (http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/) which works wonderfully. The users aren't very technical at all, but they have all immediately understood the iPod style menu which is a major coup.

However, the client has decided they want to have multiple levels of navigation instead of the original two. While the plugin is working just fine in itself, the unordered list for the menu is massive (removing all the whitespace takes it down to 128Kb, but the menu will only get longer with time). I know it doesn't seem very large, but the system is running on a low-bandwidth intranet and the menu is causing the page to take well over 3 minutes to load and for some users in the test group, nothing loads at all and the browser crashes.

I'm currently trying to make the menu into some kind of AJAX object which could be cached (is that a good idea?)  but I'm coming to the conclusion that's what needed is a menuing system that dynamically loads (and maybe even pre-loads) sections on demand and retains them in the DOM. I've been googling for the past couple of days and haven't been able to find anything which comes close. This makes me rather reluctant to start building one myself as I might get myself into horrible trouble, and the project is already a week late.

Does anyone know of anything that might fit the bill?

500 points as ever, and I wish I could give as much beer as you can drink for a solution!
0
Dave6969
Asked:
Dave6969
  • 5
  • 5
1 Solution
 
anoyesCommented:
I did some playing around with this menu and it doesn't seem like there's any easy way to get it to dynamically load sub-menus as you go.  I think the only way to get around this issue is to do some hacking of the menu script itself.  I have a couple of thoughts.  The first is that you could store the menu as a JavaScript object in an external file, which would accomplish a couple of things.  The overall size of the menu would go down, because you wouldn't need all the HTML markup associated with it.  The second is that the JS file containing the actual menu definition could be cached by the browser.  Additionally, with this method you can still have the ability to detect whether or not there is a sub menu under an item instead of having to forcefully tell the script if there is.  My other thought was to break the HTML markup into separate files by menu category or something, and then modify the menu script to load these files when a menu item is clicked.  If either of these seem appealing to you or you want more clarification, let me know and I can start walking you through the process / clarify for you.
0
 
Dave6969Author Commented:
Hi,

Thanks for having a play around with it. I've been tearing my hair out over it. I also tried the BDC menu which is similar, but doesn't seem to work under IE6 (yes I know, but it's the corporate standard and ain't changing any time soon!). I even started work on building my own from scratch using the ScrollTo plugin, I've got into a bit of a mess floating ULs against each other, but I've just realised that even if I can do it, ScrollTo will scroll through *all* the submenus and then stop at the right one, which will be confusing for the user. Sigh.

On a completely unrelated project (stick with me, because it does have bearing here) I've been playing with UI 1.6 and just updated the libraries to 1.7 and I've found that users were still seeing the cached 1.6 libraries nearly two weeks after they had been replaced! So I'm now wondering if a cached menu file is a good idea at all. The navigation menu would rarely change, but if it took weeks to be updated when it did change that would be unacceptable.

I did notice that DeviantArt was using a menu very similar to the one I'm playing with and they seem to be using a JSON list (correct me if I'm wrong).

I have a call with the agency that provided it tomorrow (as the marketing dept is getting very angry about the whole thing), but if your solutions are quick and relatively easy to implement then I would definitely be interested as that would be brownie points for me!
0
 
anoyesCommented:
This is the start I have so far.  Let me know if this looks like it'll fit your needs and I'll keep working with it.  Basically it loads up the menu via a JSON file.  The only bit I don't have working at the moment is the back button.  I uploaded the files in question, with a text extension.  It wouldn't let me just upload a zip with everything so you may have to fix references to jQuery, etc.

fg.menu.js.txt
menu.js.txt
index.html.txt
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Dave6969Author Commented:
Thank you VERY much. I've downloaded it and will try it out later this evening.

One small thing to add which may make a differnce. I'm not actually using the hyperlinks but instead giving the links IDs which then load in another DIV via AJAX (well, not XML but HTML, but you know what I mean)

Does that have any bearing? I guess I'll find out when I try it out in a while.
0
 
anoyesCommented:
Yah, I've got it set up to use the links to actually go to the page if there's no submenu under an item.  It's easy enough to change that tho, and could easily be set up to load divs instead of navigate pages.
0
 
Dave6969Author Commented:
I'm really sorry about not getting back to you.

On top of everything else I managed to get a dose of food poisoning and am only just getting back up to speed with everything. It'll take me a few days but I will test this soon.

Always check your chicken is fully cooked! ;-)
0
 
anoyesCommented:
Ugh that's no good.  Gotta watch out for those pesky chickens - they'll getcha.  Take your time, I've got plenty of stuff to keep me busy haha
0
 
Dave6969Author Commented:
HI.

Sorry for the delay on this.

In the end we decided to go down a completely different route. I'm going to award you the points anyway, as you were extremely helpful.
0
 
Dave6969Author Commented:
Solution not implemented as we decided to explore other possibilities.
0
 
anoyesCommented:
No problem, thanks for the points!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now