How to create Previous and Next buttons functionality?

Nov 2 2016 2:00 PM

Hi All,

I am preparing navigation application. In this application I want to place “Previous/Next” buttons on map menu. For this I wrote code in many forms.

Actually at the time of map pan the coordinates in URL are getting change and the URL is not saved in browser history.

Example URL for clarification.

http://network/index.html#/map/17.775178,73.791582,10z

http://network/index.html#/map/16.041423,76.043410,10z

http://network/index.html#/map/11.298843,99.014032,10z

http:// network/index.html#/map/8.944884,99.075045,10z

Based on this type of URLs I want to perform “Previous/Next” functionality.

For this I want to store every URL in array and retrieve the URLs based on index. For this I did following code.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

<script type="text/javascript">

var URLlist = [];

var ind = 0;

$(document).ready(function () {

$("button").click(function () {

URLlist[ind] = pageURL;

ind = ind + 1;

alert(pageURL);

});

});

function goBkHist(a) {

var l_ref = ind - 2;

var pageURL2 = URLlist[l_ref];

ind = l_ref + 1;

loadURL(pageURL2);

}

function goFdHist(a) {

var l_ref_2 = ind;

var pageURL2 = URLlist[l_ref_2];

ind = l_ref_2 + 1;

loadURL(pageURL2);

}

function loadURL(newLocation) {

window.location = newLocation;

return false;

}

</script>

</head>

<body>

<input type="button" value="Previous " onclick="goBkHist(-1)" />

<input type="button" value="Next" onclick="goFdHist(1)" />

<button type="button">

Get URL</button>

</body>

</html>

By click on “Get URL” I am storing URL into array and click on “Previous/Next” it goes to that URL.

I want to store URLs based on the URL changed in address bar. But I am unable to get URLs based on URL change in Address bar.

I decided to use mouse events to store URLs for this I tried “onmousedown” event to store URL in array but when I click on “Previous/Next” buttons it is not working fine.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

<script type="text/javascript">

var urllist = [];

var ind = 0;

function whichbutton(event) {

urllist[ind] = pageURL;

ind = ind + 1;

alert(pageURL);

}

function goBkHist(a) {

var l_ref = ind - 2;

var pageURL2 = urllist[l_ref];

ind = l_ref + 1;

loadUrl(pageURL2);

}

function goFdHist(a) {

var l_ref_2 = ind;

var pageURL2 = urllist[l_ref_2];

ind = l_ref_2 + 1;

loadUrl(pageURL2);

}

function loadUrl(newLocation) {

window.location = newLocation;

return false;

}

</script>

</head>

<body>

<div onmousedown="whichbutton(event)">

<input type="button" value="BACK " onclick="goBkHist(-1)" />

<input type="button" value="FORWARD" onclick="goFdHist(1)" />

<button type="button">

Get URL</button>

</div>

</body>

</html>

Any one please tell me possible solution for doing this functionality.

How can I store URLs without any event performance? I want to store URLs into Array at the time of url changed in Address bar.


Attachment: BackForward.rar

Answers (2)