Solved

JQuery Menu system with dynamically loading sections?

Posted on 2009-04-03
10
413 Views
Last Modified: 2012-08-14
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
Comment
Question by:Dave6969
  • 5
  • 5
10 Comments
 
LVL 16

Expert Comment

by:anoyes
Comment Utility
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
 

Author Comment

by:Dave6969
Comment Utility
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
 
LVL 16

Expert Comment

by:anoyes
Comment Utility
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
 

Author Comment

by:Dave6969
Comment Utility
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
 
LVL 16

Expert Comment

by:anoyes
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:Dave6969
Comment Utility
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
 
LVL 16

Accepted Solution

by:
anoyes earned 500 total points
Comment Utility
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
 

Author Comment

by:Dave6969
Comment Utility
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
 

Author Closing Comment

by:Dave6969
Comment Utility
Solution not implemented as we decided to explore other possibilities.
0
 
LVL 16

Expert Comment

by:anoyes
Comment Utility
No problem, thanks for the points!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now