Scrolling to expanded DIV problem and links in expanded box

Question

Hi, I'm working on the code for my new portfolio site and I'm using masonry for the expanding grid layout.

I'm having problems with the code that makes it scroll to the expanded DIV. It doesn't always scroll to the upper part of the div .expanded... Here's a sample:

http://bit.ly/axDQox

Try to click box 1 and then box 5. You'll notice that the page scrolls to half-way below box 5. It took me hours to get the scroll-to expanded box working, I'm not really that good in jquery, so help will really be appreciated. :)

Another thing, if you expand box 1 and click on the link, box 1 closes.

I got the sample html/css code from this thread by the way.

Answer 1

This is because the scrollTo function is being called before the animation is finished. The jQuery animate function has a callback just for this reason (you are actually already using it).

.animate({
  width: size[0],
  height: size[1]
  }, function(){
  // show hidden content when box has expanded completely
  $(this).find('.expandable').show('slow');
  $(this).find('.hideable').hide('slow');
  $('#grid').masonry();
  // call scrollTo here
});

I just realized that you have other animations going on at the same time, so this won't work completely. Maybe Something on the jQuery Effects documentation can help you - specifically the queue/dequeue parts.

Answer 2

It's almost working using the queue function. However, when another box expands, the previously expanded box won't restore/close. I'm using this code for this page:

.animate({
 width: size[0],
 height: size[1]
 }, function(){
 // show hidden content when box has expanded completely
 $(this).find('.expandable').show('slow');
 $(this).find('.hideable').hide('slow');
 $('#grid').masonry();
 // scrollTo here
 $(this).queue(function(){
 var yloc = $('.expanded').offset().top;
 $(document).scrollTo( $('.expanded') ,600 );
 //next();
 }
 });     
 });
restoreBoxes();
$(this).addClass('expanded');

If you notice the "next()" function is commented. If I uncomment the "next()" function, the previously expanded box closes but the page won't scroll correctly to the expanded box. It scrolls about 100px more.