Vertically align team member content to clicked ui tabs on Human Made’s team page (http://hmn.md/is/).

hmn.md.is.tabs.align.js

/**
 * Vertically align team member content to clicked ui tabs.
 * 
 * @link http://hmn.md/is/
 * 
 */
( function( $ ) {
	
	$( '.ui-tabs-anchor', '.about-teamlist' ).on( 'click', function( e ) {

		var $item     = $( this );
		var $list     = $( '.about-teamlist' );
		var $content  = $( '.about-teammember[aria-hidden="false"]' );
		var offsets   = { // top offsets
			'item'    : $item.offset().top,
			'list'    : $list.offset().top
		};
		var halflings = { // halved heights
			'item'    : $item.innerHeight() / 2,
			'content' : $content.innerHeight() / 2
		};
		
		// calcualte new top margin for content
		if( offsets.item - offsets.list > halflings.content ) { // vertically align content to ui tab
			var newPos = offsets.item - offsets.list + halflings.item - halflings.content;
		} else { // upper end of list: do nothing
			var newPos = 0;
		}
		
		// set new top margin for content
		$content.css( { 'margin-top' : newPos + 'px' } );
		
		// @todo Calculations should consider scroll positions and key events.
		
	} );
	
} ) ( jQuery );