Search code examples
javascriptjqueryajaxfullpage.jsslimscroll

scroll not appear after ajax call fullpage.js


I'm using ajax with fullpage.js to get gallery images and apply isotope on it, after I click on the link to open gallery (go to target section) the scroll of the page does not appear and I can't scroll, but if I re-size the browser the scroll appears ..

/* HTML */

<div class="section" id="textscroll">
    <div class="s" data-anchor="stext">
        <div class="container">
            <div class="ajax_content"></div>
        </div>
    </div>
</div>

/* JS */

$('#fullpage').fullpage({
        anchors: ['home', 'about', 'gallery'],
        keyboardScrolling: false,
        autoScrolling: true,
        loopHorizontal: false,
        scrollOverflow: true,
        controlArrows: false
});

$('.gallery-link').on('click','a',function(){

      var url = "directory/gallery_ajax.php";
      var postid = $(this).attr('data-post');

      $('.loading').addClass('active');

          $.ajax({
             type : 'post',
             url  : url,
             data : {
                    action : 'user_clicked',
                    postid : postid
             },
             success : function( response ) {

                $('.ajax_content').html('<div class="content" id="gallery-container"><div class="isotope">'+response+'</div></div>');
                var $container = $('.isotope').isotope({
                       itemSelector: '.item',
                       masonry: {
                         columnWidth: 160,
                         isFitWidth: true
                           }
                    });
                    $container.imagesLoaded( function() {
                         $('.loading').removeClass('active');
                         $.fn.fullpage.moveTo(3,0);
                         $container.isotope( 'layout' );
                    });
             },
             error: function( message ){
                     console.log(message);
             }
          });
            return false;
});

Solution

  • After calling "$('.ajax_content').htm" inside your response function you need to initialise scroll plugin again, because you changed dom and plugin must be reinitialized to compute new page dimensions