This is working, but I'm not being able to set an index.html file on my server root where i can specify the first page to go. It also get very buggy in some situations.
Basically it's a common site (menu content) but the idea is to load the content without refreshing the page, defining the div to load the content, and make each page accessible by the url. One of the biggest problems here it's dealing with all url situations that may occur.
The ideal would be to have a rel="divToLoadOn" and then pass it on my loadContent() function... so I would like or ideas/solutions for this please.
Thanks in advance!
//if page comes from URL
if(window.location.hash != ''){
var url = window.location.hash;
url = '..'+url.substr(1, url.length);
loadContent(url);
}
//if page comes from an internal link
$("a:not([target])").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
if(url != '#'){
loadContent($(this).attr("href"));
}
});
//LOAD CONTENT
function loadContent(url){
var contentContainer = $("#content");
//set load animation
$(contentContainer).ajaxStart(function() {
$(this).html('loading...');
});
$.ajax({
url: url,
dataType: "html",
success: function(data){
//store data globally so it can be used on complete
window.data = data;
},
complete: function(){
var content = $(data).find("#content").html();
var contentTitle = $(data).find("title").text();
//change url
var parsedUrl = url.substr(2,url.length)
window.location.hash = parsedUrl;
//change title
var titleRegex = /(.*)<\/title/.exec(data);
contentTitle = titleRegex[1];
document.title = contentTitle;
//renew content
$(contentContainer).fadeOut(function(){
$(this).html(content).fadeIn();
});
});
}
