How to create Previous and Next buttons functionality?

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>

<head>

<title>title>

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>

Get URLbutton>

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.

<head>

<title>title>

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>

Get URLbutton>

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.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ajay Malik9y ago
Accepted answer
1. varinterval=undefined;
2. $(document).ready(function(){
3. interval=setInterval(getNext,2000);//milliseconds
4. $('#next').on('click',getNext);
5. $('#prev').on('click',getPrev);
6. });
8. functiongetNext(){
9. var$curr=$('.slideshowimg:visible'),
10. $next=($curr.next().length)?$curr.next():$('.slideshowimg').first();
12. transition($curr,$next);
13. }
15. functiongetPrev(){
16. var$curr=$('.slideshowimg:visible'),
17. $next=($curr.prev().length)?$curr.prev():$('.slideshowimg').last();
18. transition($curr,$next);
19. }
21. functiontransition($curr,$next){
22. clearInterval(interval);
24. $next.css('z-index',2).fadeIn('slow',function(){
25. $curr.hide().css('z-index',0);
26. $next.css('z-index',1);
27. });
28. }