How to configure our site con run this code?
Hasher is unobtrusive, is for that reason that you only need to develop your site once in HTML and leave the obscure part to hasher.php. Hasher just cuts the important part of the site and give to AJAX to replace a website are (for example a div contents).
We need to configure two parts, the PHP part (hasher.php) and the jQuery part (jquery.hasher.js).
The JS part:
First of all, add jquery and jquery hasher plugin files to all your desired ajax friendly pages.
Once, create a selector for all links that you want that fire the ajax load. In the example we use "#top a". Then, hasher replaces the current link for another "History navigation and AJAX friendly" (HNAF), that sound like: 'currentURL#!/folder/file.html'.
At this point we have something like this:
$('#top a').hasher([options]);Now is time to fill the [options] object. It have 3 parameters:
selector (needed): This parameter defines the element that hasher would try to load the content in. In the example we use "#container". Obiously you can define a selector as complex as you need.
init (optional): a function that fires at the start of every AJAX load.
end (optional): a function that fires at the end of every AJAX load.
$('#top a').hasher(
{
selector : '#container',
init : showLoadingImage,
end : hideLoadingImage
}
);That's it, now the PHP part.
The PHP part:
We need to define a way to cut the content part of the page that we want to load.
To do this, hasher uses a simply method with ob_start and a regular expression.
hasher.php captures the output buffering of the page we are loading and once in memory it extracts the area that we want to load to the defined element.
Another improvement that we can do is extract other information like title and print it to its correct location using simple javascript (with document.title='<?=$title?>';) * This part is not implemented, you just need to do a bigger regular expression.
Code of hasher.php is really easy to understand, try to take a look and ... just adapt it to your needs.
demo page:
http://www.004.es/sitehasher/
download link:
http://www.004.es/sitehasher/hasher.zip
feedback post
http://www.nbsp.es/2010/09/17/site-hasher-jquery-plugin/
dependencies:
jquery.hashchange
