So what am I lazy loading within my current design?

• Twitter, Facebook, and Google Plus widgets for single blog posts.
• Page footer;  since the footer content is out of sight during initial page load, it doesn’t need to be loaded right away.
• LighterJS Syntax Highlighter; if no PRE tag is on the page, there’s no reason to grab the syntax highlighter.
• Comment avatar images;  there’s no point to loading these images immediately as they must be scrolled to.  If someone hits the “#comments” portion of the page, my LazyLoad plugin can handle loading the initial images.
• Tweets;  tweet content is non-essential so they needn’t be loaded right away.
• MooTools StarRating;  again, only needed if it’s a post page.

Of course, there needs to be a trigger for these items to load.  I’ve chosen three events to trigger loading of these components:  keydown, mousemove, and scroll.  Each of these events signify a human and “interested” presence.  Let me show you how I’ve implemented this lazy loading.

Load Initial Scripts

Not every script can be asynchronously loaded, so the scripts I do load synchronously are RequireJS and Google’s JSAPI (for Analytics and Google Search):

<!-- JavaScript at the bottom for fast page loading --> 
<script src="http://ajax.cdnjs.com/ajax/libs/require.js/0.23.0/require.min.js"></script> 
<script src="https://www.google.com/jsapi?key=MY_KEY"></script> 
<script> 
	// Load MooTools, Google Search
	function loadScripts() { 
		require(["http://davidwalsh.name/wp-content/themes/klass/js/script.js"]); 
	}
	google.load("mootools", "1.3.0");
	google.load("search", "1");
	google.setOnLoadCallback(loadScripts);
</script>

Once the scripts are loaded, my theme’s main JavaScript resources is required.

Lazy Loading Code

Since there are multiple tasks I want to run when the user “awakens,” I create an onAwaken array that will hold each of the tasks.  A series of functions will be pushed to the array, each representing a sign task.  For example, the task which loads Twitter, Facebook, and Google +1 badges looks like:

// Create the array of awaken functions
var onAwaken = [];

// Get the share URL from this page via the canonical link
var cannons = $$("link[rel=canonical]"), shareUrl;
if(cannons.length) {
	shareUrl = cannons[0].get("href");
}

// If the PROMO DIV exists on the page
var promoDiv = document.id("promo");
if(promoDiv && shareUrl) {
	onAwaken.push(function(){
	
		// Create a SPAN and A for the Twitter share link
		var span1 = new Element("span",{ style:"display:inline-block;float:left;" }).inject(promoDiv);
		new Element("a",{
			href: "http://twitter.com/share",
			"class": "twitter-share-button",
			"data-count": "horizontal"
		}).inject(span1);
		
		// Inject the Twitter SCRIPT tag into the SPAN
		new Element("script",{
			src: "http://platform.twitter.com/widgets.js",
			async: true
		}).inject(span1);
		
		// Create the Facebook IFRAME
		new Element("iframe",{
			src: "http://www.facebook.com/plugins/like.php?href=" + shareUrl,
			scrolling: "no",
			frameborder: 0,
			allowTransparency: true,
			style: "border:none; overflow:hidden; width:500px;"
		}).inject(new Element("span",{style:"display:inline-block;"}).inject(promoDiv));
		
		// Create the G+1 Button
		var el = document.id(document.createElement("g:plusone")).set({
			href: shareUrl,
			size: "medium"
		}).inject(new Element("span",{style:"display:inline-block;"}).inject(promoDiv));
		
		// Get the G+ SCRIPT
		require(["http://apis.google.com/js/plusone.js"],function() {
			// console.warn("G+1 is ready!");
		});
		
		// Fade in all of the lazy loaded content
		promoDiv.fade(1);
	});
}

Note that a require call is within this function, which could probably be considering lazy loading during lazy loading.  In all seriousness though, it’s important to note that entire resources are lazy loaded, not just execution of available functionality.

Another onAwaken function includes loading of my footer and right column content:

// Uses Moo to load and place content
function loadAndPlace(url,where,then) {
	new Request({
		url: url,
		onSuccess: function(content) {
			document.id(where).set("html",content);
			if(then) then();
		}
	}).send();
}

// Load footer and right column upon awakening
onAwaken.push(function() { 
	loadAndPlace(themePath + "footer.html","footer"); 
});
onAwaken.push(function() { 
	loadAndPlace(themePath + "follow-trends.html","contentRightColumn", function(){ 
		$$(".contentRightColumn").fade(1); 
	}); 
});

And then I also lazy load the MooTools StarRating plugin:

// Star ratings
var ratingForm = document.id("ratingForm"),
	themePath = "/wp-content/themes/klass/";
if(ratingForm) {
	// Get the post id
	var postId = document.id("postId").get("value");
	
	// Get star ratings
	require([themePath + "js/ratings/Source/moostarrating.js"], function() {
		// Set image vars
		MooStarRatingImages = {
			defaultImageFolder: themePath + 'js/ratings/Graphics/',
			defaultImageEmpty:  'star_boxed_empty.png',
			defaultImageFull:   'star_boxed_full.png',
			defaultImageHover:  'star_boxed_hover.png'
		};
		// Create star ratings
		var voted = false;
		var rater = new MooStarRating({
			form: ratingForm,
			radios: "rating",
			half: true,
			width: 16
		}).addEvent("click",function(value) {
			if(!voted){
				// Send request
				new Request({
					url: themePath + "rating.php",
					method: "post",
					data: {
						rating: value,
						id: postId
					}
				}).send();
				// Mark as voted
				voted = true;
			}
		});
		// Fix the value...wtf?!
		// Adding 0.5 because it's always showing up short 0.5 short.  WTF.
		rater.setValue((rater.currentIndex * 0.5) + 0.5);
		// Showtime
		ratingForm.setStyle("display","block");
	});
}

There is no limit to the number of functions you can fire when the user awakens, so let’s assume I have a bunch more functions ready to run.  Now it’s time to place JavaScript code into place to listen for the page’s awakening.  Here it goes:

// Set up main register handler
var runEvents = ["keydown","mousemove","scroll"];
var runAwaken = function() {
	onAwaken.each(function(evt,index) {
		evt();
	});
	// Since we've run all items, let's remove the events
	runEvents.each(function(evtType){
		window.removeEvent(evtType,runAwaken);
	});
};
// Set registers in motion
runEvents.each(function(evtType){
	window.addEvent(evtType,runAwaken);
});

First we create an array of events we want the page to awaken on.  Next we create a function which will run upon awakening;  this function will run all awaken events and then remove the event from the window so that the runAwaken function will only run once.

The sky is the limit with the content you can lazy load.  I highly recommend evaluating your website for components which don’t hold search engine value, or may speed up the load of your page (especially synchronous SCRIPT tags!).  As always, have fun with your websites and do what you can to make them load faster!

Lazy Load Content and Widgets with MooTools and RequireJS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Note:  It was always apparent that using custom attributes would become a necessity, but I hated doing so.  The big issue is with this is that it completely bricks image viewing for browsers which don’t support JavaScript.  Since popular demand is calling for the data- attributes, and browsers are moving toward loading images before JS can intercept them, this was the really the only option.

Enter LazyLoad 2.0.  This second generation of MooTools LazyLoad does introduce breaking changes but the class itself is more compact and dynamic.  Here’s the new class:

var LazyLoad = new Class({

	Implements: [Options,Events],

	/* additional options */
	options: {
		range: 200,
		elements: "img",
		container: window,
		mode: "vertical",
		realSrcAttribute: "data-src",
		useFade: true
	},

	/* initialize */
	initialize: function(options) {
		
		// Set the class options
		this.setOptions(options);
		
		// Elementize items passed in
		this.container = document.id(this.options.container);
		this.elements = document.id(this.container == window ? document.body : this.container).getElements(this.options.elements);
		
		// Set a variable for the "highest" value this has been
		this.largestPosition = 0;
		
		// Figure out which axis to check out
		var axis = (this.options.mode == "vertical" ? "y": "x");
		
		// Calculate the offset
		var offset = (this.container != window && this.container != document.body ? this.container : "");

		// Find elements remember and hold on to
		this.elements = this.elements.filter(function(el) {
			// Make opacity 0 if fadeIn should be done
			if(this.options.useFade) el.setStyle("opacity",0);
			// Get the image position
			var elPos = el.getPosition(offset)[axis];
			// If the element position is within range, load it
			if(elPos < this.container.getSize()[axis] + this.options.range) {
				this.loadImage(el);
				return false;
			}
			return true;
		},this);
		
		// Create the action function that will run on each scroll until all images are loaded
		var action = function(e) {
			
			// Get the current position
			var cpos = this.container.getScroll()[axis];
			
			// If the current position is higher than the last highest
			if(cpos > this.largestPosition) {
				
				// Filter elements again
				this.elements = this.elements.filter(function(el) {
					
					// If the element is within range...
					if((cpos + this.options.range + this.container.getSize()[axis]) >= el.getPosition(offset)[axis]) {
						
						// Load the image!
						this.loadImage(el);
						return false;
					}
					return true;
					
				},this);
				
				// Update the "highest" position
				this.largestPosition = cpos;
			}
			
			// relay the class" scroll event
			this.fireEvent("scroll");
			
			// If there are no elements left, remove the action event and fire complete
			if(!this.elements.length) {
				this.container.removeEvent("scroll",action);
				this.fireEvent("complete");
			}
			
		}.bind(this);
		
		// Add scroll listener
		this.container.addEvent("scroll",action);
	},
	loadImage: function(image) {
		// Set load event for fadeIn
		if(this.options.useFade) {
			image.addEvent("load",function(){
				image.fade(1);
			});
		}
		// Set the SRC
		image.set("src",image.get(this.options.realSrcAttribute));
		// Fire the image load event
		this.fireEvent("load",[image]);
	}
});

Using LazyLoad is as simple as:

<script>
/* do it! */
window.addEvent("domready",function() {
	var lazyloader = new LazyLoad();
});
</script>

<!-- then in the body -->

<!-- in-page image format -->
<img src="/images/blank.gif" data-src="/images/102_1139.jpg" />
<img data-src="/images/102_1139.jpg" />

Changes to version 2.0 of LazyLoad include:

• You may now fade images in upon load
• Uses a customizable data- attribute to store the real image src.
• The resetDimensions options is no longer available
• Document size is calculated during scroll, as dynamic pages change in size frequently.
• Class code size is much smaller.

Lazy-loading images will never go out of style, as it saves your server bandwidth and saves your users from load images that they never scroll to.  Adding a fade effect allows for images to be gracefully placed within the page.  Let me know if you have further ideas for LazyLoad, as it should only get better!

Introducing LazyLoad 2.0 is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The tradition method of dynamic history/”back button” management has always been hash-based JavaScript technology.  Newer technology, including HTML5′s window.onpopstate and history.pushState methods, allow for more reliable methods for managing history.  MooTools’ History plugin supports modern and legacy methods for history management.  Let me show you how to quickly implement the MooTools History plugin.

HTML Structure

The History plugin doesn’t require any HTML structure adjustments but at least one designated content should be identified; you can, of course, have as many content areas as you like, but you’ll most likely need multiple AJAX requests to retrieve their content, unless you use a Request.JSON request to retrieve content for multiple areas of the page. For this simple demo, we’ll define a header, footer, and menu, and content area:

<div id="body">
	
	<!-- header -->
	<header>
		<a href="/" data-noxhr>David Walsh Blog</a> 
		<div>MooTools History Plugin Demo</div>
		<div>This is a simple example of the MooTools History plugin created by Christoph Pojer</div>
		
	</header>
		
	<!-- menu -->
	<ul id="demoMenu">
		<li><a href="mootools-history.php">Home</a></li>
		<li><a href="mootools-history-david.php">About David Walsh</a></li>
		<li><a href="mootools-history-mootools.php">About MooTools</a></li>
		<li><a href="mootools-history-christoph">About Christoph Pojer</a></li>
	</ul>
	
	<!-- content area -->
	<article id="contentHolder">
		
		<!-- initial page content goes here -->
		
	</article>
	
	
	<!-- footer -->
	<footer>
	
	</footer>
</div>

The content area is the only area which will have its content change. The page should load as usual

The MooTools JavaScript

Assuming that the MooTools History plugin has been included in the page, there are a few functions that should be created upon domready.  The first is a method which will perform the request for content when a link is clicked:

// Content holder (all content placed within this element)
var contentHolder = document.id("contentHolder");

// Create a Request object which will be reused when links are clicked
var request = new Request.HTML({
	onSuccess: function(nodeTree,elements,html) {
		// Set the content into the content holder
		contentHolder.set("html",html);
		// Execute directions that should be executed whenever a page changes
		onPageUpdate();
	}
});

// Create a function that loads the page content
var loadPage = function(url) {
	// Make a HTML request to get the content for this page
	request.send({ url: url });
};

The next step is creating a method (which is theoretically option, but you’ll usually want to do something once content has loaded) which will execute every time content is received:

// Function that will execute whenever a page gets changed
var onPageUpdate = function() {
	
	// Do whatever you'd like here!  
	
	// Possibly manually record a Google Analytics page view?
	
};

History doesn’t request that you do anything when content is received, but you’ll likely want to do something. Why manually record a page view within Google Analytics?

This next piece is important in turning links to static pages into AJAX-ified History triggers. Just one big Element.Delegation event delegation call will do the work for not just the initial page load, but every History AJAX load after that:

// The listener that manages all clicks
var listener = function(evt){
	evt.preventDefault(); // Prevent following the URL
	History.push(this.get('href')); // Push the new URL into History
};

// Add event delegation to add clicks.  Both of these work:
//document.body.addEvent("click:relay(a:not([href=#]):not([href^=http://]):not([data-noxhr]))",listener);
document.body.addEvent("click:relay(a:not([href=#],[href^=http://],[data-noxhr]))",listener);

When any same-site, non-hashed link is clicked, the listener method stops the event and pushes the new URL into History, changing the address bar and managing back/forward button click.

A back function is also created so that we can provide a “back” link and a “forward” link to travel back and forward in page history, if we choose to use it:

// Listener for the "Back" link
var back = function(evt){
	evt.preventDefault();
	History.back(); // Go back
};

// Listener for the "Forward" link
var forward = function(evt){
	evt.preventDefault();
	History.forward(); // Go back
};

// Add to links
document.id("backLink").addEvent("click",back);
document.id("forwardLink").addEvent("click",forward);

The next step is adding a change event to History itself to run our loadPage function when the page URL changes:

// When the history changes, update the content 
History.addEvent('change',loadPage);

If the client doesn’t support the history.pushState method, the History plugin evaluates the hash and loads the page as necessary:

// Handle the initial load of the page if the browser does not support pushState, check if the hash is set
if(!History.hasPushState()) {
	// Check if there is a hash
	var hash = document.location.hash.substr(1);
	if (!hash) return;

	// If the hash equals the current page, don't do anything
	var path = document.location.pathname.split('/');
	path = path[path.length - 1];
	if (hash == path) return;

	// Load the page specified in the hash
	loadPage(hash);
}

Lastly, running the onPageUpdate upon domready load doesn’t hurt since events are only added once within onPageUpdate:

// Update the page
onPageUpdate();

Now the page is ready to support History-based, AJAX-driven content swapping.  Thanks to the onPageUpdate function, links are added to events as they come in so that even AJAX-retrieved content can be managed with History.

Tips and Strategies for Hash/History-Managed Websites

Plugins like Christoph’s History masterpiece are very helpful in enriching the user experience but do require a bit of developer logic:

• Use Event Delegation – Remember that with a History-style system, assigning events to elements directly may not be the best solution because those elements may be gone with the next link click. Using event delegation instead of traditional event assignments may save you a lot of trouble. Read my MooTools Element.Delegation post if you aren’t familiar with event delegation.
• Don’t Assume JavaScript Support – Keep in mind that the client may not support JavaScript.  Search engines have added JavaScript support but it’s important to use URLs that will work with both on a History-managed site and a JavaScript-less website.
• Use AJAX Detection - MooTools provides an AJAX-specific header within the Request class called HTTP_X_REQUESTED_WITH.  Click here to learn how to use it to detect AJAX requests.  You will want to be able to detect AJAX so that those requests simply return the content and not the header and footer (etc.) with it. You could write a client-side script/regex to parse out the content but that’s largely inefficient. My demo uses PHP to store the page content in variables as follows:
  
  

  // Load pages based on querystring
  $qstring = $_SERVER['QUERY_STRING'];
  if($qstring == 'home' || $qstring == '') {
  	$content.= '<h1>Welcome Home!</h1>';
  	$content.= '<p>History Management via popstate or hashchange. Replaces the URL of the page without a reload and falls back to Hashchange on older browsers.</p><p>This demo page aims to teach you how you can use Christoph Pojer\'s outstanding History widget to load only the content you need, dynamically and reliably.</p>';
  }
  elseif($qstring == 'about-david') {
  	$content.= '<h1>About David Walsh</h1>';
  	$content.= '<p>My name is David Walsh. I\'m a 27 year old Web Developer from Madison, Wisconsin. In the web world, I am:</p>
  	<ul>
  	<li>Founder and Lead Developer for Wynq Web Labs.</li>
  	<li>Software Engineer for SitePen.</li>
  	<li>Core Developer for the MooTools JavaScript framework.</li>
  	<li>Co-Founder of Script & Style, a website aimed at making web developers and designers better.</li>
  	</ul>
  	<p>I don\'t design the websites - I make them work.</p>
  	<p>I am also an admirer of the great <a href="?about-christoph">Christoph Pojer!</a>.</p>';
  }
  // and more....
  // Page not found
  else {
  	$content.= '<h1>Page Not Found</h1>';
  	$content.= '<p>The page you were attempting to find could not be found.</p>';
  }
  
  // If request was via AJAX, push it out.
  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  	echo $content;
  	exit();
  }
  

  Obviously your content management system would be pulling content from a database or other static files, but you get the point — load content before any page output, sniff for AJAX, and push content out accordingly. If it’s not an AJAX request, push that content into the content area’s HTML via traditional methods.

These tips should set you up well to use a History-based system.  Remember that JavaScript is meant to enhance — keep in mind that your user (or search engine bot) may not support JavaScript, so be sure to test your website thoroughly!

Give the example hell.  Click from page to page, use the back button, refresh the page, etc.  History is rock solid!

Thanks to Christoph Pojer for his outstanding MooTools History plugin.  Many History-style plugins have existed but the browsers haven’t been as feature-rich as they are now.  If you have any suggestions, tips, or experiences to share about creating hash-based websites, please share them.

MooTools History Plugin is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Download LABjs

You can download LABjs at the LABjs website or via GitHub.

Traditional Script Inclusion

Traditional script inclusion blocks subsequent resources from loading.  The following is traditional, blocking script inclusion:

<script src="mootools-1.3.js"></script>
<script src="lightface/Source/LightFace.js"></script>
<script src="lightface/Source/LightFace.Request.js"></script>
<script src="lightface/Source/LightFace.Static.js"></script>
<script src="Color.js"></script>

Wait…wait…wait.  What a waste of time.  Other pieces of the page don’t rely on these scripts, so why should users have to wait for these scripts to load before other resources load?  LABjs fixes this mess.

LABjs Usage

LABjs itself needs to be included within the page via traditional SCRIPT tag:

<script src="LAB.js"></script>

The $LAB variable is LABjs’ handle.  You can load scripts using the script method:

$LAB.script('mootools-1.3.js');

The wait method allows you to prevent script execution (not loading) before executing subsequent scripts in the chain:

$LAB
.script('mootools-1.3.js').wait()
.script('mootools-dependent-script.js');

Using wait is a great way to manage dependencies.  For example, you cannot load MooTools More before MooTools Core, right?  Even though you direct Core to load first, More may load before Core.  That will cause many, many errors.  You can use wait to prevent that problem:

$LAB
.script('mootools-1.3.js').wait()
.script('mootools-1.3-more.js');

The wait method also acts as a callback for when scripts are done loading:

$LAB
.script('mootools-1.3.js').wait()
.script('mootools-1.3-more.js').wait(function() {
	
	// Now that the Fx.Accordion is available....
	var accordion = new Fx.Accordion(/* ... */);
	
});

To complete the example I started this post with:

$LAB
.script('mootools-1.3.js').wait()
.script('lightface/Source/LightFace.js').wait()
.script('lightface/Source/LightFace.Request.js')
.script('lightface/Source/LightFace.Static.js').wait(function() {
	var modal = new LightFace.Request(/*  */);
})
.script('Color.js')

Using LABjs to load scripts is as simple as that!

LABjs Options

LABjs also provides a bevy of options to customize script loading to your personal needs.  Options may be set via the setOptions method:

$LAB.setOptions({ AlwaysPreserveOrder:true });

A few of the options include:

• AlwaysPreserveOrder:  Implicitly calls wait() after each script
• UsePreloading: Allows LABjs to try other loading tricks (trick information here)
• BasePath: Sets a base path for all scripts

Many other options are available.  You can get more information about LABjs options by reading the documentation.

LABjs + Async FTW

LABjs is an awesome, awesome little utility:  compact, easy to  use, and reliable.  Twitter must agree with me because they are using LABjs.  Big props to Kyle for his outstanding work. Be sure to give LABjs a try; low risk, high reward.

Smarter Script Loading with LABjs is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Grabbing and Using RequireJS

You’ll obviously need to download RequireJS from the RequireJS website.  Once the file is in place on your server, place it within the page via the traditional method, a SCRIPT tag:

<script src="require.js"></script>

Now you have the power of async JavaScript loading within the page!

Using RequireJS with MooTools

With RequireJS available, all you need to do is use the require function, passing an array of files and a callback to execute once all of the files have loaded:

//require ScrollSpy and Roar
require(['scrollspy.1.2.js','Roar.js'],function(){
	//callbacks
});

Once the classes have been loaded, I can use them!  Check it out:

// require ScrollSpy and Roar
require(['scrollspy.1.2.js','Roar.js'],function(){
	//use them!
	var roar = new Roar();
	var spy = new ScrollSpy({
		onEnter: function() {
			//....
		}
	});
});

How about a practical usage?  If an element with a “lazyload” CSS class exists, load LazyLoad and create an instance:

//when the DOM is ready
window.addEvent('domready',function(){
	//find image to lazyload
	var scrollspyElements = $$('.lazyload');
	//if there are images to lazyload...
	if(scrollspyElements.length) {
		//require the class and when done...
		require(['lazyload.js'],function(){
			//create a LazyLoad instance and use it!
			new LazyLoad({
			    range: 200,
			    image: 'Assets/blank.gif',
			    elements: $$('.lazyload')
			});
		});
	}
});

Not only do you load individual classes with RequireJS, but you can also nest require calls to load MooTools asynchronously! Once MooTools is ready, you can make your checks and load MooTools classes:

//load mootools with RequireJS!
require(['mootools-1.2.4.js'],function() {
	//when the DOM is ready
	require.ready(function(){
		//find image to lazyload
		var scrollspyElements = $$('.lazyload');
		//if there are images to lazyload...
		if(scrollspyElements.length) {
			//require the class and when done...
			require(['lazyload.js'],function(){
				//create a LazyLoad instance and use it!
				new LazyLoad({
				    range: 200,
				    image: 'Assets/blank.gif',
				    elements: $$('.lazyload')
				});
			});
		}
	});
});

Awesome!  The future of JavaScript is loading components (or even a whole framework) only if you need them!

require.ready!

If you aren’t using a JavaScript framework, RequireJS provides a ready method to trigger a function when the DOM is ready!

// require ScrollSpy
require(['scrollspy.1.2.js','Roar.js'],function(){
	//use it when the dom is ready!
	require.ready(function(){
		//use them!
		var roar = new Roar();
		var spy = new ScrollSpy({
			container: document.id('someDiv'),
			onEnter: function() {
				//....
			}
		});	
	});
});

This is much like MooTools’ domready event and Dojo and jQuery’s ready method.

RequireJS and Other Frameworks

Dojo currently contains its own asynchronous resource loading system but is looking toward the possibility of implementing RequireJS near its 2.0 release.  The RequireJS website also provides detailed instructions on using RequireJS with jQuery.

Load MooTools Classes on Demand with RequireJS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Let’s say that we have one large text document and we have a a bunch of keywords that we want to parse the document for.  We don’t care how many times times the keyword appears — we just care that it’s been used.  When we find a keyword, we need to record that keyword been found so that we may check at a later time.

Inefficient Method:  Array Collection and Search

The first method to record that a keyword has been found is by pushing the keyword into one array:

//Assume an array called "foundKeywords" was defined above
if(shouldSave(keyword)) {
	foundKeywords.push(keyword);
}

At the end of the document search, we’d end up with an array like:

//the foundKeywords array looks like:
//['keyword1','keyword2','keyword2',...]

When it comes to checking this array for the existence of a given keyword, this method will prove inefficient.  Why?  Because we’d need to loop through the array and search until we found the given keyword (if ever).  Those are a lot of “wasted” or fruitless cycles, even if we break the loop when the keyword was found.  Inefficient is the only word to describe this process.

The Efficient Method:  Object with Index

The fastest method of checking a storing keywords for later reference is by object (in JavaScript) or associative array (in PHP).  Instead of adding the keyword to an array, we add the keyword as an index to a master object, giving the value as 1:

//Assume an object {} called "foundKeywords" was defined above
if(shouldSave(keyword)) {
	foundKeywords[keyword] = 1;
}

Why is this faster?  No wasted cycles looking blindly through an array.  The check is quick and simple:

if(foundKeywords[keyword]) { //FOUND!
	//do something
}

It’s either an index or it’s not!  In PHP, we’d save the keyword to an associative array:

//Assume an array called "$found_keywords" was defined above
if(shouldSave($keyword)) {
	$found_keywords[$keyword] = 1;
}

//Later: checking if the keyword was there...
if($found_keywords[$keyword]) { //or array_key_exists($keyword,$found_keywords)
	//FOUND!
}

In a word…awesome.  Not only fast but simple!

I cannot provide a benchmark because the speed of execution depends on how large the keyword array is.  Suffice to say, for the sake of simplicity and speed, using an object with keyword index is definitely the way to go!

Quick Tip: Object Indexing vs. Array Collection is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

What is link prefetching?  From the MDC:

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser’s cache.

Simply put: the browser downloads designated documents (pages, images, etc.)  the user will likely visit after the current page.  It’s even super easy to implement!

HTML5 Link Prefetch Tag

<!-- full page -->
<link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />

<!-- just an image -->
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

HTML5 prefetching is done via the LINK tag, specifying “prefetch” as the rel and the href being the path to the document.  Mozilla also answers to a few differently named LINK rel attributes:

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />

HTTPS  fetches are also supported.

When to Prefetch Content

Whether prefetching is right for your website is up to you.  Here are a few ideas:

• When a series of pages is much like a slideshow, load the next 1-3 pages, previous 1-3 pages (assuming they aren’t massive).
• Loading images to be used on most pages throughout the website.
• Loading the next page of the search results on your website.

Preventing Prefetching

Firefox allows you to disable link prefetching with the following setting snippet:

user_pref("network.prefetch-next", false);

Prefetching Notes

A few more notes about link prefetching:

• Prefetching does work across domains, including pulling cookies from those sites.
• Prefetching can throw off website statistics as the user doesn’t technically visit a given page.
• Mozilla Firefox, currently the only browser to support prefetching, has actually supported prefetching since 2003.

So what do you think?  Using spare time to download extra files seems both dangerous and exciting.  Let me know your thoughts!

HTML5 Link Prefetching is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

One of my most popular posts has been Using MooTools 1.2 for Drag, Drop, Sort, Save. My post detailed how you can create a drag’n'drop, AJAX-ified system to allow the user to drag and drop elements and quickly save them with PHP and MySQL on the server side. I’ve chosen to update the post with a faster, more efficient set of MooTools and PHP code. I’ve also provided a jQuery equivalent. Enjoy!

The MySQL Table

This table shows only the important fields per this functionality: ID, Title, and Sort Order. Your table will likely have many more columns.

The PHP / HTML List Build

<?php
	
	$query = 'SELECT id, title FROM test_table ORDER BY sort_order ASC';
	$result = mysql_query($query,$connection) or die(mysql_error().': '.$query);
	if(mysql_num_rows($result)) {
	
?>
<p>Drag and drop the elements below.  The database gets updated on every drop.</p>

<div id="message-box"><?php echo $message; ?> Waiting for sortation submission...</div>

<form id="dd-form" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<p>
	<input type="checkbox" value="1" name="autoSubmit" id="autoSubmit" <?php if($_POST['autoSubmit']) { echo 'checked="checked"'; } ?> />
	<label for="autoSubmit">Automatically submit on drop event</label>
</p>

<ul id="sortable-list">
	<?php 
		$order = array();
		while($item = mysql_fetch_assoc($result)) {
			echo '<li title="',$item['id'],'">',$item['title'],'</li>';
			$order[] = $item['id'];
		}
	?>
</ul>
<br />
<input type="hidden" name="sort_order" id="sort_order" value="<?php echo implode(',',$order); ?>" />
<input type="submit" name="do_submit" value="Submit Sortation" class="button" />
</form>
<?php } else { ?>
	
	<p>Sorry!  There are no items in the system.</p>
	
<?php } ?>

We’ll start out by querying the database to retrieve all records from the table. If there are no records available, we simply show a message saying so. Once we have established that records are available, we:

• create a message box DIV that will notify users of the status of AJAX request actions.
• create a form element.
• create an “auto-save” option checkbox that directs whether or not the sort order should be saved on every drag/drop.
• create a UL element that outputs the list of records in their current sort order. Each LI element has its ID temporarily stored in its HTML attribute. (For those of you who don’t mind using custom element attributes, feel free to create a custom attribute to store the record ID).
• create a hidden INPUT element to dynamically store the current sort order.
• create a submit button that will work via AJAX or typical form submission.

There’s a lot of stuff going on here but it’s all necessary to ensure positive user experience, maximal functionality, and reliability.

The CSS

#sortable-list		{ padding:0; }
#sortable-list li	{ padding:4px 8px; color:#000; cursor:move; list-style:none; width:500px; background:#ddd; margin:10px 0; border:1px solid #999; }
#message-box		{ background:#fffea1; border:2px solid #fc0; padding:4px 8px; margin:0 0 14px 0; width:500px; }

None of the code here is required by, as always, you need to style your elements to fit your website. Since the drag and drop effect looks so cool, you’re going to want to make your elements look cool too.

The MooTools JavaScript

/* when the DOM is ready */
window.addEvent('domready', function() {
	/* grab important elements */
	var sortInput = document.id('sort_order');
	var submit = document.id('autoSubmit');
	var messageBox = document.id('message-box');
	var list = document.id('sortable-list');
	
	/* get the request object ready;  re-use the same Request */
	var request = new Request({
		url: '<?php echo $_SERVER["REQUEST_URI"]; ?>',
		link: 'cancel',
		method: 'post',
		onRequest: function() {
			messageBox.set('text','Updating the sort order in the database.');
		},
		onSuccess: function() {
			messageBox.set('text','Database has been updated.');
		}
	});
	/* worker function */
	var fnSubmit = function(save) {
		var sortOrder = [];
		list.getElements('li').each(function(li) {
			sortOrder.push(li.retrieve('id'));
		});
		sortInput.value = sortOrder.join(',');
		if(save) {
			request.send('sort_order=' + sortInput.value + '&ajax=' + submit.checked + '&do_submit=1&byajax=1');
		}
	};
	
	/* store values */
	list.getElements('li').each(function(li) {
		li.store('id',li.get('title')).set('title','');
	});
	
	/* sortables that also *may* */
	new Sortables(list,{
		constrain: true,
		clone: true,
		revert: true,
		onComplete: function(el,clone) {
			fnSubmit(submit.checked);
		}
	});
	
	/* ajax form submission */
	document.id('dd-form').addEvent('submit',function(e) {
		if(e) e.stop();
		fnSubmit(true);
	});
	
	
});

The first step in the process is rounding up the list of key elements in the page. Then we create our Request instance which will be used for every AJAX request. Next we create fnSubmit the function that will round up the LI elements (records) and their sort order. Lastly, we create our Sortables instance and connect submission event to the form’s submit button. When you split the pieces apart, the system is actually quite simple.

The jQuery JavaScript

/* when the DOM is ready */
jQuery(document).ready(function() {
	/* grab important elements */
	var sortInput = jQuery('#sort_order');
	var submit = jQuery('#autoSubmit');
	var messageBox = jQuery('#message-box');
	var list = jQuery('#sortable-list');
	/* create requesting function to avoid duplicate code */
	var request = function() {
		jQuery.ajax({
			beforeSend: function() {
				messageBox.text('Updating the sort order in the database.');
			},
			complete: function() {
				messageBox.text('Database has been updated.');
			},
			data: 'sort_order=' + sortInput[0].value + '&ajax=' + submit[0].checked + '&do_submit=1&byajax=1', //need [0]?
			type: 'post',
			url: '<?php echo $_SERVER["REQUEST_URI"]; ?>'
		});
	};
	/* worker function */
	var fnSubmit = function(save) {
		var sortOrder = [];
		list.children('li').each(function(){
			sortOrder.push(jQuery(this).data('id'));
		});
		sortInput.val(sortOrder.join(','));
		console.log(sortInput.val());
		if(save) {
			request();
		}
	};
	/* store values */
	list.children('li').each(function() {
		var li = jQuery(this);
		li.data('id',li.attr('title')).attr('title','');
	});
	/* sortables */
	list.sortable({
		opacity: 0.7,
		update: function() {
			fnSubmit(submit[0].checked);
		}
	});
	list.disableSelection();
	/* ajax form submission */
	jQuery('#dd-form').bind('submit',function(e) {
		if(e) e.preventDefault();
		fnSubmit(true);
	});
});

The jQuery code is surprisingly similar to the MooTools version. Please note that duplicating the jQuery functionality will require that you also download the jQuery UI library. It’s a good chunk of extra code but the functionality works great.

The “Header” PHP/MySQL

/* on form submission */
if(isset($_POST['do_submit']))  {
	/* split the value of the sortation */
	$ids = explode(',',$_POST['sort_order']);
	/* run the update query for each id */
	foreach($ids as $index=>$id) {
		$id = (int) $id;
		if($id != '') {
			$query = 'UPDATE test_table SET sort_order = '.($index + 1).' WHERE id = '.$id;
			$result = mysql_query($query,$connection) or die(mysql_error().': '.$query);
		}
	}
	
	/* now what? */
	if($_POST['byajax']) { die(); } else { $message = 'Sortation has been saved.'; }
}

The “header” or processing PHP file receives the sort order, splits the string apart by the comma delimiter, and executes queries to update the sort order. Since PHP’s mysql_query function wont allow for more than one query at a time, queries need to be executed separately. If you use another MySQL/PHP library (PDO, etc.) you may want to append the queries to a single string and execute them all at once. Depending on the method by which the user submitted the update (AJAX or normal post), the PHP will either die out or reload the page per usual.

My clients have always loved this feature within their CMS. Sorting records can be hugely important and allowing for an easy method by which to do so can make you look like a miracle worker.

Using jQuery or MooTools For Drag, Drop, Sort, Save is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

<script>
	ESPN_refresh=window.setTimeout(function(){window.location.href=window.location.href},900000);
</script>
<noscript>
	<meta http-equiv="refresh" content="900" />
</noscript>

I understand what the code was supposed to do but was confused as to why they’d use JavaScript as a primary method and META as a fallback method. Why not just use the META method? I did some research and found the answer at Wikipedia:

Use of meta refresh is discouraged by the W3C, since unexpected refresh can disorient users. Meta refresh also impairs the web browser’s “back” button in some browsers (including Internet Explorer 6 and before), although most modern browsers compensate for this (Mozilla Firefox, Opera, Internet Explorer 7).

So there you have it. Use JavaScript as your primary means for automatic page refreshes and a META tag as your fallback.

META Refresh vs. JavaScript Refresh is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The Sprite Image

This is a great example of an efficient, useful sprite image.

The HTML

<ul id="nav">
	<li id="home" <?php echo $current == '' || $current == 'home' ? 'class="current"' : ''; ?>><a href="?home">Home</a></li>
	<li id="about" <?php echo $current == 'about' ? 'class="current"' : ''; ?>><a href="?about">About</a></li>
	<li id="services" <?php echo $current == 'services' ? 'class="current"' : ''; ?>><a href="?services">Services</a></li>
	<li id="contact" <?php echo $current == 'contact' ? 'class="current"' : ''; ?>><a href="?contact">Contact</a></li>
</ul>

My code mostly mirrors the original ALA post’s code but I’ve chose to use IDs instead of CSS classes.

The CSS

#nav { width: 401px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat; position: absolute; top: 100px; left: 100px; padding:0; }
#nav li { display: inline; }
#nav li a:link, #nav li a:visited { position: absolute; top: 0; height: 48px; text-indent: -9000px; overflow: hidden; z-index: 10; }

#home a:link, #home a:visited { left: 23px; width: 76px; }
#home a:hover, #home a:focus { background: url(sprites-blue-nav.gif) no-repeat -23px -49px; }
#home a:active { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; }
#home.current a:link, #home.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -23px -147px; cursor: default; }
.nav-home, .nav-home-click { position: absolute; top: 0; left: 23px; width: 76px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -23px -49px; }
.nav-home-click { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; }

#about a:link, #about a:visited { left: 100px; width: 82px; }
#about a:hover, #about a:focus { background: url(sprites-blue-nav.gif) no-repeat -100px -49px; }
#about a:active { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; }
#about.current a:link, #about.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -100px -147px; cursor: default; }
.nav-about, .nav-about-click { position: absolute; top: 0; left: 100px; width: 82px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -100px -49px; }
.nav-about-click { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; }

#services a:link, #services a:visited { left: 183px; width: 97px; }
#services a:hover, #services a:focus { background: url(sprites-blue-nav.gif) no-repeat -183px -49px; }
#services a:active { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; }
#services.current a:link, #services.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -183px -147px; cursor: default; }
.nav-services, .nav-services-click { position: absolute; top: 0; left: 183px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -183px -49px; }
.nav-services-click { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; }

#contact a:link, #contact a:visited { left: 281px; width: 97px; }
#contact a:hover, #contact a:focus { background: url(sprites-blue-nav.gif) no-repeat -281px -49px; }
#contact a:active { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; }
#contact.current a:link, #contact.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -281px -147px; cursor: default; }
.nav-contact, .nav-contact-click { position: absolute; top: 0; left: 281px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -281px -49px; }
.nav-contact-click { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; }

Unfortunately there’s plenty of CSS. That’s generally the one downside of using sprites but the payoff comes with less requests to the server. My CSS differs from the original ALA post in that I accommodate for my IDs.

The MooTools JavaScript

(function($) {
	window.addEvent('domready',function() {
		$('nav').getElements('li').each(function(li) {
			//settings
			var link = li.getFirst('a');
			//fix background image
			if(!li.hasClass('current')) {
				link.setStyle('background-image','none');
			}
			//utility div
			var div = new Element('div',{
				'class': 'nav-' + li.get('id'),
				opacity: 0
			}).inject(li);
			//background imagery
			li.addEvents({
				mouseenter: function() {
					div.fade('in');
				},
				mouseleave: function() {
					div.fade('out');
				},
				mousedown: function() {
					div.addClass('nav-' + li.get('id') + '-click');
				},
				mouseup: function() {
					div.removeClass('nav-' + li.get('id') + '-click');
				}
			});
		});
	});
})(document.id);

My MooTools version is less code and slightly more efficient as I’m not creating and disposing of the same DIVs over and over as the user hovers over each menu item. The menu has original, selected, hovered, and mousedown states. Awesome!

Do you use sprites for any of your menus? Share a link to a few — I’d love to see what you’ve done!

Create a Sprited Navigation Menu Using CSS and MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.