Reputation: 438
I have no clue about jquery or javascript I have modified this the best of my ability and what I am trying to accomplish is when you shrink or open the browser in full screen its like there is a delay on the content and height when shrinking or going full browser size I am trying to figure out how to remove that delay
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
navigation: true,
navigationPosition: 'right',
});
});
html {
text-rendering: optimizeLegibility;
height: 100%;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
background: #e6e6e6;
font-family: roboto, sans-serif;
font-weight: 400;
color: #777777;
line-height: 24px;
font-size: 16px;
}
html.fp-enabled,
.fp-enabled body {
margin: 0;
padding: 0;
overflow: hidden;
/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
/* Safari<=5 Android<=3 */
-moz-box-sizing: border-box;
/* <=28 */
box-sizing: border-box;
}
.fp-section.fp-table {
display: table;
table-layout: fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100vh;
}
.fp-scrollable {
overflow: hidden;
position: relative;
}
.fp-scroller {
overflow: hidden;
}
.iScrollIndicator {
border: 0 !important;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
#fp-nav {
position: fixed;
z-index: 100;
margin-top: -32px;
top: 50%;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
}
#fp-nav.right {
right: 17px;
}
#fp-nav ul {
margin: 0;
padding: 0;
}
#fp-nav ul li {
display: block;
width: 14px;
height: 13px;
margin: 7px;
position: relative;
}
#fp-nav ul li a {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
cursor: pointer;
text-decoration: none;
}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span {
height: 12px;
width: 12px;
margin: -6px 0 0 -6px;
border-radius: 100%;
}
#fp-nav ul li a span {
border-radius: 50%;
position: absolute;
z-index: 1;
height: 4px;
width: 4px;
border: 0;
background: #333;
left: 50%;
top: 50%;
margin: -2px 0 0 -2px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span {
width: 10px;
height: 10px;
margin: -5px 0px 0px -5px;
}
#fp-nav ul li .fp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
overflow: hidden;
display: block;
opacity: 0;
width: 0;
cursor: pointer;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-tableCell {
height: 100vh !important;
}
.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
height: 100vh !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<div id="fullpage">
<div class="section " id="section1">
<h1>Section 1</h1>
</div>
<div class="section" id="section2">
<h1>Section 2</h1>
</div>
<div class="section" id="section3">
<h1>Section 3</h1>
</div>
</div>
Upvotes: 1
Views: 372
Reputation: 41605
Be aware removing the delay means fullpabe.js will be making hundreds of operations per second when resizng, as the resize event gets fired hundreds of times. That's why the delay exists, so it won't consume machine resources like crazy for such a basic thing.
You can reduce the number, but I wouldn't encourage you to completely remove it.
Modify the fullPage.js version 2.9.7 line 2150 a change 350 for 50, for example:
resizeId = setTimeout(function(){
reBuild(true);
}, 350);
Change it to:
resizeId = setTimeout(function(){
reBuild(true);
}, 50);
Upvotes: 1
Reputation: 75
You may initialize the plugin method doneResizing();
in $(window).resize(function () {})
Upvotes: 0