Adding "Next Topic" and "Previous Topic" Buttons to 130 webpages, code not working unless alerted first

Question

I have put "Next Topic" and "Previous Topic" ( fixed)on each web page so you can click to move one page back or forward through the web site.

Here is the code:

$(document).ready(function($){
$("#fixed").prepend('<input type="button" value="Next Topic" id="nt">');
$("#fixed").prepend('<input type="button" value="Previous Topic" id="pt">');
$('#nt').css({'position':'relative','top':'0','left':'24px','font-size':'9px'});
$('#pt').css({'position':'relative','top':'0','left':'0','font-size':'9px'});

var fname = document.location.href;
var thistopic = (fname).split('/').pop();
alert(thistopic);

var nexttopic = $('#jsddm li a');
nexttopic.each(function(index) {
var ref = $(this).attr('href');
if (ref == thistopic){
var num =(index)
 }else{
 return;
 }

var flnk =($(nexttopic)[num+1].getAttribute('href', 2));
var blnk =($(nexttopic)[num-1].getAttribute('href', 2));
$('#nt').live('click', function(){
location.href=flnk;
});
$('#pt').live('click', function(){
location.href=blnk;
});
});
 });

id=nt is the "Next Topic" Button,id=pt is the "Previous Topic" Button

flnk is the HREF of the next topic page, blnk is the HREF of the prvious topic page.

HREFs are grabbed from - ul#jsddm li ul li a - a large unordered list menu.

This code works correctly if I have the eighth line included "alert(nexttopic)" If I take this line out (which I want to, as I do not want alert box popping up) - then the code will not work.

Can anybody put me right please, so the buttons work without "alert(nexttopic)" line included

Answer 1

Please note last line should read:

Can anybody put me right please, so the buttons work without "alert(thistopic)" line included

"not worK" means exactly that. Clicking the "Next Topic" or "Previous Topic" button does not load the relevant page. If I leave the "alert(thistopic);" code in place - then clicking these buttons does load the next or previous page. But I want to take this "alert(thistopic);" out of the code. - JG

Answer 2

The Next Topic amd Previous Topic buttons will now cycle hrough the website.

Here is the code that works. It is dynamic if web pages are added or removed from the website and only one file is required, it can be added to an external JS file to become global. It is now up and running on my website.

I still do not know ahy I had to "alert" the previous code for it to work,

Here is the working version: $(document).ready(function(){ $("#fixed").prepend(''); $("#fixed").prepend(''); $('#nextbut').css({'position':'relative','top':'0','left':'24px','font-size':'9px'}); $('#prevbut').css({'position':'relative','top':'0','left':'0','font-size':'9px'});

$("#nextbut").click(function(event){ var fname = document.location.href; var thistopic = fname.split('/').pop(); var nexttopic = $('#jsddm li a'); nexttopic.each(function(index) { var ref = $(this).attr('href'); if (ref == thistopic){ var num = 0; num = (index) }else{ return; }

var flnk =($(nexttopic)[num+1].getAttribute('href', 2)); location.href=flnk; }); });

$("#prevbut").click(function(event){ var fname = document.location.href; var thistopic = fname.split('/').pop(); var nexttopic = $('#jsddm li a'); nexttopic.each(function(index) { var ref = $(this).attr('href'); if (ref == thistopic){ var num = 0; var num =(index) }else{ return; }

var blnk =($(nexttopic)[num-1].getAttribute('href', 2)); location.href=blnk;

}); }); });