CODEWITHSUNDEEP
javascriptjqueryhtmlajax
John the Painter
John the Painter

Reputation: 2615

Detecting back button triggers (using Ajaxify and History.js)

I'm using Ajaxify, which uses History.js.

When a project link is clicked, the content slides in via ajax and the URL is changed. When the close button is clicked, the panel slides out and the url is updated. Simple.

However, when I click the back button, rather than the close button, the URL updates (presumably triggered correctly by History.js) but the panel doesn't slide back out. This is due to having separate code controlling the slide in/out.

What I'm looking to do is find out if you can detect when the back button is triggered? Reading up on the spec I thought using the .statechange could work, but rather that picks up on every .statechange, not specifically the back button.

Few things to note – the panel that slides out with the ajaxed content is called .panel-slide' and when it is open it has the class .opened and when it is closed .closed. Maybe we can use this to aid the .statechange?

Here's my code for the panel-slide

$(document).ready(function() {

$('.panel-slide').addClass('closed');

var e = $(window).width();

$('.panel-slide.closed').css('margin-left', e + 'px');

$(window).resize(function() {       
    var e = $(window).width();
    $('.panel-slide.closed').css('margin-left', e + 'px')
});

$('body').on('click', '.close-panel', function() {      
    $('.panel-slide').animate({marginLeft: e + 'px'}, 1e3, 'easeInOutCubic', function() {
        History.back();
    });
    $('.panel-slide').attr('class', 'panel-slide closed');
    $('ul li a').animate({
        opacity: 1
    }, 500, function() {});
});

$('ul li a').click(function() {
    $('.panel-slide').attr('class', 'panel-slide opened');
    $('ul li a').animate({
        opacity: 0
    }, 500, function() {});
});

});

And my entire modified ajaxify is here http://snippi.com/s/m0058ru

Upvotes: 2

Views: 912

Answers (1)

d1m5n
d1m5n

Reputation: 411

I had the same problem, no detection between history back and a click of a link. I have altered my script and it's functioning.

If a link is pressed, my script uses a function animateLeftToRight(); If a back/forward button is pressed, my script uses a function animateRightToLeft();

It's not the best solution, because of the forward button, but most visitors only use a back button and not the forward buttons.

I'll try to explain as perfect as possible.

I add a variable called nextPage, by default this one is false. When a link is being clicked, this variable is set as true.

Somewhere you are handling your stateChanges, check is nextPage is true, then use the normal animation. If the nextPage is false, use an altered animation.

After the animations, set nextPage to false again.

var nextPage = false;

$('a').click(function(){
    nextPage = true;
    if(nextPage){
        animateRightToLeft();
    }
    else{
        animateLeftToRight();
    }
});

function animateLefToRight(){
    // animation stuff
    // after animation add:
    nextPage = false;
}

function animateRightoLeft(){
    // animation stuff
    // after animation add:
    nextPage = false;
}

I hope you have enough information to use this and integrate this into your script. I have succeeded with this script, only my script is to complex to show here, so i have simplyfied it.

Upvotes: 3

Related Questions