I am using fullpage.js for my website. About fullpage.js everything working fine. I want to open an div on click of pagniation. I am able to open div on click which contains YouTube video. But when div is visible browser scroll will be disabled I am not getting where I go wrong.
here is sample of my code:
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
css3:false,
navigation: true,
normalScrollElements: '.text',
navigationTooltips: ['tooltip1', 'tooltip2', 'tooltip3'],
onLeave: function(index, nextIndex, direction){
var prevIndex = index - 1;
var currentIndex = nextIndex - 1;
$('#section'+currentIndex).css('transform', 'scale(1.2)');
$('#section'+currentIndex).css('transition', 'all 5s ease-in');
setTimeout(function(){
$('#section'+prevIndex).css('transform', 'scale(1)');
$('#section'+prevIndex).css('transition', 'all 0.2s ease-in');
},500);
},
});
});
in jquery.fullpage.js
var li = '<li><a href="#' + link + '" onclick="displayDetails('+i+');"><span>' + tooltip + '</span></a>';
function :
function displayDetails(id)
{
$('#text').show();
}
HTML code:
<style>
#text {
position: absolute;
display:none;
z-index:999;
top: 300px;
width:100%;
height: auto;
}
</style>
<div id="text">
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/6iNFimn4wFA" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/jsd-mNTIukM" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/ylD-WFvRZkM" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/g2YzRTAstPo" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/98NqtVG-hFU" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/O4weBTRCFzU" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/UVzEOsHT7XA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="fullpage">
<div class="section" id="section0"></div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
This code opens div as expected but scrolling to see last contents is not working. Instead of video if I enter text scroll works perfectly. As soon as I add video in div scroll stops working. I haven't set overflow property for #text. Please help me out.
First of all, you should be using scrollOverflow:true rather than normalScrollElements.
scrollOverflow:
(default false) defines whether or not to create a scroll for the section in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor plugin jquery.slimscroll.min and it should be loaded before the fullPage.js plugin. For example:
Then, fullPage.js is calculatingn the height of your sections on page load. If the videos are not displayed on page load, fullPage.js won't know the content is changing until you tell it so.
Try this:
function displayDetails(id){
$('#text').show();
//forcing fullPage.js to recalculate dimensions.
$.fn.fullpage.reBuild();
}
More about the reBuild method in the docs:
reBuild()
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.