problem with jquery dropdown menu

Question

I'm trying to build a jquery dropdown menu, basically I have the left navigation which is drop down and I have a right section as well, I'm trying to make the height of the left navigation always equal to the height of the right part, it works fine on page load, but when I click on link on the left navigation the products under it will show and the products that were open before will hide, but I get the height of the left navigation as soon as I click on it before the second part is hidden, therefore it's giving me the wrong height, I figured that I have to wait for the click event to finish completely and then calculate height, but I dont know how to do that,

test site to show what I mean

if you click on ladies clothing and then men clothing the height of left navigation wont increase, if you click on men clothing and then ladies clothing the height of the right container gets too big,

jQuery.noConflict();

jQuery(document).ready(function() {
var level2 = jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.level2 > a');

    level2.click(function(e) {
        e.preventDefault();
        var navId = jQuery(this).parent().attr('class').substr(7,9);
        jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.level2 ul.level2 li.level3 > a').slideUp();
        jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.'+navId+' ul.level2 li.level3 > a').slideDown();

        var navHeight = jQuery('div.page div.nav-container').height();
        var mainContainerHeight = jQuery('div.main-container').height();

        if (navHeight > mainContainerHeight) {
            jQuery('div.main-container').height(navHeight); 
        }else {
            jQuery('div.page div.nav-container').height(mainContainerHeight);
        }
});
});

any help would be appreciated.

DanielB · Accepted Answer · 2011-05-19 11:47:55Z

1

You can add a callback function to slideUp(duration, callback) and slideDown() and within that callback you can get the final size of your container.

jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.level2 ul.level2 li.level3 > a').slideUp('slow', onSlideUpDownComplete);
jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.'+navId+' ul.level2 li.level3 > a').slideDown('slow', onSlideUpDownComplete);


function onSlideUpDownComplete()
{
        var navHeight = jQuery('div.page div.nav-container').height();
        var mainContainerHeight = jQuery('div.main-container').height();

        if (navHeight > mainContainerHeight) {
            jQuery('div.main-container').height(navHeight); 
        }else {
            jQuery('div.page div.nav-container').height(mainContainerHeight);
        }
}

Here a link to the Documentation.

answered May 19, 2011 at 11:47

DanielB

20.3k2 gold badges48 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

akano1 Over a year ago

Hi, thanks for the reply, I've changed the code but the problem still exist, any idea why?

DanielB Over a year ago

Fist: insert an alert in your callback and check when its executed. 2nd: You can try setting the height via jQuery('div.main-container').css('height', navHeight + "px");. 3rd You may get the height with .outerHeight() this includes padding and border.

Collectives™ on Stack Overflow

problem with jquery dropdown menu

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related