Scrolling to expanded DIV problem and links in expanded box?

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).

Up vote 0 down vote favorite share g+ share fb share tw.

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. Jquery scrollto link|improve this question asked Aug 27 '10 at 21:50keane12.

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: size0, height: size1 }, 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.

Ok I've got it working. I had to do a lot of revisions in the code. Also had to remove the animation which causes the scrollTo problem.

Now I have integrated easySlider but I'm having problems resetting it back to preinit mode so I can call it again using a new slider ID. Here's what I've accomplished so far keanetix.co.cc/folio2010 If you notice when you click Box#1 (CM Partners) then click Box#3 (NBCM), the slider doesn't work. Help please?

Thanks. :) – keane Sep 1 '10 at 10:17 I think that is because of the size of the actual page. If a make my browser very "short", I believe it scrolls as you intended.

Also, if the page had more content below this area it should scroll properly. On my browser, it just scrolls to the bottom, which I think it should. – partkyle Sep 1 '10 at 18:07.

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: size0, height: size1 }, 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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.