Skip to content

Instantly share code, notes, and snippets.

@timnovinger
Created November 23, 2011 17:14
Show Gist options
  • Save timnovinger/1389251 to your computer and use it in GitHub Desktop.
Save timnovinger/1389251 to your computer and use it in GitHub Desktop.
Colorjar: Navigable collapsed list of posts
/*
*
* Navigable collapsed list of posts
* Author: Tim Novinger
* Email: tim@colorjar.com
* #colorjar
*/
// ---------------------------------
// PREV/NEXT Content Navigation
// ---------------------------------
var $collapsed_content = $('.collapsed-content'),
$navigation_links = $collapsed_content.find('.the-navigation'),
opacity = 0.5;
// Initially show prev link faded out since we
// obviously can't go backwards at this point
$navigation_links.find('.previous').css('opacity', opacity);
// Bind events for prev/next links
$navigation_links.delegate('a.previous, a.next', 'click', function(e){
e.preventDefault();
var $currentLink = $(e.currentTarget),
$current = $collapsed_content.find('li.current'),
$count = $navigation_links.find('.count'),
$prev = $current.prev(),
$next = $current.next(),
total = parseInt(($collapsed_content.find('li').length - 1).toString(), 10),
position = parseInt($current.prop('id').match(/\d/)[0].toString(), 10),
height = parseInt($current.outerHeight(true), 10),
delay = 200;
// Always reset the nav link opacity
$navigation_links.find('a').css('opacity', 1.0);
if ($currentLink.prop('class') == 'next')
{
if (position < total)
{
$currentLink.css('opacity', 1.0);
$collapsed_content
.find('li')
.animate({ top:'-='+height }, delay, function(){
$prev.removeClass('current');
$current.removeClass('current');
$next.addClass('current');
});
// Update the displayed count
$count.text( position+2 );
}
// Fade out the nav item when we've
// reached the last testimonial
if (position >= (total - 1)) { $currentLink.css('opacity', opacity); }
}
else
{
if (position <= total && position != 0)
{
$currentLink.css('opacity', 1.0);
$collapsed_content
.find('li')
.animate({ top:'+='+height }, delay, function(){
$prev.addClass('current');
$current.removeClass('current');
$next.removeClass('current');
});
// Update the displayed count
$count.text(position);
}
// Fade out the nav item when we've
// reached the last testimonial
if (position <= 1) { $currentLink.css('opacity', opacity); }
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment