PREV/NEXT Buttons

Comments

4 comments

  • Avatar
    Brock Price (Brock Price)

    Amit Kapoor

    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).

    1
    Comment actions Permalink
  • Avatar
    Amit Kapoor

    Thanks! Would you please share what is the difference between your implementation and one that comes in the default Scroll WebHelp theme?

    0
    Comment actions Permalink
  • Avatar
    Amit Kapoor

    Nice! Thanks. I am creating a new theme and will be done in another 3-4 weeks. I am going to try your code. I am hoping I will like it better than the default one.

     

    Thank you Brock!

    0
    Comment actions Permalink
  • Avatar
    Brock Price (Brock Price)

    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'>&nbsp; &lt; PREV &nbsp;</button>&nbsp;&nbsp;&nbsp;<button id='nextButton' class='prevNext'>&nbsp; NEXT &gt; &nbsp;</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);

    0
    Comment actions Permalink

Please sign in to leave a comment.

Powered by Zendesk