About the Blog

Its about anything and everything. I, Steven Hancock started this blog for a variety of reasons. I want to start documenting my life and sharing that with others, whether that's family, friends, strangers or my future self. I also want to start sharing my experiences with others in hopes that others can learn from me. Perhaps I can help someone set up an Ubuntu server, write a Django Web Application, or setup a Phonegap Mobile App.

That's it. I'm hear to share. Nothing more, nothing less. I will be covering a wide variety of topics so feel free to browse for the blog entries that interest you most.

jQuery Highlighting Tool

May 14, 2013

If you have a lot of content on a single page it can be difficult to point others to a specific section (especially if that section doesn't have a heading). I wrote a little jQuery function to help out by automatically highlighting the section and scrolling to that section. You can through this function up on every page and whenever you want to highlight content just link to the page with a query string attach (?highlight=highlight me).

So let's see how I did it. Use this little function from http://stackoverflow.com/questions/901115 to get the highlight string from the url.

function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Then if highlight query string exists search for its value. Finds all of the occurrences of an element that contains the text, then highlight and scroll to that element. Here I'm only searching a few specific tags like titles, paragraphs, list items, and preformatted text.

var highlight = getParameterByName("highlight");
if(highlight != null){
$("#blockContent").find("h1:contains('"+highlight+"'),h2:contains('"+highlight+"'),h3:contains('"+highlight+"'),h4:contains('"+highlight+"'),p:contains('"+highlight+"'),li:contains('"+highlight+"'),a:contains('"+highlight+"'),pre:contains('"+highlight+"')").each(function(){
var top = $(this).offset().top-$("#header").height();
$(this).css({backgroundColor:"#FFFF96"});
$('html, body').animate({scrollTop: top}, 1000);
return true;
});
}

Pretty simple. Go ahead and try it ./?highlight=search for its value.

Update

Just to make things a little easier I made this into a jquery plugin.

$.fn.highlight = function(searchIn,color) {
	if(color == undefined){color = "#FFFF96";}
	var containEl = this;
	if(searchIn == undefined){return false}
	var getHighlight = function(name) {
		name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
		var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
			results = regex.exec(location.search);
		return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
	}
	var searchFn = function (el,needle){
		containEl.find(el+":contains('"+highlight+"')").each(function(){
			var top = $(this).offset().top-$("#header").height();
			$(this).css({backgroundColor:color});
			$('html, body').animate({scrollTop: top}, 1000);
			return true;
		});	
	}
	var highlight = getHighlight("highlight");
	if(highlight != null){
		if($.isArray(searchIn)){
			for(var i = 0; i < searchIn.length; i++){searchFn(searchIn[i],highlight);}
		}
		else{searchFn(searchIn,highlight);}
	}
	return this;
}

Just call highlight on your main content container and specify the elements that you would like to search through (either an array of element tags or a single element tag) and if you like specify the color your highlight should be.

$("#blockContent").highlight(["h1","h2","h3","h4","p","li","a","pre"],"#ff2333");