Develop Reference

fullpage.js silentMoveTo doesn't seem to work?

I'm creating a fullpage.js site where I need to have the slides scroll in to view on a particular slide. Like this:
1
X2X
3
4
Where X2X is 3 slides, I want to land on the 2nd one so user can go left or right.
I am using OnLeave to call silentMoveTo but whatever I do doesn't seem to take effect:
onLeave: function(origin, destination, direction) {
var params = {
origin: origin,
destination: destination,
direction: direction
};
//after leaving first section
console.log("leaving...");
if (origin.index == 0 && direction == "down") {
// moves the slides to the 2nd slide
console.log("fire after 1?");
fullpage_api.silentMoveTo(1, 1);
}
}
But silentMoveTo doesn't work. Here's a CodePen https://codepen.io/thetwopct/pen/bZwyRw
Any tips to what I am doing wrong?

Didn't need to do this via OnLeave/silentMoveTo, just add active class to the slide I wanted to show.
As per https://github.com/alvarotrigo/fullPage.js/issues/522

How can I animate a div to the right when it is pressed, and then, when it is pressed again, return it back to its first position with jQuery?

I have multiple clickable panels made with Bootstrap class panel, organized in this way:
Image of my website naoh
For example, when I click on the first panel, some other panels appear and cool stuff happens.
When you click a panel.
But I want that the panel that I clicked to be at the center. And then, when that same panel is clicked, I want to return everything to normal (which right now works with the specific panels per panel), including the main panel, so it should move to the left. The panels at the center doesn't require animation, and the right ones should animate to the left and back to the right.
Here is my jQuery code for the panels, lets say panel 2:
//Panel 2
if ($("#panel_2").data("clicked")) {
$(".navegadores").toggle(function () { });
} else {
$(".navegadores").hide();
}
$("#panel_2").click(function () {
$("#panel_2").data('clicked', true);
$(".navegadores").toggle(function () { });
console.log($("#panel_2").data("clicked"));
});
I feel I would need to use the .toggle method somehow, or the .slideToggle, but I'm quite confused atm.

Something like this should get you started:
$('#panel2').click(function(){
if ( $(this).data('clickstate') == 0 ){
$(this).animate({
marginLeft: '200px'
},1000, function(){
$(this).data('clickstate', '1');
});
}else{
$(this).animate({
marginLeft: '0'
},1000, function(){
$(this).data('clickstate', '0');
});
}
});
#panel2{position:relative;height:100px;width:100px;background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel2" data-clickstate="0"></div>

fullpage.js add slider fadeIn effect

I never worked with fullpage.js. I tried a lot with the slider transition effect. scrolling is fine with slider effect. its move to left to right with scrolling but can't add the fadeIn and fadeOut effect.
Sample site : http://www.mi.com/shouhuan/#clock
My Code : http://jewel-mahmud.com/demo-site/index.html
var slideIndex = 1,
sliding = false;
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
scrollingSpeed:1000,
css3: true,
onLeave: function(index, nextIndex, direction) {
if(index == 2 && !sliding) {
if(direction == 'down' && slideIndex < 3) {
sliding = true;
$.fn.fullpage.moveSlideRight();
slideIndex++;
return false;
} else if(direction == 'up' && slideIndex > 1) {
sliding = true;
$.fn.fullpage.moveSlideLeft();
slideIndex--;
return false;
}
} else if(sliding) {
return false;
}
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
sliding = false;
}
});
});

These pages talk about adding the fade effect:
Using fade-in effect with fullpage.js slides
How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery
It appears to be mainly a matter using the fullpage.js slide events to trigger jQuery animations.
This jsfiddle seems to do what you want (using sections).
It looks like there's two ways to do this kind of thing and it depends on what you're trying to animate. fullpage.js has two kinds of views built into it, .section and .slide, with slides being children of sections, and they have different callbacks. The examples use slides but you're using sections so I think that's where the confusion is coming in. Converting to a fade effect requires hooking into the right callbacks and applying the correct animations (which are different between sections and slides).

I am using something easy and more efficient to me.
onLeave: function(index, nextIndex, direction) {
if( index == 2 && direction == 'down'){
$('#slide1').fadeOut(700);
$('#slide2').fadeIn(700);
}
if( index == 3 && direction == 'down'){
$('#slide2').fadeOut(700);
$('#slide3').fadeIn(700);
}
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
sliding = false;
},
but the problem is the I cannot fixed the scroll when its sliding.
I tried sir. But I cannot make it adjustment.

Taken from this answer.
Although far from perfect as the defined scrolling speed in fullpage.js won't take effect in here and you have to definen it in the CSS.
Also, it will only work for sections and not horizontal slides.
Just add the following CSS to override the fullpage.js styles.
.section {
text-align: center;
}
.fullpage-wrapper {
width: 100%!important;
transform: none!important;
}
.fp-section {
width: 100%!important;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
opacity: 0;
z-index: 0;
transition: all .7s ease-in-out;
}
.fp-section.active {
visibility: visible;
opacity: 1;
z-index: 1;
}
Update
It is now possible to do it through a fullpage.js extension.

Full page slider with native scrollbar

I am building a full page slider that keeps the native scrollbar and allows the user to either free scroll, use the mouse wheel or navigation dots (on the left) to switch to a slide.
Once the user is on the last slide and tries to scroll down further, the whole slider moves up to reveal a simple scrollable section. If the user scrolls down and then tries to go back up, then this new section moves out of the way again and returns the slider back into view.
Fiddle: http://jsfiddle.net/3odc8zmx/
The parts I'm struggling with:
Only the first two navigation dots work. The third one DOES WORK if you area looking at the first slide. But doesn't do anything, if you are on slide 2. Note: the purple one is a short-cut to the second section of the page and not related to the slider.
When moving to the last slide (via the dots, if you're on the first slide) it causes the code to make the whole slider move upwards as it sees this as the user has slid past the last slide as per the description above. I have tried to combat this using a variable called listen to stop the scroll event listening when using the showSlide method... but it seems to be true even though I set it to false, and only reset it to true again after the animation...
When scrolling down using the mouse wheel, I can get to the second section and back up, but not to the first third section. I'm wondering if I could use the showSlide method to better handle this instead of the current dirty next and prev functions I have implemented.
Note: If the user has free-scrolled, when they use the mouse-wheel, I want the slider to snap to the nearest slide to correct itself... Any suggestions for how I could do this?
Can anyone offer some help?
Here's the JS:
var listen = true;
function nextSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: $('#section1').scrollTop() + $(window).height()
});
}
function prevSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: -$('#section1').scrollTop() + $(window).height()
});
}
function showSlide(index)
{
var offset = $('#section1 div').eq(index).offset();
offset = offset.top;
if(offset){
listen = false;
$('.slide-dot').removeClass('active');
$('.slide-dot').eq(index).addClass('active');
$('#section1').stop(true,false).animate({
scrollTop: offset
}, 500, function(){
listen = true;
});
} else {
alert('error');
}
}
$(document).ready(function(){
var fullHeight = 0;
$('#section1 div').each(function(){
fullHeight = fullHeight + $(this).height();
});
var lastScrollTop1 = 0;
$('#section1').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
if( $('#section1').scrollTop() + $(window).height() == fullHeight) {
if(listen){
$('body').addClass('shifted');
}
}
}
lastScrollTop1 = st;
});
$('#section1').on('mousewheel', function(e){
e.preventDefault();
var st = $(this).scrollTop();
if (st > lastScrollTop1){
nextSlide();
} else {
prevSlide();
}
});
var lastScrollTop2 = 0;
$('#section2').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
} else {
if( st == 0 ){
$('body').removeClass('shifted');
}
}
lastScrollTop1 = st;
});
$('.slide-dots').css({'margin-top':-$('.slide-dots').height() / 2});
$('.slide-dot').first().addClass('active');
$(document).on('click', '.slide-dot', function(e){
e.preventDefault();
showSlide( $(this).index() );
});
$(document).on('click', '.slide-dot-fake', function(e){
e.preventDefault();
$('body').addClass('shifted');
});
});
And for those wondering why I'm not using something like fullPage.js, it's because it can't handle the way I want to transition between the two areas and have two scrollbars (one for each area).

You can use:
e.originalEvent.wheelDelta
instead of:
st > lastScrollTop1
in the mousewheel event for your third problem to check if the user has scrolled up or down. And also change the +/- in prevSlide. I used dm4web's fiddle for your first problem. And I used:
scrollTop: offset - 1
instead of:
scrollTop: offset
for your second problem, because when the scroll reaches to the last pixel of the third element, it automatically goes to the next section, so 1 pixel is enough for it not to.
Here's the fiddle: http://jsfiddle.net/3odc8zmx/3/

As suggested by #chdltest, you could do it by using fullPage.js.
Here's an example. Go to the last section.
Code used for the example:
Javascript
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
scrollOverflow: true,
scrollBar: true,
afterLoad: function (anchor, index) {
//hiding the main scroll bar
if (index == 4) {
$('body, html').css('overflow', 'hidden');
}
//showing the main scroll bar
if (index == 3) {
$('body, html').css('overflow', 'visible');
}
}
});
CSS (in case you prefer to use the normal style for it)
/* Normal style scroll bar
* --------------------------------------- */
.slimScrollBar {
display: none !important;
}
.fp-scrollable {
overflow: auto !important;
}
Advantages of using fullPage.js instead to your own code:
Strongly tested in different devices and browsers. (IE, Opera, Safari, Chrome, Firefox..)
Prevent problems with trackpads, Apple laptops trackpads or Apple Magic Mouse.
Old browser's compatibility, such as IE 8, Opera 12...
Touch devices compatibility (IE Windows Phone, Android, Apple iOS, touch desktops...)
It provides many other useful options and callbacks.

Re-animating in slide when navigated to: JavaScript

I have a one page website which makes use of full-screen slides(powered by fullPage.js).
I have this script running to animate some text when the page first loads (the first page is the one with animation)
Im fairly new to JS so I was wondering how I would make it perform the animation every-time the user navigates to the slide?
JS:
$(document).ready(function() {
$.fn.fullpage({
slidesColor: ['#161616', '#161616'],
anchors: ['', 'Bye']});
$(".test").each(function(i) {
$(this).delay(i*600).animate({ opacity: 1 }, 700)
});
});
</script>
It just animates three spans.
I'd like it to animate them again when I navigate back to the slide. Also how do I get it to set the opacity = 0 when navigated to another slide?(so that it can be reanimated
HTML:
<div class="section active" id="section0">
<h1>?</h1>
<h2><span class="test">1.</span> <span class="test">2.</span> <span class="test">3.</span></h2>
<a onclick="javascript:window.location='#CV';"><img class="downArrow" src="images/arrow.svg"/></a>
CSS for .test:
.test{
opacity: 0;
}

So here is how I did it. Notice I used fadeOut() to change the opacity, this was because changing the css opacity was unstable sometimes it wouldnt change all the elements.
<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
anchors: ['1', '2'],
afterRender: function(){
//For the initial animation, aferLoad does not work.
$(".test").each(function(i){
$(this).delay(i*600).animate({ opacity: 1 }, 900);
});
},
afterLoad: function( anchorLink, index, slideAnchor, slideIndex){
//When the first slide is navigated to perform animation.
if(anchorLink == '1'){
$(".test").each(function(i){
$(this).delay(i*600).animate({ opacity: 1 }, 900);
});
}
},
onLeave: function(index, direction){
//When navigated away from first slide reset the opacity.
if(index == '1' && direction == 'down'){
$(".test").fadeTo(400,0);
}
}
});
});
</script>