What are the best practices for utilizing the onLeave() function in fullpage.js?

Question

What are the best practices for utilizing the onLeave() function in fullpage.js?

My goal is to make the user scroll through 4 sections. Upon reaching the fourth section, if the user scrolls down again, instead of going to the fifth section, the view should loop back to the first section. (The fifth section only contains the imprint and can be accessed separately.)

This is the code I am using:

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        if(nextIndex == 5){
            $.fn.fullpage.moveTo(1);
        }
    }
});

This script is placed within the fourth section, but moving it around does not produce any changes.

The current situation is:

It is impossible to access the fifth section.
Even though scrolling to other sections is possible, they are not reachable via their anchors.

I am confused about what I might be doing wrong. Any feedback would be appreciated.

jquery html css fullpage.js

Answer 1

Answer №1

Update for 2019:

This particular issue has been addressed in fullPage.js version 3, which can be found at: https://github.com/alvarotrigo/fullPage.js

Prior response:

The solution to this matter was discussed in the fullpage.js GitHub issues forum

Here is a snippet from the discussion:

I understand your concern now, however, the functionality changed since version 2.7.9.

For the time being, here's a workaround:

http://jsfiddle.net/97tbk/1292/

//IE < 10 pollify for requestAnimationFrame
window.requestAnimFrame = function(){
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback){ callback() }
}();


$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(index, nextIndex, direction) {
        var leavingSection = $(this);
        requestAnimFrame(function(){
            if (index == 2 && direction == 'down') {   
                $.fn.fullpage.moveTo(4);
            }
        });
    }
});

Answer 2

Update for 2019:

This particular issue has been addressed in fullPage.js version 3, which can be found at: https://github.com/alvarotrigo/fullPage.js

Prior response:

The solution to this matter was discussed in the fullpage.js GitHub issues forum

Here is a snippet from the discussion:

I understand your concern now, however, the functionality changed since version 2.7.9.

For the time being, here's a workaround:

http://jsfiddle.net/97tbk/1292/

//IE < 10 pollify for requestAnimationFrame
window.requestAnimFrame = function(){
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback){ callback() }
}();


$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(index, nextIndex, direction) {
        var leavingSection = $(this);
        requestAnimFrame(function(){
            if (index == 2 && direction == 'down') {   
                $.fn.fullpage.moveTo(4);
            }
        });
    }
});

Answer 3

Answer №2

Keep going in the right direction, just remember to include a return false; statement after using the moveTo command. This will stop the scroll action and allow the moveTo function to work properly.

$('#fullpage').fullpage({
  anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6', 'blue', 'green'],
  onLeave: function(index, nextIndex, direction) {
    $('#ind').text("nextIndex = " + nextIndex);
    if (nextIndex > 4 && direction === 'down') {
      $.fn.fullpage.moveTo('page1');
      return false;
    }
  }
});

//button action
$(document).on('click', '#moveTo', function() {
  $.fn.fullpage.moveTo(2, 1);

});

.section {
  text-align: center;
  font-size: 3em;
}
/**
Fixed button outside the fullpage.js wrapper
*/

#moveTo {
  top: 20px;
  left: 20px;
  position: fixed;
  z-index: 999;
  background: #09f;
  font-size: 1em;
  cursor: pointer;
}
#ind {
  top: 40px;
  left: 20px;
  position: fixed;
  z-index: 999;
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>

<div id="moveTo">Move to page2 slide 2</div>
<div id="ind"></div>

<div id="fullpage">
  <div class="section">One</div>
  <div class="section">
    <div class="slide" data-anchor="slide1">Two 1</div>
    <div class="slide" data-anchor="slide2">Two 2</div>
  </div>
  <div class="section">Three</div>
  <div class="section">Four</div>
  <div class="section">Five</div>
  <div class="section">Six</div>
</div>

Answer 4

Keep going in the right direction, just remember to include a return false; statement after using the moveTo command. This will stop the scroll action and allow the moveTo function to work properly.

$('#fullpage').fullpage({
  anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6', 'blue', 'green'],
  onLeave: function(index, nextIndex, direction) {
    $('#ind').text("nextIndex = " + nextIndex);
    if (nextIndex > 4 && direction === 'down') {
      $.fn.fullpage.moveTo('page1');
      return false;
    }
  }
});

//button action
$(document).on('click', '#moveTo', function() {
  $.fn.fullpage.moveTo(2, 1);

});

.section {
  text-align: center;
  font-size: 3em;
}
/**
Fixed button outside the fullpage.js wrapper
*/

#moveTo {
  top: 20px;
  left: 20px;
  position: fixed;
  z-index: 999;
  background: #09f;
  font-size: 1em;
  cursor: pointer;
}
#ind {
  top: 40px;
  left: 20px;
  position: fixed;
  z-index: 999;
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>

<div id="moveTo">Move to page2 slide 2</div>
<div id="ind"></div>

<div id="fullpage">
  <div class="section">One</div>
  <div class="section">
    <div class="slide" data-anchor="slide1">Two 1</div>
    <div class="slide" data-anchor="slide2">Two 2</div>
  </div>
  <div class="section">Three</div>
  <div class="section">Four</div>
  <div class="section">Five</div>
  <div class="section">Six</div>
</div>

What are the best practices for utilizing the onLeave() function in fullpage.js?

Answer №1

Update for 2019:

Prior response:

Answer №2

Similar questions

Class does not have the capability to deserialize an array

Implementing jQuery getScript in a Ruby on Rails 3 application

Displaying a div when hovering over it, and keeping it visible until clicked

Steps for inserting a clickable phone number link within innerHTML1. First, create an

Tips for customizing the color of the select drop down arrow component:

What is the best way to store images in a directory using JavaScript and ASP.NET?

Numerous hyperlinks leading to different products within the same image

Change a portion of the CSS background-image URL using vanilla JavaScript for a set of pictures

Modifying the HTML Structure in Yii's CListView

Preventing automatic recompilation in Angular when there are changes in the assets folder

how to adjust the width of table columns dynamically using ng-repeat and AngularJS

Generate a new object from the contents of a div

Use CSS properties to isolate and extract the logo from the Sprite image

Having trouble locating the source of the issue causing the product page to appear too wide on Shopify

Modifying the CSS of the parent element using jQuery UI Draggable

Is there a way to adapt my existing navigation bar to collapse on smaller devices?

Having difficulty locating the identification number of an item within the HTML coding

Finding the Closest Element with jQuery's .closest() Method

Adding a Django URL to a personalized email design

The size of the search input and textarea in HTML decreases when viewed on an iPad device