I have nearly a thousand HTML pages that form a book as a whole. I need a "Next" button/link on these pages which will load the next pages serially - so that the reader can navigate from one page to the next serially. The only way I know of doing this is to manually insert the links of every single page to the previous page with the label "Next". For a few pages it's okay - but for thousand pages??? I get a heart attack even thinking about it!
So I was thinking maybe this can be done by a little bit of Javascript / Jquery coding which may simplify and automate the process without requiring opening and closing a thousand pages and copying and pasting a thousand links. After that, I can simply insert the same code in one go to all the pages using Dreamweaver or any similar HTML editor. Problem is, I am not a programmer or coder and know almost nothing about Java, Borneo or any other scripts! So, can anybody help me on this?
All my HTML pages (filenames) are named serially like - page1.html, page2.html, page3.html... and so on. They are all in the same folder. I was thinking if it is possible to read the current page's name programmatically and only the number part of it replaced with the next number by adding 1 to it - without disturbing the rest of the filename - and then open the HTML file with that name onClick? Is this possible? Can anybody help me with a little bit of code?
Thanks in advance for taking the time to read this!
Here we cannot use "Next" button method,because we cannot open every book html and add "Next" button in (lots of work). To avoid to open the content html. We need to use .load() function here, to load book html content into a new HTML page.
Below code may help you on this: First create a html page in same directory and add a and a "Next". Assume the book content are in DIV with ID = "bookContent"
If start page is 1, then the code will be
var currentPage;
$(window).on('load', function () {
currentPage = 1;
var contentHtml = 'page' + currentPage + '.html #bookContent';
//load html book content from page1.html
$('#content').load(contentHtml);
});
//set next button
$('#next').onclick(function(){
currentPage++;
var contentHtml = 'page' + currentPage + '.html #bookContent';
//load next page
$('#content').load(contentHtml);
});