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 11 of 11
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    What is the best way to toggle multiple divs with navigation menu?

    A website that I am developing has all the content on one page. As it is right now there is a Portfolio section, an About section, and a Contact section. The navigation menu has these three options and when one is clicked whichever section is displayed fades out and the new section fades in.

    My problem is that I think my code could be much more effective and precise.

    If I were to click on Portfolio and bring up that section and then click on About, it would fade out Portfolio and bring up About. However if I wanted to go back to portfolio I would have to click twice because the initial click is still telling it to fade out Portfolio.

    The js is:

    Code:
    <script>
    $('.portfolio').toggle(function() {
    $('.3').fadeOut('slow', function() {
    $('.portfoliocontent').fadeIn(2000);
    });
    }, function() {
    $('.portfoliocontent').fadeOut('slow');
    });
    
    </script>
    
    <script>
    $('.about').toggle(function() {
    $('.2').fadeOut('slow', function() {
    $('.aboutcontent').fadeIn(2000);
    });
    }, function() {
    $('.aboutcontent').fadeOut('slow');
    });
    
    </script>
    
    <script>
    $('.contact').toggle(function() {
    $('.1').fadeOut('slow', function() {
    $('.contactcontent').fadeIn(2000);
    });
    }, function() {
    $('.contactcontent').fadeOut('slow');
    });
    
    </script>
    The HTML for the list is:
    Code:
    <div id="navigation">
    
    <ul>
    
    <li class="portfolio">
    	<a class="portfolio">Portfolio</a></li>
    
    <li class="about">
    	<a  class="about">About</a></li>
    
    <li class="contact">
    	<a  class="contact">Contact</a></li>
    	</ul>
    </div>
    And the HTML for the hidden divs is:
    Code:
    <div class="portfoliocontent 1 2">...</div>
    <div class="aboutcontent 1 3">...</div>
    <div class="contactcontent 2 3">...</div>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I think your problem here is not that the previous animation is still completing. With your current code, a click on Portfolio fades the required divs in. A click on About then fades those divs out and the About divs in. But then another click on portfolio fades that div out - but it's already faded out from the click on About, so nothing happens.

    Your code itself is already toggling.

    A better approach I think would be to use a click event instead of the toggle. The click event fades in the required div and fades out any not required, and that's it. So then a click on Portfolio will always fade in those divs.

    Hope that makes sense. If that does what you want then this:

    Code:
    $('#navigation a').click(function(){
    	var $content = '.'+$(this).attr('class')+'content';
    	$($content).fadeIn(2000);
    	$('#wrapper div:not('+$content+')').fadeOut('slow')
    });
    would do things quite concisely.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I have a feeling it's user error on my end...but I could not get anything to happen on click with the new code. And is there a way to fade the same section out when clicked again?

    Thank you for bearing with me in my posts.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Partly my fault, I envisaged your content divs being wrapped in a div with id #wrapper. Just forgot to say this....oops.

    How about:

    Code:
    	$('#navigation a').click(function(){
    		var $content = '.'+$(this).attr('class')+'content';
    		if ($($content).hasClass('active')) $($content).fadeOut('slow').removeClass('active');
    		else $($content).fadeIn(2000).addClass('active');
    		$('#wrapper div:not('+$content+')').fadeOut('slow').removeClass('active');
    	});
    To explain:
    Line 1- when any link in the navigation div is clicked
    Line 2 - read the class attribute of the clicked link, prepend '.' and append 'content' so we can use this as a variable holding the class of the associated content div
    Line 3- if the associated content div has a class of active (so it's already visible), fade it out, and remove the active class
    Line 4 - otherwise (it's not visible), fade it in and add the active class
    Line 5 - all other divs within #wrapper which do not have the required content class, fade out and remove the active class

    There might be a slightly tidier way to do it, but this works. If you have your content divs visible when the page loads, then you'd need to assign the active class to these.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Actually:

    Code:
    	$('#navigation a').click(function(){
    		var $content = '.'+$(this).attr('class')+'content';
    		if ($($content).hasClass('active')) $($content).fadeOut('slow').removeClass('active');
    		else $($content).fadeIn(2000).addClass('active');
    		$('.active').not($content).fadeOut('slow').removeClass('active');
    	});
    is a bit tidier. This assumes no content divs are visible on load.

  • Users who have thanked SB65 for this post:

    JasonSims (11-08-2010)

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    You are helping me out tremendously and I appreciate your help so much!

    My issue now is that I have divs inside of the portfolio content and they are not visible because the active class is being removed...I have tried a couple different things but I don't know what I need o do to make those visible.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Not sure I understand the issue - you've got other divs within the .portfoliocontent div? Shouldn't these be visible with the parent div?

    Are you using the code with:

    Code:
    $('#wrapper div:not('+$content+')').fadeOut('slow').removeClass('active');
    - so other divs which shouldn't be affected are being faded out? In which case replacing this with:

    Code:
    $('.active').not($content).fadeOut('slow').removeClass('active');
    per post#5 should avoid that.Or is something else?

  • Users who have thanked SB65 for this post:

    JasonSims (11-08-2010)

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That worked perfectly!



    Okay, so I have one FINAL hangup. I have a script for a gallery in the portfoliocontent. If the div is not set to display:none (if it's shown when the page first loads) then it functions great. If, however it is hidden until it is called then no images are displayed and the div "ad-image" does not carry the right values for dimensions or position.

    An example of each can be found here and here.
    Last edited by JasonSims; 11-08-2010 at 12:50 AM.

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Yes, I've tripped over that a few times myself. The impact varies slightly from browser to browser.

    I've addressed this by initially positioning the image off the page - with a big negative margin or whatever, then hiding the image once the width calculations are done.

  • Users who have thanked SB65 for this post:

    JasonSims (11-09-2010)

  • #10
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Let me see if I have the right idea.

    If I start the portfoliocontent div as something with a class other than that with a negative margin that pushes it off screen, then I should be able to add the portfoliocontent class to that div via javascript, making it hidden and repositioning it and remove the previous class that had the big negative margin.

    Is that idea on track?

  • #11
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Got it!

    I changed the div class to "precontent" and added this code:
    Code:
    <script>
    $(function(){
    	$(".precontent").addClass('portfoliocontent').removeClass('precontent');
    	});
    </script>
    It worked perfect. Thank you so much for your help!


  •  

    Posting Permissions

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