I'm quite new to CSS (and unfortunately ignorant of JS) and would like to know if this is possible:
I would like to code script for CSS (or JS/jQuery if someone could help me with it) for the following situation: I have a website where there is a top-level archive page (a table of contents) with links to individual archive pages, and the actual archive pages are in a folder below that on the server. On the individual archive pages, I would like to be able to load a script (currently I'm using an iframe to load a second nav page into the text page) with the navbar for the archives in it, which consists of prev, TOC, and next button images. Here's where it's a bit tricky: I want the pagination to update the prev/next buttons depending on the current filename of the page (it ends in a number, for example (filename) 1001-1014, but then skips to a second set of numbers at the end of the current "chapter," for example (filename) 2001-2022 etc.), so that it always sends the user to the file previous/next in the row, and so that when the user reaches the beginning of the set, the prev button disappears, and when it reaches the end of all sets, the next button disappears.
Ideally, the coding would be able to find how many pages were in the archive folder itself (and how many were in the (filename) 1001 set, how many in the (filename) 2001 set, etc.), and paginate accordingly, but it would also be fine to have to update the min/max number of pages manually somewhere if that isn't possible.
So... IS it possible to do this with CSS? If not, can someone help me with the javascript (assuming it's even possible with that)? I looked through the answers on this website and found this (https://github.com/gbirke/jquery_pagination), but I'm afraid it might as well be in a foreign language to me. Which I suppose it is.
I do have a friend more versed in CSS/JS who helped me with the following code, but it seems not to work properly if you don't go directly from the ToC to page 1001, and page up from there. He says my plan isn't possible without knowing more JS, at the very least, and possibly not at all, due to some restriction about not being able to number the pages in the archive folder. (The archive ToC is in the same uppermost folder as the index.html page.)
script:
let maxpages = 1014;
if (sessionStorage.getItem("archivenum") < 1001)
{
sessionStorage.setItem("archivenum", 1001);
}
function navUp() {
window.open('../CC weblog.html', '_parent');
}
function navPrev() {
let archivenext = sessionStorage.getItem("archivenum");
if (archivenext > 1001) {
archivenext--;
butVis();
sessionStorage.setItem("archivenum", archivenext);
}
var prevfile = "../CC logs/CC log " + archivenext + ".html";
window.open(prevfile, "_parent");
}
function navNext() {
let archivenext = sessionStorage.getItem("archivenum");
if (archivenext < maxpages) {
archivenext++;
butVis();
sessionStorage.setItem("archivenum", archivenext);
}
var nextfile = "../CC logs/CC log " + archivenext + ".html";
window.open(nextfile, "_parent");
}
function butVis() {
let archivenext = sessionStorage.getItem("archivenum");
if (archivenext == 1001) {
butPrev.setAttribute('style', 'Visibility: hidden');
}
else {
butPrev.setAttribute('style', 'Visibility: visible');
}
if (archivenext == maxpages) {
butNext.setAttribute('style', 'Visibility: hidden');
}
else {
butNext.setAttribute('style', 'Visibility: visible');
}
}
window.onload = function() {
butVis();
}
script on each HTML page:
document.addEventListener('DOMContentLoaded', ()=>{
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('id', "show-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
});
script on the archive navbar page:
<div class="nav">
<div class="nav flex">
<img class="nav" src="../CC images/buts/but-back.png" alt="prev" onclick="navPrev()" name="butPrev">
<img class="navArch" src="../CC images/buts/but-up.png" alt="TOC" onclick="navUp(); sessionStorage.clear()">
<img class="nav" src="../CC images/buts/but-for.png" alt="next" onclick="navNext()" name="butNext">
</div>
</div>
Any help is MUCH appreciated!
Finally figured this one out, with some help from a friend. He changed the js and explained how to achieve this (thanks, SH!).
This works for my needs:
let currentPageIndex = 0;
// Get the module name (i.e., "name-of-game" from folder name like "name-of-game xxxCSS")
function getModuleName() {
const pathParts = window.location.pathname.split('/');
const folderName = pathParts[pathParts.length - 2]; // Get the folder name (second to last part)
const moduleName = folderName.split(' ')[0]; // Get the first part before the space
return moduleName;
}
// Get dynamic $moduleName (folder name)
const moduleName = getModuleName();
// Define the navigation order for pages with dynamic module name
const pages = [
`${moduleName} index.html`,
`${moduleName} setting.html`,
`${moduleName} cast.html`,
`${moduleName} rules.html`,
`${moduleName} weblog.html`
];
window.onload = function () {
// Get current page name from URL
const currentPath = window.location.pathname;
const currentPage = decodeURI(
currentPath.substring(currentPath.lastIndexOf("/") + 1)
);
// DOM Elements for navigation buttons
const buttonPrevious = document.getElementById("navigatePrevious");
if (buttonPrevious) {
buttonPrevious.onclick = navPrev;
}
const buttonNext = document.getElementById("navigateNext");
if (buttonNext) {
buttonNext.onclick = navNext;
}
// Helper to find the index of the current page in the navigation order
currentPageIndex = pages.indexOf(currentPage);
// Attach the "Up" navigation to a button (if it exists)
const buttonUp = document.getElementById("navigateUp");
if (buttonUp) {
buttonUp.onclick = navUp;
}
// Initialize navigation buttons
updateButtons();
};
// Update button states and navigation links
function updateButtons() {
// Disable left nav if on the first page
const buttonPrevious = document.getElementById("navigatePrevious");
if (buttonPrevious) {
buttonPrevious.disabled = currentPageIndex <= 0;
if (currentPageIndex > 0) {
buttonPrevious.onclick = () => {
window.location.href = pages[currentPageIndex - 1];
};
}
}
// Disable right nav if on the last page
const buttonNext = document.getElementById("navigateNext");
if (buttonNext) {
buttonNext.disabled = currentPageIndex >= pages.length - 1;
if (currentPageIndex < pages.length - 1) {
buttonNext.onclick = () => {
window.location.href = pages[currentPageIndex + 1];
};
}
}
}
// Function for "Up" navigation
function navUp() {
window.location.href = `../${moduleName} weblog.html`; // Always go to the top-level Archive page
}
// Function to navigate to the previous page
function navPrev() {
if (currentPageIndex > 0) {
window.location.href = pages[currentPageIndex - 1];
}
}
// Function to navigate to the next page
function navNext() {
if (currentPageIndex < pages.length - 1) {
window.location.href = pages[currentPageIndex + 1];
} else {
// Handle case when on the last page, if needed
}
}