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

My Jquery code seems to break after the second form submission. Could it be related to Django, Ajax, or Jquery?

"Enhancing HTML table rows using jQuery for a dynamic user experience

error being triggered due to relative positioning

"Select2 dropdown search bar vanishing act: The hunt for results comes up empty

The navigation bar overlays the background images

Explore a different page containing interactive ajax components

Step-by-step Guide on Making a Dropdown List with Options Featuring Background Images and Text

Error encountered while making an Ajax request in Rails due to MultiJson decoding issue

Tips for improving the styling of a django form with mixed elements

Easily transferring the entire form using jQuery

Using Jquery to dynamically add an active class to a link if it matches the current URL

Html content overlapping div rather than being stacked vertically

The inner div's CSS margin-top is causing the parent div to be pushed downwards

How can I implement a Dynamic Input field using Angular?

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

Converting an HTML table into an Excel spreadsheet

Unlock the secrets of creating a pop-up with qtip

What is the best way to eliminate the underline in a text hyperlink?

Using jQuery with multiple selectors can become tricky when dealing with elements that may or may not be present

Innovative Audio Editing Tool using Javascript