Question

I read from the documentation that we can handle the back button click using the following code:

document.addEventListener("backbutton", backKeyDown, true); 
function backKeyDown() { 
     // Call my back key code here.
    alert('go back!');
}

My concern is that I have a single HTML5 web page in which I have multiple div tags which I animate using jQuery as per the navigation option selected by the user from the menu options.

How can I, in this single page webapp, handle the back button click using PhoneGap and show the user the previously animated div. Clicking on the back button again would again take him to the previous div of the current previous div 🙂

Thanks.

Answer 1

I solved the problem by creating a global array variable as

var myStack = new Array();

Then whenever I clicked on the div tag, I inserted the function prototype along with the arguments inside the myStack variable. For eg:

myStack.push(\"myfunction(args1, args2);\");

Then, using the code which I posted in my question, inside the BackButton handler, I wrote the following code:

var divToShow = myStack.pop();
eval(divToShow);

Hope this helps others.