I'm working with wordpress and I'd like to change the url once you click any local link. I'm loading pages with ajax, that's why I want to do this.
I could make the url change adding a hash between the "http://site.com/" and the loaded content /example-page/, the result: "http://site.com/#/example-page" and it loads the example page but I want to add the "!" mark to get "http://site.com/#!/example-page" just like this theme
I'm using jquery-hashchange plugin btw.
Please let me know what you think.
This code was edited after solved, so this is the right code.
jQuery(document).ready(function($) {
var $mainContent = $("#container"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
location.hash = '!' + this.pathname;
return false;
});
$("#searchform").submit(function(e) {
location.hash = 's/' + $("#s").val();
e.preventDefault();
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(3);
if (!url) {
return;
}
url = url + " #content";
$mainContent.animate({opacity: "0.1"}).html('Please wait...').load(url, function() {
$mainContent.animate({opacity: "1"});
});
});
$(window).trigger('hashchange');
});
Change
location.hash = this.pathname;
to
location.hash = "#!" + this.pathname;
(strictly speaking you should have had the hash there before) and change
url = window.location.hash.substring(1);
to
url = window.location.hash.substring(2);
and also change
location.hash = '?s=' + $("#s").val();
to
location.hash = '#!?s=' + $("#s").val();