0

I created a on click function to create a new section and place it under the previous section, then calls in content from another file and scrolls to it. I can get it working but the problem lies when I bring in the content the JS does not recognize the new section and does not adjust it with scrolloverFlow. Here is the code that I'm using to make this happen. I know I'm supposed to destroy and rebuild it but I can't get it to rebuild to adjust the new height in the newly created section. Any help would be great.

HTML:

<div id="fullpage">
  <div class="section" id="section0">Sec0</div>
  <div class="section" id="section1">Sec1
    <ul>
      <li><span id="addSection">Add Section</span></li>  
    </ul>
  </div>
  <div class="section"></div>
</div>

JS:

$(document).ready(function(){
  function fullPageInit() {
    $('#fullpage').fullpage({
      navigation: true,
      navigationPosition: 'right',
      scrollOverflow: true,
    });
  };

  fullPageInit();

  $(document).on('click', '#addSection', function(){

    if($('#section2').length) {
      $('#section2').remove();
    }

    $('#section1').after('<div class="section" id="section2">New Content goes here</div>');
    $('#section2').load('content.php);

    $.fn.fullpage.reBuild();

    var activeSec = $('.fp-section.active').index();

    $.fn.fullpage.destroy('all');

    $('.section').eq(activeSec).addClass('active');

    $('#section2').fadeIn('fast', function(){
        setTimeout(function(){
            fullPageInit();
            $.fn.fullpage.moveSectionDown();
        }, 0);
    });

  });

});
lbwebk
  • 3
  • 3
  • 1
    Does http://stackoverflow.com/questions/36626527/adding-or-removing-sections-slides-to-fullpage-js-after-initialization help? – Booboobeaker Jan 31 '17 at 01:02
  • Thanks for commenting, that's what helped me get started. But I cant seem to figure out how to get the scrollOverflow working on the new section being created. – lbwebk Jan 31 '17 at 01:36

1 Answers1

0

Thanks for commenting, that's what helped me get started. But I cant seem to figure out how to get the scrollOverflow working on the new section being created.

Use the reBuild function for it just after adding the section.

$.fn.fullpage.reBuild();

As detailed in the docs:

Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.

Updated

You probably need to use the fullPageInitafter the fadeIn took takes place.

$('#section2').fadeIn("normal", function() {
     fullPageInit();
     $.fn.fullpage.moveSectionDown();

});
Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Thanks for responding Alvaro (your plugin is great). Yeah thats what I thought I had to do which i've done but it still does not rebuild it. When I inspect the code the JS is not wrapping the content that being pulled into the created section. Which is the issue i'm trying to figure out. – lbwebk Jan 31 '17 at 17:10
  • You probably need to use the `fullPageInit`after the fadeIn took takes place. Add it in its callback. More info about fadeIn callback on [the jquery docs.](http://api.jquery.com/fadein/) – Alvaro Feb 01 '17 at 11:23
  • Perfect this did the trick. Added a timeout and works. I'll update my first post. Because its being destroyed and rebuilt theres a flicker, anyway to avoid/fix that? – lbwebk Feb 01 '17 at 20:48
  • There's no flicker in the solution [I provided here](http://stackoverflow.com/questions/36626527/adding-or-removing-sections-slides-to-fullpage-js-after-initialization). – Alvaro Feb 02 '17 at 11:36