I would like to try to improve a script that I use to make my ajax site. But after several attempts, no results. I need some help! ^^
This script was found on GitHub, and the author left a simple demo page. The author uses history.js. HERE
Here's the problem: 1- The back button works normally, but do not work when you have to return to the "index.php".
2- I would change the name of the created pages, but I can not win without breaking the script.
3- Finally I would like to add a function to load the div and use jqueryscrollto to make a transition effect.
I originally wanted to use this script (http://ift.tt/1lrQjVG) but I have not managed to implement. Having no single demo page using this script.
Thank you in advance if you look at the problem.
(function(window, jQuery){
if(!Modernizr.history){
alert("No HTML5 pushState support!");
}
var directory = 'content/'; //directory of the content we want to ajax in
var state = History.getState();
//for when they click on an ajax link
$('.ajaxify').on('click', function(e){
var $this = $(this);
var href = $this.attr('href'); // use the href value to determine what content to ajax in
$.ajax({
url: directory + href + '.html', // create the necessary path for our ajax request
dataType: 'html',
success: function(data) {
$('p').css('display', 'block');
$('#content').html(data); // place our ajaxed content into our content area
History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
}
});
e.preventDefault(); // we don't want the anchor tag to perform its native function
});
//for when they hit the back button
$(window).on('statechange', function(){
state = History.getState(); // find out what we previously ajaxed in
$.ajax({
url: directory + state.title + '.html', //create our path
dataType: 'html',
success: function(data) {
$('#content').html(data);
}
});
});
/********************************************************************/
/*******************************NOTE*********************************/
/********************************************************************/
// This is just an example to help demonstrate how to ajaxify a website
// Ideally this would be used in combination with a server side language to reduce the redundant html files at the root level
}(window, $));
Aucun commentaire:
Enregistrer un commentaire