help with jquery ! WordPress

• SOLVED

This is the example: go to portfolio section e click on 1 thumb
http://theme.semicolonweb.com/pageflow/

I want the same effect, by click on my thumb in this page...
http://www.kickagency.com/gadget/

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



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

});



Answers (2)

2012-10-18

jazbek answers:

Try this:

returnPosition = 0;
$('.item').click(function(e) {
e.preventDefault();
$(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);
});
});

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


Example in action: http://jsfiddle.net/JtZK7/1/

---

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 ?

2012-10-18

Apostolos Kritikos answers:

Hi Manlio,

I think that the ScrollTo jquery plugin (http://demos.flesler.com/jquery/scrollTo/) 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,

Apostolos