Cinzel February 2016

Fullpage.js: How to automatically add the name of the next or previous section

A question about the Fullpage plugin: http://alvarotrigo.com/fullPage/

I was wondering if I could automatically add the name of the next or previous section to a button, based on the current section where you are.

I couldn't find it here: http://alvarotrigo.com/fullPage/examples/callbacks.html

I already made an unhandy manual solution, but there might be a better automatic solution (a function or something like that) for which some more Javascript knowledge is needed than I have.

This is my (temporarily) solution, assuming that my section names are homepage, chairs, arm chairs and stools.

afterLoad: function(anchorLink, index){
                if(index == 1){
            $('#moveSectionUp').html('stools');
            $('#moveSectionDown').html('chairs');
                }
                if(index == 2){
            $('#moveSectionUp').html('homepage');
            $('#moveSectionDown').html('arm chairs');
                }

and so on...

Any ideas are welcome!

Answers


Alvaro February 2016

Use this:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    afterLoad: function(anchorLink, index) {
        var loadedSection = $(this);   
        var prev = loadedSection.prev();
        var next = loadedSection.next();

        var prevText = (prev.length) ? prev.attr('data-arrow-text') : '';

        var nextText = (next.length) ? next.attr('data-arrow-text') : '';

        console.log(nextText);

        $('#moveSectionUp').html(prevText);
        $('#moveSectionDown').html(nextText);
    }
});

And use the attribute data-arrow-text in each section to define the text you want to show for the arrow to move to that section:

<div class="section" data-arrow-text="Demo"></div>

Online demo


Cinzel February 2016

Regarding the comment that is placed directly under Alvaros solution:

Question = How to make Alvaros above solution work with continuous scrolling pages (using the plugin option continuousVertical)?

Answer = Very simple by slightly modifying the codes from Alvaros solution. Here's an explanation:

Replace the last '' at the end of the below lines with the section names of your last and first section respectively:

var prevText = (prev.length) ? prev.attr('data-arrow-text') : '';

var nextText = (next.length) ? next.attr('data-arrow-text') : '';

Assuming that in this case the name of the last section is 'Arm Chairs' and the name of the first section is 'Homepage', it becomes:

var prevText = (prev.length) ? prev.attr('data-arrow-text') : 'Arm chairs';

var nextText = (next.length) ? next.attr('data-arrow-text') : 'Homepage';

That's it!

However, it is also assumed that you literately do what Alvaro recommended above:

"And use the attribute data-arrow-text in each section"

Post Status

Asked in February 2016
Viewed 1,572 times
Voted 6
Answered 2 times

Search




Leave an answer