...

View Full Version : jQuery What is the best way to toggle multiple divs with navigation menu?



JasonSims
11-07-2010, 12:47 AM
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:


<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:

<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:


<div class="portfoliocontent 1 2">...</div>
<div class="aboutcontent 1 3">...</div>
<div class="contactcontent 2 3">...</div>

SB65
11-07-2010, 09:42 AM
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:


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

would do things quite concisely.

JasonSims
11-07-2010, 03:24 PM
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.

SB65
11-07-2010, 04:14 PM
Partly my fault, I envisaged your content divs being wrapped in a div with id #wrapper. Just forgot to say this....oops.

How about:


$('#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.

SB65
11-07-2010, 04:31 PM
Actually:


$('#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.

JasonSims
11-07-2010, 05:21 PM
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.

SB65
11-07-2010, 05:31 PM
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:


$('#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:


$('.active').not($content).fadeOut('slow').removeClass('active');


per post#5 should avoid that.Or is something else?

JasonSims
11-07-2010, 10:26 PM
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 (http://norwood-photography.com/fadetest.html) and here (http://norwood-photography.com/fadetest2.html).

SB65
11-08-2010, 07:46 AM
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.

JasonSims
11-09-2010, 12:47 AM
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?

JasonSims
11-09-2010, 01:19 AM
Got it!

I changed the div class to "precontent" and added this code:

<script>
$(function(){
$(".precontent").addClass('portfoliocontent').removeClass('precontent');
});
</script>

It worked perfect. Thank you so much for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum