View Full Version : Drill Down Menu doesn't work well with jQuery Ajax

07-11-2012, 02:27 PM
1) Script Title: Drill Down Menu (v1.6)

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

3) Describe problem:

The script works fine when the list is short. But I am working with an enormous list with a lot of duplicate information, which makes it very buggy. Internet Explorer doesn't even open it.

The best way to speed things up would be (imho) to load some child-elements (especially the duplicate elements) with AJAX.

So i added this to the header:

<script type="text/javascript">
url: "list.html",
cache: false
}).done(function( html ) {

And used jQuery 1.7.2 instead of jQuery 1.3.4

What i did next is:

<div id="drillmenu1" class="drillmenu">
<li><a href="#">Geslacht</a>
<li><a href="#">Man</a><ul class="result"></ul></li>
<li><a href="#">Vrouw</a><ul class="result"></ul></li>

This speeds things up, but i found two bugs that i can't seem to solve with my limited knowledge of jQuery and JS.

1. When list.html contains a list with child-elements, it doesn't drilldown to them. It just lists everything below each other.

2. When it does that, it doesn't show a scrollbar in the drilldown menu.

For an expert i think this isn't to hard to fix, but i can't solve it after a day of trial and error.

07-13-2012, 10:59 AM
Small update.

1. I managed to split the lists up a little, so i worked around the problem. It's significant faster now and I am able to use AJAX for about half the list. If someone knows a solution, please let me know, because i'd ofcoarse like everything in AJAX.
2. Is solved by simply adding overflow:auto to the ul.

Another question:

I want to toggle this drillmenu. But when I am using the standard jQuery toggle function, or CSS toggle options. I have to use display:none in a div around the block. So far so good, but when i toggle it, i'll just see some small part of the drillmenu. Playing with height etc. doesn't work.