mercredi 6 mai 2015

Improving full ajax website

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