Slider for quickly navigating through all words in membean.com at "membean.com/trainers/{your_account}"

gistfile1.txt

/**
 *	Ability to find a word by "text"
 *	Ability to navigate to a particular index	
*/

var template = '<div><div id="words-iterator" style="position:absolute;top:0;left:0;width:50%;height:50%;margin-left:25%;margin-top:5%;z-index:1111;background:whitesmoke;text-align:center;padding-top:50px;"><h1></h1><p><span id="position-index"></span> of <span id="position-total"></span></p><p id="word-definition"></p>'+
'<div style="position: inherit;bottom: 10px;margin-left: 50%;">'+
'<p><input type="text" id="jumpIndex" style="width: 40px;padding: 0;"><span><button id="jumpToIndex" style="height: 23px;">Jump To Index</button></span></p>'+
'<button id="previous">Previous</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="next">Next</button></div></div><div style="opacity:0.5;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1110;background:yellow"></div></div>';

$("body").append(template);

var index = window.localStorage.getItem('last-word-index') || 0;
var $words = $("a[href*='mywords']");
var total = $words.length;
var $container = $("#words-iterator h1");


function renderWord(){
	$container.html($($words.get(index)).clone());
	$("#position-index").html(parseInt(index)+1);
	$("#position-total").html(total);
	$("#word-definition").empty();
	window.localStorage.setItem('last-word-index',index);
}

function movePrevious(){
	index--;
	index = index < 0 ? 0 : index;
	renderWord();
}

function moveNext(){
	index++;
	index = index >= total ? (total - 1) : index;
	renderWord();
}

function jumpToIndex(){
	var newIndex = $("#jumpIndex").val();
	if(newIndex>0 && newIndex<=total){
		index = newIndex - 1;
		renderWord();
	}
}

$("#previous").click(movePrevious);

$("#next").click(moveNext);

$("#jumpToIndex").click(function(){
	jumpToIndex();
});

$("#jumpIndex").keydown(function(e){ 
	if(e.keyCode === 13){
 		jumpToIndex();
 	}else if(e.keyCode>=37 && e.keyCode<=40){
 		$(e.currentTarget).blur();
 	} 
});

$(document).keydown(function(e){
	if(e.keyCode === 37){	//previous
		movePrevious();
	}else if(e.keyCode === 39){		//next
		moveNext();
	}else if(e.keyCode === 38){		//up
		var word = $("#words-iterator h1").text().trim();
		fetchDefinition(word);
	}
});
renderWord();

function fetchDefinition(word){
	$("#word-definition").html('just a moment...');
	var definition = window.localStorage.getItem('membean.' + word + '.definition');
	if(definition){
		$("#word-definition").html(definition);
		return;
	}
	$.ajax({
		url : '/mywords/'+word
	}).done(function(response){
		var $html = $("<div/>").append(response);
		definition = $html.find('.def-text').text().trim();
		$("#word-definition").html(definition);
		window.localStorage.setItem('membean.' + word + '.definition', definition);
	});
}

$("#words-iterator").on('click','a',function(e){
	e.preventDefault();
	var word = $(e.currentTarget).text().trim();
	fetchDefinition(word);
});