AJAX Help for Portfolio Items WordPress

• SOLVED

Hey everyone,

I have seen that many people are good with JS here, so I wanted to go ahead and ask this question here because I figure I can get a solid answer.

I have created a custom post type called portfolio and made some custom templates for it. I have made my pagination with AJAX to go through the pieces of work.

What I want to get rid of is the content flash/jump whenever I go to the next/previous portfolio item. The footer comes up and flashes before the next item appears. I know I could stick a loading icon in there, but I do not want that. I simply want the content to fade from the screen, the screen stay still with nothing in that area, and then the next item fade into the screen. Can anyone help me with this?

Here is a link for your reference: [[LINK href="http://media.tgmtestserver.com/portfolio/"]]http://media.tgmtestserver.com/portfolio/[[/LINK]]

Just click on an item and then sort through them. Your help is really appreciated!

Thomas

Answers (2)

2011-05-05

Peter Michael answers:

Give #content a min-height.

---

Thomas Griffin comments:

Don't know why I didn't think of that!

---

Josh Cranwell comments:

removed by request of author

2011-05-05

AdamGold answers:

BEFORE you fade out the content, do something like this:

jQuery('#inner').css('min-height', jQuery('#content').height());
// Now fade out the inner-content..


---

Thomas Griffin comments:

Perfect. :) It works, but I'm going with the solution before because it is less code.