Question

Let’s say I have a page that slides right and left and loads new content using ajax. A variable gets set to leftslide or rightslide depending on the slide direction.

When you click the back button in the browser the html5 popstate event enables and loads the last page using ajax. Now using the variable I can determin what direction to slide in when the back button is pushed if (var direction == 'leftslide'){ direction = 'rightslide'} (to get a nice “back” effect).

But if you push the backbutton twice the slide will not always be correct sine it will just reverse the slide instead of looking at the slide of that paticular page.

So is there any way to save a variables history and get the order back using javascript?

thanks for reading and thinking about this 🙂

Answer 1

var history = [];
var position = 1;

function onSlide() {
    history.push(currentPage);
};

function lastPage() {
    return history.length && history[history.length - 2];
};

function currentPage() {
    return history.length && history[history.length - 1];
};

function goBack() {
    if (history.length) {
        position += 1;

        navigateTo(history[history.length - position]);
    }
}

function goForward() {
    if (history.length) {
        position -= 1;

        navigateTo(history[history.length - position]);
    }
}

Get the idea?

Basically, we are saving each page we visit in an array. When we navigate through history, we keep track of our position in history by updating an integer variable that indicates which slot in the history array to check.