Load next page in a directory

@JUICE690May 21.2009

Hi all,

I’m putting together a website that will have many pages (up to 30) in different directory’s. I’d like users to be able to navigate between the pages in each directory by clicking next / previous buttons.

Is there a way in javascript to load the next/previous page in a directory without me having to type absolute or relative links in each .html page I create.

e.g clicking next button loads page2.html / clicking next again loads page3.html / clicking previous loads page2.html and so on…

Thanks for any advice

to post a comment

JavaScript

12 Comments(s) _↴

@CharlesMay 21.2009 — #With JavaScript, no. With an Apache server you could do this playing around with .htaccess or you could use some sort of server side scripting.

@Y_LessMay 21.2009 — #If they are numbered like that then yes, but what happens when people have javascript turned off? The obvious solution would be to make the links go to the next page by default by a set href, and have the JS do something fancy if they have it. But as the fancy thing you're trying to do is exactly the same as the default behaviour for a link I suggest you stop trying to save yourself a few seconds work with a few hours work and just type the links.

@JUICE690authorMay 21.2009 — #Ah well, unfortunately those options aren't viable for this project. Thanks for your reply anyway.

@JUICE690authorMay 21.2009 — #If they are numbered like that then yes, but what happens when people have javascript turned off? The obvious solution would be to make the links go to the next page by default by a set href, and have the JS do something fancy if they have it. But as the fancy thing you're trying to do is exactly the same as the default behaviour for a link I suggest you stop trying to save yourself a few seconds work with a few hours work and just type the links.[/QUOTE]

Sorry I should have been clearer, the website is actually going to be used as an interactive for a company so it only be accessible from two computers in their reception, it won't be connected to the internet so there isn't a problem with javascript being turned off.

The other reason for using the load next page/previous page is that they would like the interactive updated occasionaly so I may be removing/adding pages and as you can image that would be far easier and quick to do with pages named 1.html etc.

Thanks for your help btw

@CharlesMay 21.2009 — #You did omit some important information there. JavaScript simply doesn't have access to file controls so that's stilll out of the question. If this will be running on Windows then I would impliment this as an HTML Application, using JScript and the file system object. [list]

[*]http://msdn.microsoft.com/en-us/library/ms536496(VS.85).aspx

[*]http://msdn.microsoft.com/en-us/library/6kxy1a51(VS.85).aspx

[/list]

@JUICE690authorMay 21.2009 — #You did omit some important information there. JavaScript simply doesn't have access to file controls so that's stilll out of the question. If this will be running on Windows then I would impliment this as an HTML Application, using JScript and the file system object. [list]

[*]http://msdn.microsoft.com/en-us/library/ms536496(VS.85).aspx

[*]http://msdn.microsoft.com/en-us/library/6kxy1a51(VS.85).aspx

[/list][/QUOTE]

Yea, apologies for that I thought it would keep things simpler, I was wrong:o

Again thank you for your help but just to be that little more awkward the interactive's are both running on Macs via a program called Wkisok.

@CharlesMay 21.2009 — #The obvious easy answer is going to be to get a web server up and running and the do this in PHP. Short of that get PHP, Perl or some other scripting language to generate all of your HTML files and save them to disk. Everytime you make a change you'll have to rewrite all the HTML files but you'll just let the script run while you're getting another cup or something.

@JUICE690authorMay 21.2009 — #Thanks Charles, I've actually avoided using PHP this time around just because on previous projects it has been problematic (i'm not a PHP expert by any stretch of the imagination.).

I've used MAMP software in the past as a local server before and although it works there was the occasional program glitch. This wasn't to much of a problem because the clients were based a few miles away, on this occasion the client is 100+ miles from me so I don't fancy driving up there every time one of these problems occur.

Thanks again for your suggestions.

@Y_LessMay 22.2009 — #The important question was how accurate was your original example? Are the pages actually going to be called "page1.html", "page2.html" etc, or were those just generic example names? If the former (or some other predictable pattern) it's doable, as you can guess the name of the next page from the name of the current page (but can't check it exists). If the latter then it's not as Charles said.

@JUICE690authorMay 22.2009 — #Hey Y_Less, yes the pages can be named 1.html etc I don't have any seo concerns so it's all about making it simple as possible for me or/and them to make updates / add pages to the directories in the future.

@Y_LessMay 22.2009 — #In that case:

<i>
 </i>&lt;a href="#" id="previous_a"&gt;previous&lt;/a&gt;
 &lt;a href="#" id="next_a"&gt;next&lt;/a&gt;
 
 &lt;script type="text/javascript"&gt;
 var l = document.location.href.replace, r = /^(.*)/(w*).html$/;
 document.getElementById('next_a').href = l(r, function (f, s, t) { return s + '/' + (++t) + '.html'});
 document.getElementById('previous_a').href = l(r, function (f, s, t) { return s + '/' + (--t) + '.html'});
 &lt;/script&gt;

That will get the current number from the address (in the form "location/number.html"), increment or decrement that number, then add it to the next/previous links. As I said before this doesn't check if the page exists, you would need a server and XHR for that, or some clever hidden iframe coding.

@CharlesMay 22.2009 — #You're going to be running into problems when you get to the end of the line. Best to just set up a web server.

Also in #JavaScript _↴

IndexOf Troubles replacing/removing dropdown java code for enabling mobile camera

Success!

Help @JUICE690 spread the word by sharing this article on Twitter...

Tweet This

Load next page in a directory

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Load next page in a directory

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴