I am creating a portfolio section similar to TypeCode (http://typecode.com/work/). I have simple jQuery animations expanding and contracting divs on click. Is there a way to centralise the divs in the browser on each click as they do on TypeCode?
// Select portfolio item
var active = false;
$('.portfolio-item').click(function(e) {
// Check if alternative tab is open and then close it
if ( $('#one').css("height") == "220px" ) {
$('#one').animate({
height: '110px',
}, 1000, function() {
// Animation complete
});
active = false;
}; // End if
if ( $('#two').css("height") == "220px" ) {
$('#two').animate({
height: '110px',
}, 1000, function() {
// Animation complete
});
active = false;
}; // End if
if (active == false) {
$('.portfolio-item').css("height", "110px");
$(this).animate({
height: '220px',
}, 1000, function() {
// Animation complete
});
active = true;
}; // End if
}); // End click function
// Close portfolio item
$('.close').click(function(e) {
e.stopPropagation();
$(this).parents('.portfolio-item').animate({
height: '110px',
}, 1000, function() {
});
active = false;
});
Here is the basic fiddle: http://jsfiddle.net/7Avu9/1/
As you can see, if you click on an alternative tab (from the first 2 only) the current one is closed and the new one opened. This works well for a small amount of content but with bigger content this does not display very well.
$('article').click(function(){
$(this).toggleClass('state-collapsed');
$('html,body').animate({scrollTop: $(this).offset().top}, 500);
});
This should hopefully help