Ask your WordPress questions! Pay money and get answers fast! (more info)

help with jquery ! WordPress


This is the example: go to portfolio section e click on 1 thumb

I want the same effect, by click on my thumb in this page...

try to click on 3th thumb "Abbigliamento", after click the div is open, but I need that the div scroll to top, and after another click ( close button o something) the div returns back to start position.

Div Close ( only thumb): height: 212px; width: 235px;
Div Open (thumb + content): height: auto; width: 1000px;

Let me know please !!

this is the js. ... but i know that is not enough :)

$(this).parent().find('.item').css({'height':'212px', 'width':'235px'});
$(this).css({'height':'auto', 'width':'1000px'});


Answers (2)


jazbek answers:

Try this:

returnPosition = 0;
$('.item').click(function(e) {
$(this).parent().find('.item').css({'height':'212px', 'width':'235px'});
returnPosition = $('body').scrollTop();
var curHeight = $(this).height();
var autoHeight = $(this).css('height', 'auto').height();
$(this).css('height', curHeight).animate({'height':autoHeight, 'width':'1000px'}, 200, function(){
$('html, body').animate({scrollTop: $(this).offset().top}, 200);

$('.item').css({'height':'212px', 'width':'235px'});
$('html, body').animate({scrollTop: returnPosition}, 200);
returnPosition = 0;
return false;

Example in action:

Manlio Ma comments:

Hi jazbek !
works perfectly..just 2 things to fix..

1 - try to click on latest photo of "abbigliamento" gallery .... maybe a conflict with nextgen effect
2 - when I open the "abbigliamento" div, the height of the div is too much and not equal to the content

could you fix it ?


Apostolos Kritikos answers:

Hi Manlio,

I think that the ScrollTo jquery plugin ( is exactly what you need. The provided link gives you plenty of scrolling examples and the related jquery code for each option.

Hope it helps,