Automagic Previous / Next Links

[Ian Rastall]

I do a site where I have a previous and next link at the bottom of
every page. It looks like:

<p><a href="foo01.html">Previous</a> | <a href="foo03.html">Next</a></p>

Seeing as they're always in sequential order, is there a way to
automagically go to the previous file or the next file using JS?

Ian

 

[Evertjan.]

Ian Rastall wrote on 18 mrt 2006 in comp.lang.javascript:

I do a site where I have a previous and next link at the bottom of
every page. It looks like:

<p><a href="foo01.html">Previous</a> | <a href="foo03.html">Next</a></p>

Seeing as they're always in sequential order, is there a way to
automagically go to the previous file or the next file using JS?

Using serverside J(ava)script/ASP:

<%@ language="jscript"%>
<%
thisOne = request.servervariables('SCRIPT_NAME')
thisNumber = +thisOne.replace(/.*?\//g,'').replace(/\D+/g,'')

nextNumber = ++thisnumber
if(nextNumber<0||nextNumber>99)nextNumber=0
nextNumber = (nextNumber<10)?'0'+nextNumber:nextNumber

//about the same for lastNumber

%>

<a href="foo<%=lastNumber%>.html">Previous</a> |
<a href="foo<%=nextNumber%>.html">Next</a>

Not tested

 

[Ian Rastall]

Using serverside J(ava)script/ASP:

Hi Evertjan. I've never used server-side JS, and don't know if
AffordableHost uses it. (I'd have to ask.) Two questions:

1. Would it require me to change the extensions?
2. Can it be done client-side?

What I'm trying to do is make every page as close to the same as
possible. I'm working with over 2,500 files right now, and doing them
by hand.

I wonder if a preprocessor would work, but that's a question for
CIWAH, I imagine.

Ian

 

[David Dorward]

1. Would it require me to change the extensions?

That depends on the host

2. Can it be done client-side?

Then it would break if client side scripting was unavailable or turned off
(this covers a significant number of users and all major search engine
indexers).

I wonder if a preprocessor would work,
Probably

but that's a question for CIWAH, I imagine.

You could write one in JavaScript

 

[Ian Rastall]

Then it would break if client side scripting was unavailable or turned off
(this covers a significant number of users and all major search engine
indexers).

Okay, here's an idea. This is along the lines of graceful degradation.
If I coded the "Previous | Next" entirely in JS, including the HTML
bits, it would simply not be there if the user had JS turned off, and
they would just go back up to the top of the file and refer to the
table of contents. Not as handy, but still useable. The site wouldn't
break.

So *is* this something that can be done client-side? I've realized
that a pre-processor would be almost as much trouble, and the reason I
ask about JS is so I don't have to change the extensions. I have no
idea how I would redirect 2,500 pages from .html to .php or something,
unless there were a way to do it in .htaccess. Granted, most people
probably have only the front page bookmarked, but still....

Ian

 

[TheBagbournes]

I do a site where I have a previous and next link at the bottom of every
page. It looks like:

<p><a href="foo01.html">Previous</a> | <a href="foo03.html">Next</a></p>

Seeing as they're always in sequential order, is there a way to
automagically go to the previous file or the next file using JS?

Ian

Look at top.location.href (which will be something like
"http://host/root/whatever/foo03.html")

Parse out the number, put the new number into that string and put it
into top.location.href.

 

[Ian Rastall]

Look at top.location.href (which will be something like
"http://host/root/whatever/foo03.html")

Parse out the number, put the new number into that string and put it
into top.location.href.

Thanks! I'm definitely not sleeping now.

Ian

 

[Ian Rastall]

Parse out the number, put the new number into that string and put it
into top.location.href.

Okay, I'm making progress, but I'm a bit stuck. The bottom of the page
looks like:

<a href="#" onclick="previous();">Previous</a> | <a href="#"
onclick="next();">Next</a></p>

and in the <script> section, for the first function, there's:

var addy = top.location.href;
function previous() {
var result1 = addy.indexOf(".html");
var num1 = addy.substring(result1-3,result1);
if(isNaN(num1)){
num1 = addy.substring(result1-2,result1);
}
num1--;
}

I know it's a mess. The problem is, it's a string up until it gets
decremented, at which time it becomes a number, and loses the leading
0. This won't always be a problem, but it will whenever there's a
leading zero. I also have no idea how to put the number back into the
string. Am I going about this the wrong way?

Ian

 

[Evertjan.]

Ian Rastall wrote on 18 mrt 2006 in comp.lang.javascript:

Hi Evertjan. I've never used server-side JS, and don't know if
AffordableHost uses it. (I'd have to ask.) Two questions:

1. Would it require me to change the extensions?

You would need a server with ASP. The extensins are usually .asp but could
be set to anything.

2. Can it be done client-side?

Sure, but not as nice and not as usefull.

[php would be just as good as ASP, but that is not j(ava)script]

What I'm trying to do is make every page as close to the same as
possible. I'm working with over 2,500 files right now, and doing them
by hand.

2,500 files without serverside programming does not sound very usable.

With serverside ASP and includes, you write only one include file and
include the file in all 2,500.

I wonder if a preprocessor would work, but that's a question for
CIWAH, I imagine.

Don't know anythng about that.

 

[Evertjan.]

Ian Rastall wrote on 18 mrt 2006 in comp.lang.javascript:

Okay, I'm making progress, but I'm a bit stuck. The bottom of the page
looks like:

<a href="#" onclick="previous();">Previous</a> | <a href="#"
onclick="next();">Next</a></p>

and in the <script> section, for the first function, there's:

var addy = top.location.href;
function previous() {
var result1 = addy.indexOf(".html");
var num1 = addy.substring(result1-3,result1);
if(isNaN(num1)){
num1 = addy.substring(result1-2,result1);
}
num1--;
}

I know it's a mess. The problem is, it's a string up until it gets
decremented, at which time it becomes a number, and loses the leading
0. This won't always be a problem, but it will whenever there's a
leading zero. I also have no idea how to put the number back into the
string. Am I going about this the wrong way?

Yes you are.

Look at my earlier serverside code and use the same clientside:

================================

var thisNumber = top.location.href;
thisNumber = +thisOne.replace(/.*?\//g,'').replace(/\D+/g,'')

var lastNumber = thisnumber-1
if (lastNumber <0) lastNumber = 0
lastNumber = (lastNumber <10) ? '0'+lastNumber : lastNumber

document.write('<a href="foo'+lastNumber +'.html">Last</a> |')

var nextNumber = thisnumber+1
if(nextNumber<0||nextNumber>99)nextNumber=0
nextNumber = (nextNumber<10)?'0'+nextNumber:nextNumber

document.write('<a href="foo'+nextNumber+'.html">Next</a>')

=================================

not tested

 

[Evertjan.]

David Dorward wrote on 18 mrt 2006 in comp.lang.javascript:

Then it would break if client side scripting was unavailable or turned
off (this covers a significant number of users and all major search
engine indexers).

Not necessarily, use the DOM for changing the default nonscripted html:

<div id=mydiv>
<a href="fooDefault.html">go to choice page</a>
[or simpler code]
</div>

<script type=...>
...............

var mydiv = document.getelementById('mydiv')
mydiv.innerHTML = '<a href="foo'+nextNumber+'.html">Next</a>'


</script>

 

[Ian Rastall]

================================

var thisNumber = top.location.href;
thisNumber = +thisOne.replace(/.*?\//g,'').replace(/\D+/g,'')

var lastNumber = thisnumber-1
if (lastNumber <0) lastNumber = 0
lastNumber = (lastNumber <10) ? '0'+lastNumber : lastNumber

document.write('<a href="foo'+lastNumber +'.html">Last</a> |')

var nextNumber = thisnumber+1
if(nextNumber<0||nextNumber>99)nextNumber=0
nextNumber = (nextNumber<10)?'0'+nextNumber:nextNumber

document.write('<a href="foo'+nextNumber+'.html">Next</a>')

=================================

Oh my goodness, and I just finshed, too! Here's what I wrote:

===================================

var addy = top.location.href;
function previous() {
var result1 = addy.indexOf(".html");
var num1 = addy.substring(result1-3,result1);
if(isNaN(num1)){
num1 = addy.substring(result1-2,result1);
num1--;
var backa = num1.toString();
if(backa.indexOf("0")){
backa = "0" + backa;}
var newaddya = addy.slice(0,result1-2);
newaddya = newaddya + backa + ".html";
location.href = newaddya;
} else {
num1--;
var backb = num1.toString();
if(backb.indexOf("00")){
backb = "00" + backb;} else if(backb.indexOf("0")) {
backb = "0" + backb;}
var newaddyb = addy.slice(0, result1-3);
newaddyb = newaddyb + backb + ".html";
location.href = newaddyb;
}
}
function next() {
var result2 = addy.indexOf(".html");
var num2 = addy.substring(result2-3,result2);
if(isNaN(num2)){
num2 = addy.substring(result2-2,result2);
num2++;
var backc = num2.toString();
if(backc.indexOf("0")){
backc = "0" + backc;}
var newaddyc = addy.slice(0,result2-2);
newaddyc = newaddyc + backc + ".html";
location.href = newaddyc;
} else {
num2++;
var backd = num2.toString();
if(backd.indexOf("00")){
backd = "00" + backb;} else if(backd.indexOf("0")) {
backd = "0" + backd;}
var newaddyd = addy.slice(0, result2-3);
newaddyd = newaddyd + backd + ".html";
location.href = newaddyd;
}
}

=================================

Sorry for the length. You know, I hate to say it, but I think I pasted
this in just to lament the inelegance of my code. I mean, it works,
but it's ugly. I'm going to try what you wrote and see if I can't make
it work. Thanks for the suggestion.

Ian

 

[Ian Rastall]

I'm going to try what you wrote and see if I can't make it
work.

Well, I fixed a few bugs and got it to work for the "Previous" link,
but not the "Next" link, as it thinks the page number is a string by
the time it gets to that point in the program, so "2" becomes "21",
not "3". Probably easy to fix, but one problem is that this only works
within one folder. The "foo" in this case changes for each book. My
code, though ugly, works across the whole site, so I'll probably just
go with that, and try not to get hit by lightning.

Thanks for all the help.

Ian

 

[Evertjan.]

Ian Rastall wrote on 18 mrt 2006 in comp.lang.javascript:

Well, I fixed a few bugs and got it to work for the "Previous" link,
but not the "Next" link, as it thinks the page number is a string by
the time it gets to that point in the program, so "2" becomes "21",
not "3". Probably easy to fix, but one problem is that this only works
within one folder. The "foo" in this case changes for each book. My
code, though ugly, works across the whole site, so I'll probably just
go with that, and try not to get hit by lightning.

Thanks for all the help.

Ian

you could also detect the part before the number by regex deleting the part
from the first figure:

var s = 'abcd1234.html'
var beforenumber = s.replace(/\d.*/,'')
alert(beforenumber) // shows: abcd

tested ;-)

==============

btw, I would urgently urge you to take the serverside code way,
sidestepping all the inconsistencies of clientside scripting.

Having heard the amount of pages, Ian, your site consists of,
it can only be to your advantage.

 

[Ian Rastall]

I would urgently urge you to take the serverside code way,
sidestepping all the inconsistencies of clientside scripting.

Hi Evertjan. I know it's off-topic to a JavaScript group, but is
..htaccess the best way to redirect all those pages, since I'll be
changing the extension on them? I can ask on CIWAH if need be.

Ian

 

[Evertjan.]

Ian Rastall wrote on 18 mrt 2006 in comp.lang.javascript:

Hi Evertjan. I know it's off-topic to a JavaScript group, but is
.htaccess the best way to redirect all those pages, since I'll be
changing the extension on them? I can ask on CIWAH if need be.

..htaccess is linux only, I presume, so php.

Jscript serverside is on Windows servers under ASP.

redirection under ASP can easily and "dedicatedly" be done
in a dedicated 404.asp page, like this:

===================================
<% ' vbscript, ASP, 404.asp-page

qstr = lcase(Request.ServerVariables("QUERY_STRING"))
pos = instr(qstr,"/myolddirectory/")

if pos>0 and instr(qstr,".html")>0 then
file = mid(qstr, instr(qstr,pos+16)
file = "/mynewASPdirectory/" & replace(file,".html",".asp")
server.transfer file
end if

%>

file <%=qstr %> not found, this is the 404 page<hr>
===================================

not tested.

 

[Evertjan.]

Randy Webb wrote on 18 mrt 2006 in comp.lang.javascript:

No. .htaccess is Apache and has nothing to do with the server side
language or the OS. Apache for Windows has .htaccess as well.

Ah...pache, Indian story?

 

[Randy Webb]

Evertjan. said the following on 3/18/2006 1:28 PM:

Ian Rastall wrote on 18 mrt 2006 in comp.lang.javascript:


..htaccess is linux only, I presume, so php.

No. .htaccess is Apache and has nothing to do with the server side
language or the OS. Apache for Windows has .htaccess as well.

Sidenote: One thing that has not been mentioned yet as a drawback to
client-side scripting is that it has no way of knowing the last page
unless you update the script every time you add a page.

 

[Randy Webb]

Evertjan. said the following on 3/18/2006 5:48 PM:

Randy Webb wrote on 18 mrt 2006 in comp.lang.javascript:


Ah...pache, Indian story?

Yup, brave warrior he was Or was it a she? Hmmmmm

 

[Lasse Reichstein Nielsen]

I do a site where I have a previous and next link at the bottom of
every page. It looks like:

<p><a href="foo01.html">Previous</a> | <a href="foo03.html">Next</a></p>

Seeing as they're always in sequential order, is there a way to
automagically go to the previous file or the next file using JS?

If you know the algorithm for computing the link to the next/previous
page from the URL of the current one, sure:

function addPrevNext() {
var prevLink = calculatePrevLink(location.href);
var nextLink = calculateNextLink(location.href);
var p = document.createElement("p")
if (prevLink) {
var pa = document.createElement("a");
pa.href = prevLink
pa.appendChild(document.createTextNode("Previous"));
p.appendChild(pa);
if (nextLink) {
p.appendChild(document.createTextNode(" | "));
}
}
if (nextLink) {
var na = document.createElement("a");
na.href = nextLink
na.appendChild(document.createTextNode("Next"));
p.appendChild(na);
}
document.body.appendChild(p);
}

You must then implement the strategy for finding previous/next links,
e.g.:

function modifyStringNumber(string, mod) {
var n = String(Number(string) + mod);
if (string.charAt(0)=='0') { // prefix 0's
while(n.length < string.length) {
n = "0" + n;
}
}
return n;
}
function calculatePrevLink(url) {
return url.replace(/\d+/g, function(match,index,string) {
return modifyStringNumber(match, -1);
});
}
function calculateNextLink(url) {
return url.replace(/\d+/g, function(match,index,string) {
return modifyStringNumber(match, +1);
});
}



However, you might want to use the feature defined in the HTML standard
for specifying previous and next page links:
<link rel="prev" href="foo03.html">
<link rel="next" href="foo03.html">

/L