PDA

View Full Version : Drill Down menu and jquery can't handle huge Menu?



JimmyMcVid
05-27-2010, 12:28 AM
1) Script Title: Drill Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/drilldownmenu.htm

3) Describe problem:

I created a Drill Down Menu using this script. It works great on my main computer ( a Mac Pro) - takes just a few seconds to load.

Unfortunately on less powerful computers, it stalls and I get the "unresponsive script" message. After clicking Continue a couple of times, it eventually works.

Why is this happening? My guess is that my content (the unordered list) is too huge. I mean i have a LOT of content.

So I guess Jquery can't handle that?

is there any fix?

Or does anyone know a Drill Down Menu that does NOT employ jquery?

thanks for any help

ddadmin
05-27-2010, 07:02 AM
How big is your UL list exactly? This isn't a problem with jQuery per say, but rather, just the way the script is designed at the moment- it initializes the entire UL list when the page loads. This works for small to medium ULs just fine, but if your UL is very large,then you may start to experience stalling based on your computer specs. The solution is to selectively load parts of the UL as it is requested, or lazy loading. I may add such a feature the next time the script is updated, though due to the complexity of that, I can't simply post a temporary workaround until that time.

JimmyMcVid
05-27-2010, 08:34 PM
It's an extremely long UL. Works fine on current computers though it takes about 3 or 4 seconds to load.

On older computers I get "unresponsive script" and have to hit continue.

Maybe I should consider other options besides this kind of menu?

I have very little experience but may something using XML tables and PHP... I dunno.

If anyone has any suggestions...

JimmyMcVid
05-27-2010, 08:36 PM
but, yeah. If you added "lazy loading" that would be cool!

I'm not sure if anyone's done that yet.

Also I hear that CSS3 will enable people to create drill downs without Jquery.

djr33
05-27-2010, 08:39 PM
Look into pagination. You can have lines 1-100 on one page, 101-200 on the next, etc.

Pagination can be done in many ways.

There is at least one Javascript-based pagination script here, but it may give you exactly the same problem with overloading the system.

The way to avoid this is to use a serverside language and split it so that you only send 100 rows (or whatever you want) to the user at a time. I don't know if you want to use MySQL (I think it's a good idea), but either way this tutorial gives you the basic ideas/methods to use for pagination in PHP:
http://www.php-mysql-tutorial.com/wikis/php-tutorial/paging-using-php.aspx

You could avoid a database (and XML) entirely if you'd like by just using if statements separating the lines, but that would get messy to maintain.

molendijk
05-27-2010, 09:12 PM
Even a loading time of a few seconds is too much.
This seems to be one of those cases in which a frameset would do the job. But who wants to use them? You could try this (http://www.dynamicdrive.com/forums/showthread.php?t=54447) instead (the menu doesn't have load each time you go to a new page).
===
Arie Molendijk.

JimmyMcVid
05-31-2010, 05:41 PM
So, after emailing with Stu Nicholls about this, he looked into creating a CSS only "drill down" menu.

http://www.cssplay.co.uk/menus/drill-down.html

It can be done for IE and Firefox, apparently.

Safari, Chrome and Opera have a weird positioning bug.

Not sure if this will solve my content size problem.
I'm still very curious if some kind of "lazy loading" can be implemented.

And thanks for the pagination tip. I'll look into it. But implementing that might be a pain each time I update and revise the menu.