Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Unhappy jQuery problem - How to get height for each Nested UL

    Hey guys, so i got a quick question for you.
    I have a mega-nav of sorts on one of my pages.

    It has a list of items, and each one of those have a nested UL.
    Each of those nested UL's are a different height dependent on the amount of <li>'s there are.

    I need to be able to get the the height of each individual UL on hover, and then append the value somewhere else.

    Here is my jquery


    Code:
    (function ($) {
    	$(document).ready(function(){
    		$('.not-front .main-navigation-block #site-nav ul.menu li').each(function(){ 
    			$this = $(this);
    			var $ul = $this.find("ul.menu");
        		var $height = $ul.height();
    
    			$('.not-front .main-navigation-block #site-nav ul.menu li').hover(function(){     
    		        $('.not-front .main-navigation-block').css({ 'padding-bottom' : $height, 'background-size' : $height });
    		    }, function(){
    		    	$('.not-front .main-navigation-block').css({ 'padding-bottom' : '9px', 'background-size' : '10px' });
    		    });
    		});
    	});
    })(jQuery);


    Right now, it is working, but only getting a single value - the height of the last nested UL - I need the height value to be dynamic ( dependent on the <UL> of the hovered List item.

    If this doesn't make any sense, let me know and i can try to provide an example jsFiddle

    Thanks

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Any help guys ?
    Still having problems on this.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    (function ($) {
    	$(document).ready(function(){
    			$('.not-front .main-navigation-block #site-nav ul.menu li').hover(function(){   
    			$this = $(this);
    			var $ul = $this.find("ul.menu");
        		         var $height = $ul.height(); 
                              //not sure hat you want to do with the value so here is how you would append it to a div element.
                              $("#targetdiv").append( $height);
    		        $('.not-front .main-navigation-block').css({ 'padding-bottom' : $height, 'background-size' : $height });
    		    }, function(){
    		    	$('.not-front .main-navigation-block').css({ 'padding-bottom' : '9px', 'background-size' : '10px' });
    		    });
    
    	});
    })(jQuery);

    im not sure why you were nesting your hover bind inside of an each , its not necessary.

  • Users who have thanked DanInMa for this post:

    aaronhockey_09 (03-25-2013)

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Ahhh, that makes a lot of sense.
    Thanks very much !

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    oh also jsut to calrify . what you were doing, was, on document ready, you were getting the height of the first target ul, then permanently assigning those values to your hover bind, thats why it wasnt working as expected

  • Users who have thanked DanInMa for this post:

    aaronhockey_09 (03-25-2013)

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by DanInMa View Post
    oh also jsut to calrify . what you were doing, was, on document ready, you were getting the height of the first target ul, then permanently assigning those values to your hover bind, thats why it wasnt working as expected
    ahh, i knew it was a logic error, but couldnt figure it out.
    Thanks so much for the help.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •