Useless Snippet #2 ( Track focused element )

Track Focused Element ( tab only )

var focusedElemWrap = undefined;
	
$('.useless-focus-marker').remove();  //Uncomment if you want to reset	
if ( $('.useless-focus-marker').length == 0 ){
	$('<div class="useless-focus-marker">').css({
		position:'absolute',
		border:'1px solid rgba(100,100,200,0.7)',
		'box-shadow':'0px 2px 12px rgba(50, 50, 50, 0.75)',
		width:0,
		height:0,
		'z-index':9998,
		'border-radius':'4px',
		'background-color' : 'rgba( 50,150,250,0.2)',
		opacity: 0.7
		}).appendTo($('body'));
}

focusedElemWrap = $('.useless-focus-marker');
 
$('*').off('keyup.focustrack').on('keyup.focustrack', function(e){
  if ( ( e.which == 9  )  && this == e.target ){
	  var self	=	$(this),
	  		offset = self.offset(),
	  		selfWidth	=	self.outerWidth(),
			selfHeight	=	self.outerHeight(),
			extraSpace	=	12,
			halfESpace	=	extraSpace / 2;
			
	  focusedElemWrap.stop().animate( { 
		  					left: offset.left - halfESpace , 
	  				 		top: offset.top - halfESpace, 
							width: selfWidth + extraSpace , 
							height: selfHeight + extraSpace } , 500 );
  }
});