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;
});
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