Tutorial Load Only a Section of a Page

by in , 0

Use Case

You want to AJAX load a section of another page on your site onto the current page. Say your eCommerce CMS system creates a dynamic menu of products, but that exists as a subdirectory of your site and you want to use that on the homepage.


$("#mainNav").load("/store #mainNav")

The first param is the URL (only works for same-domain requests!) and the second (well, technically it's still part of the first, separated by a space) is a jQuery selector of the part to load. Not passing the second selector param will load the entire page. There is an optional third parameter, a callback function, which will run when the load is complete.

Reference URL

Tutorial Load jQuery Only If Not Present

by in , 0

Say you were going to do an include on a whole bunch of pages, and inside of that include you wanted to do some jQuery specific stuff. That page may or may not already have jQuery loaded. If it already does, you don't want to load it again, but if not, you do. This works for that.

Smart Asynchronous Way

// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {

	if (typeof $ == 'function') {
		// warning, global var
		thisPageUsingOtherJSLibrary = true;
	function getScript(url, success) {
		var script     = document.createElement('script');
		     script.src = url;
		var head = document.getElementsByTagName('head')[0],
		done = false;
		// Attach handlers for all browsers
		script.onload = script.onreadystatechange = function() {
			if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
			done = true;
				// callback function provided as param
				script.onload = script.onreadystatechange = null;
	getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', function() {
		if (typeof jQuery=='undefined') {
			// Super failsafe - still somehow failed...
		} else {
			// jQuery loaded! Make sure to use .noConflict just in case
			if (thisPageUsingOtherJSLibrary) {

				// Run your jQuery Code

			} else {

				// Use .noConflict(), then run your jQuery Code

} else { // jQuery was already loaded
	// Run your jQuery Code


Notice how there is multiple places the jQuery code you intend to run get's called. Don't repeat yourself there, put it in a function you can call to kick things off.

This code was adapted from here.

Document.write way

Hip kids don't use document.write, but if you are too old to care:

var jQueryScriptOutputted = false;
function initJQuery() {
    //if the jQuery object isn't available
    if (typeof(jQuery) == 'undefined') {
        if (! jQueryScriptOutputted) {
            //only output the script once..
            jQueryScriptOutputted = true;
            //output the script (load it from google api)
            document.write("<scr" + "ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scr" + "ipt>");
        setTimeout("initJQuery()", 50);
    } else {
        $(function() {  
            // do anything that needs to be done on document.ready
            // don't really need this dom ready thing if used in footer

Tutorial Link Nudging

by in , 0

$("a").hover(function() {
       $(this).stop().animate({paddingLeft : "10px"},200);
},function() {
       $(this).stop().animate({paddingLeft : "0px"},200);

Make sure to change the selector to only target the links you want to have nudging, e.g. "#sidebar ul li a"

Tutorial Konami Code

by in , 0

var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";

$(document).keydown(function(e) {

  kkeys.push( e.keyCode );

  if ( kkeys.toString().indexOf( konami ) >= 0 ) {

    // do something awesome


Tutorial Keep Text Inputs in Sync

by in , 0

var $inputs = $(".example-input");
$inputs.keyup(function() {


Tutorial jQuery Zebra Stripe a Table

by in , 0


Then use some CSS:

.odd {
   background: #ccc;

Tutorial jQuery Tweetify Text

by in , 0


$.fn.tweetify = function() {
	this.each(function() {
				.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
				.replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>')
				.replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>')
	return $(this);




<p>@seanhood have you seen this http://icanhascheezburger.com/ #lol</p>


<p><a href="http://twitter.com/seanhood">@seanhood</a> have you seen this
<a href="http://icanhascheezburger.com/">http://icanhascheezburger.com/</a>
<a href="http://search.twitter.com/search?q=%23lol">#lol</a></p>

Reference URL