PREV/NEXT Buttons
I thought I might provide some help to anyone looking for PREV/NEXT buttons. Here is the code I use.
//The below code is pausing twice. First it waits for the window to load and then it waits a second after that. So far, this has allowed the code to work everytime, as not finding the active LI element in the TOC was an issue.
$(window).load(function(){
setTimeout(function(){
//First get the active TOC line
var $the_active_line = $('li.is-active');
//Add a variable for the previous line
var $the_prev_line = $('li.is-active').prev();
//Add a variable for the next line
var $the_next_line = $('li.is-active').next();
var $the_next_child = $('li.is-active ul li:first-child');
//Check if the previous sibling has a button (arrow) - if there is no arrow, it will be undefined
//var $arrowArrow = ($the_prev_line).find('button');
//NOTE that the STATE of the arrow doesn't matter. If there is one, we need to find the last 'li' descendant
//Here we'll use buttons instead of links for PREV-NEXT so that the JQuery can run when PREV-NEXT is clicked.
$("#content").before("<button id='prevButton' class='prevNext'> < PREV </button> <button id='nextButton' class='prevNext'> NEXT > </button>");
//THIS NEXT CODE RUNS WHEN THE PREV BUTTON IS CLICKED (from https://stackoverflow.com/questions/23812372/jquery-click-wont-console-log-or-alert)
$('#prevButton').click (function() {
var $allTheLines = ($the_prev_line).find('li');
//The $allTheLines variable will be empty if the arrow for the previous TOC item isn't expanded or doesn't exist
//Grab the href of the last li
var $lastLiHREF = $allTheLines.last().children('a').attr('href');
//If there is a previous line (child) href, we go to it. If there isn't, we go to the href of the previous sibling. If there's no previous sibling, we go to the parent.
if ($lastLiHREF != null) {
window.location.href = $lastLiHREF;
} else if ($the_prev_line.children('a').attr('href') != null) {
window.location.href = $the_prev_line.children('a').attr('href');
} else {
window.location.href = $('li.is-active').parent().closest('li').children('a').attr('href');
}
});
//THIS NEXT CODE RUNS WHEN THE NEXT BUTTON IS CLICKED -Either grabs the next sibling or next child href. OR grabs the next parent.
$('#nextButton').click (function() {
//Go to the next child, if there is one. If no child, go to the next sibling.
if ($the_next_child.length > 0) {
window.location.href = $the_next_child.children('a').attr('href');
} else if ($the_next_line.length > 0) {
window.location.href = $the_next_line.children('a').attr('href');
} else {
// Found at https://stackoverflow.com/questions/1827482/jquery-find-next-prev-elements-of-a-certain-class-but-not-necessarily-siblings
var $setter = $( 'li' );
var $setter2 = $setter.eq( $setter.index( $the_active_line, ) + 1 );
window.location.href = $setter2.children('a').attr('href');
}
});
// NOTE: This hides the PREV/NEXT buttons on the Site FAQ
if (document.location.href.indexOf('/site-faq' || '/copyright-statement') > -1) {
//Using the famous 'OR' operator here.
// indexOf will return the position of the first occurence of this string in the url
// or -1 it it's not there.
$('#prevButton, #nextButton').hide();
}
// NOTE: This hides the PREV button on the first page
if (document.location.href.indexOf('/products') > -1) {
// indexOf will return the position of the first occurence of this string in the url
// or -1 it it's not there.
$('#prevButton').hide();
}
}, 1000);
});
And here is the CSS:
/* This styles the PREV and NEXT buttons on pages */
.prevNext {
background-color: LIGHTGRAY;
border: none;
border-radius: 12px;
color: black;
padding: 3px 3px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 2px;
margin-bottom:20px; /* This creates some white space below the buttons. */
cursor: pointer;
transition-duration: 0.4s; /* This determines the speed of the HOVER effect. */
z-index: 49; /* This solves buttons being covered by elements below them, making them unclickable. */
}
.prevNext:hover {
background-color: DIMGRAY;
color: white;
}
.top-bar {
z-index: 50; /* Without this, the PREV/NEXT buttons will float over the Scroll Viewport top header bar */
}
-
Maybe someone with more experience with the WebHelp theme can chime in. Perhaps the biggest difference is that my approach is a hack, using JS to target specific TOC elements. I'm not sure if it's a long-term solution, but it's working now. It also uses buttons, as opposed to links. I switched over to the WebHelp theme for a quick look-see, and I saw prev/next links (drawing in page titles) at the bottom of the page (but I bet that's configurable).
-
Just an update to the code. I had some time to learn about setInterval versus setTimeout. This code should be more reliable and more responsive. If anyone has experience with JQuery Promise, the code might be further optimized. Respond back if you revise to optimize. Thanks, guys.
// NOTE: This code creates PREV/NEXT buttons.
//To elminate setTimeout, use setInterval to check if DOM element exists: https://abtasty.zendesk.com/hc/en-us/articles/200517763-Modify-elements-of-your-site-which-load-asynchronously-e-g-AJAX-
//Was using: "$(window).on('load', function () {" and "setTimeout(function(){"//This code doesn't change. It's a simple function to check if element exists.
function applyWhenElementExists(selector, myFunction, intervalTime) {
var interval = setInterval(function () {
if (jQuery(selector).length > 0) {
myFunction();
clearInterval(interval);
}
}, intervalTime);
}//This is the actual code, changed to check if the active line exists in the TOC.
applyWhenElementExists("li.is-active", function () {//First get the active TOC line
var $the_active_line = $('li.is-active');
//Add a variable for the previous line
var $the_prev_line = $('li.is-active').prev();
//Add a variable for the next line
var $the_next_line = $('li.is-active').next();
var $the_next_child = $('li.is-active ul li:first-child');
console.log($the_next_child);//Here we'll use buttons instead of links for PREV-NEXT so that the JQuery can run when PREV-NEXT is clicked.
$("#content").before("<button id='prevButton' class='prevNext'> < PREV </button> <button id='nextButton' class='prevNext'> NEXT > </button>");//THIS NEXT CODE RUNS WHEN THE PREV BUTTON IS CLICKED (from https://stackoverflow.com/questions/23812372/jquery-click-wont-console-log-or-alert)
$('#prevButton').click(function () {
var $allTheLines = ($the_prev_line).find('li');
//The $allTheLines variable will be empty if the arrow for the previous TOC item isn't expanded or doesn't exist
//Grab the href of the last li
var $lastLiHREF = $allTheLines.last().children('a').attr('href');
//If there is a previous line (child) href, we go to it. If there isn't, we go to the href of the previous sibling. If there's no previous sibling, we go to the parent.
if ($lastLiHREF != null) {
window.location.href = $lastLiHREF;
} else if ($the_prev_line.children('a').attr('href') != null) {
window.location.href = $the_prev_line.children('a').attr('href');
} else {
window.location.href = $('li.is-active').parent().closest('li').children('a').attr('href');
}
});//THIS NEXT CODE RUNS WHEN THE NEXT BUTTON IS CLICKED -Either grabs the next sibling or next child href. OR grabs the next parent.
$('#nextButton').click(function () {
//Go to the next child, if there is one. If no child, go to the next sibling.
if ($the_next_child.length > 0) {
window.location.href = $the_next_child.children('a').attr('href');
} else if ($the_next_line.length > 0) {
window.location.href = $the_next_line.children('a').attr('href');
} else {
// Found at https://stackoverflow.com/questions/1827482/jquery-find-next-prev-elements-of-a-certain-class-but-not-necessarily-siblings
var $setter = $('li');
var $setter2 = $setter.eq($setter.index($the_active_line, ) + 1);
window.location.href = $setter2.children('a').attr('href');
}
});// NOTE: This hides the PREV/NEXT buttons on the Site FAQ
if (document.location.href.indexOf('/site-faq' || '/copyright-statement') > -1) {
//Using the famous 'OR' operator here.
// indexOf will return the position of the first occurence of this string in the url
// or -1 it it's not there.
$('#prevButton, #nextButton').hide();
}// NOTE: This hides the PREV button on the first page
if (document.location.href.indexOf('/pci-products') > -1) {
// indexOf will return the position of the first occurence of this string in the url
// or -1 it it's not there.
$('#prevButton').hide();
}// NOTE: This hides the PREV/NEXT buttons if the calendar is present
if ($('#calendar').length) { // returns true if element is present
// show or hide another element
$('.prevNext').hide();
}
}, 50);
Please sign in to leave a comment.
Comments
4 comments