Built myself into a Jquery corner on Team module. Help

JavaScript
1

Hello. I’m attempting to build a jquery based, responsive module for the Team page of a website. I have a development link here:

http://devonline.wpengine.com//wp-content/uploads/test/team-portfolio.html

I think the way I want this to work should be obvious. You click a team member and a detail of his information opens up in a ‘detail’ channel div below the headshots. When you click on another team member, it should open that persons details … etc.

I’m having code collision issues and am too new to Jquery to get my head around what’s happening, so I am open to even doing this a new way. Might have backed myself into the proverbial Jquery corner on this one. That is unless somebody sees a way I can still save this.

Here’s basically what happens when you click a picture.

  1. Since there will ultimately be two “detail” rows that can expand to accomodate 10 team members, I will need to make sure the opposite channel is closed every time a click is made. I used this line of code, which is just a reverse animation from the one that opened the div, to achieve this. It animates back to it’s original state:

$(“.expand-row-2”).css({maxHeight:‘0px’ , padding:‘0em’});

  1. I’m switching the display of other people’s blocks of code to turn everything off except the div I want to be revealed when the “detail” channel animates open. Since I want this whole thing to be responsive, I then set the code block I want to reveal temporarily to visibility:hidden to make the DOM account for it’s height. Otherwise it wouldn’t know how far to open this “details” channel. I don’t want to hard code here. The height should be determined by the contents of the channel div (.member-detail).

$(“.team-member-2-block”).css(“display”,“none”);
$(“.team-member-3-block”).css(“display”,“none”);
$(“.team-member-4-block”).css(“display”,“none”);
$(“.team-member-5-block”).css(“display”,“none”);
$(“.team-member-1-block”).css(“visibility”,“hidden”);

The animate function that comes next will take this temporary height into account to tell it how far to open:

$(“.expand-row-1”).animate({maxHeight:‘10000px’ , padding:‘2em’}, 1000, function(){ $(“.team-member-1-block”).css(“visibility”,“visible”); });

I’m animating from max-height:0px to max-height:10000px. This tells query to just animate to the exact height of this div and it’s contents. Once this is determined, I’m using another function as a callback to set visibility to visible to pop the contents onto the screen. Again, I want this responsive and if I hard code heights here, it wouldn’t slide open enough on mobile devices since the narrow screen pushed content further down a page. I want my “detail” channels to only open enough to reveal it’s contents (.team-member-1-block).

That’s basically it … then I just need to reverse everything when the “collapse” button is clicked. Right now I have this code for the collapse button. It works, but is not returning my content divs to their correct state. In firebug I can see that somehow after the first animation, everything is set to visibility, hidden and display, block.:

$(“.collapse”).click(function(e){
e.preventDefault();
$(“.member-detail”).css(“visibility”,“hidden”);
$(“.member-detail”).css(“display”,“none”);
$(“.detail-row”).animate({maxHeight:‘0px’ , padding:‘0em’});
});

What I think is happening is, after you test this once by, say, clicking on the Pepe LaFlorian picture, for some reason in Firebug the display is now set to ‘none’ and visibility is back to invisible, so the second time you click Pepe, it doesn’t know how far to open and only opens up enough to account for that DIVs padding.

What I’m asking: is there a way I can alter the code I have to make this module work every time a picture is clicked? If not, is there a better way to do this all together?

Here’s an earlier version that kind of works: http://devonline.wpengine.com/team/ … What I don’t like is the fact that I have to animate my padding in or else the whole div channel won’t close up all the way. It still accounts for the padding. I’ve been asked to avoid that look where the animation cause the contents to shift as the padding comes in. We just want a straight fadeIn().

Thanks!
| scott

2

I’m making progress …

I realized I could snag the height from the height() function and then use this in my animation. That worked really well.

I’m having a new issue now which is that, if you click on someone from the second row, it works … but if, after that, you click on someone from the top row, it won’t expand all the way. Something about clicking in that second row causes the top row to lose the height variable that I had stored.

I’m using this to determine my height:

var calculateExpandRowHeight1 = $(“.team-member-1-block”).height()+100;
var suffixPx = “px”;
var finalExpandRowHeight1 = calculateExpandRowHeight1+suffixPx;

This give me a number which is then appended with the “px” suffix. This value is then used in my dynamic animation with callbacks:

$(“.team-member-1-block”).fadeOut(1000 , function(){ $(“.expand-row-1”).animate({height:finalExpandRowHeight1 , padding:‘2em’}, 1000, function(){ $(“.team-member-1-block”).fadeIn(1000); }); } );

But after having clicked on a face from the lower row, these nested functions don’t perform as expected.

Here’s the whole code block for Pepe LaFLorian’s click function (each person has their own code block like this right now since I’m an OOP newbie.)

/* row 1 scripting /
$(“a.team-member-1”).click(function(){
/ collapse other rows if open /
$(“.expand-row-2”).css({height:‘0px’ , padding:‘0em’});
/ click settings for this module /
$(“.team-member-2-block”).css(“display”,“none”);
$(“.team-member-3-block”).css(“display”,“none”);
$(“.team-member-4-block”).css(“display”,“none”);
$(“.team-member-5-block”).css(“display”,“none”);
/ fadeOut() module then use callback to fadeIn() */
$(“.team-member-1-block”).fadeOut(1000 , function(){ $(“.expand-row-1”).animate({height:finalExpandRowHeight1 , padding:‘2em’}, 1000, function(){ $(“.team-member-1-block”).fadeIn(1000); }); } );

});

New dev URL: http://devonline.wpengine.com/wp-content/uploads/test/team-portfolio-3.html

3

That was solved. I had one area where I had left maxHeight instead of height. Ooooops … That took some time to figure out …

Disregard everything above at this point. The new issue is: how can I make the the animations start quicker? After clicking on Pepe, there is a niticable delay before his detail row animates. It’s as if I did this fadeIn(3000); but I didn’t do that. Something else appears to be causing the lag time.

http://devonline.wpengine.com/wp-con...rtfolio-3.html