I am making a website using fullPage.js, I am in need to have a set of options on the first section only, I mean, in the first section I want to have a fullPage option set to true and in the second section I want it set to false, for that I am using fullPage events, altough seems like the options can not be changed on events, so I am asking for a method to do that.
My Java Script code, look at the afterLoad and onLeave events, I want slidesNavigation option to be changed:
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#7396FF', '#FFFFFF'],
controlArrows: false,
afterLoad: function(anchorLink, index){
if(index == 1){
slidesNavigation: true,
}
},
onLeave: function(index, nextIndex, direction){
if(index == 1){
slidesNavigation: false,
}
}
});
});
Thanks in advance.
You can not change options in that way.
If you dont want to show the slides navigation just hide it with jquery or with CSS.
I would recommend you to check this video about how to take advantage of the CSS class added to the body depending on the section you are in.
You could do it in this way as well, taking into account that the class active is added to the active section in the viewport.
#section2.active .fp-slidesNav{
display:none;
}
Online demo
Or by using events:
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#7396FF', '#FFFFFF'],
controlArrows: false,
onLeave: function(index, nextIndex, direction){
if(nextIndex == 2){
$('#section2').find('.fp-slidesNav').hide();
}
}
});
});
Online demo
Related
I have the code partially written but I am not sure what to put after the if and else parts. What I'm trying to do - whenever a section has class "four" and "active" I want to disable FitToSection option for fullpage.js. Fullpage.js has a built in setFitToSection Boolean which I'm using. This is what I have so far, what else do I need?
$(document).ready(function () {
if ($('.four').hasClass('active') === true) {
$.fn.fullpage.setFitToSection(false);
}
else {
$.fn.fullpage.setFitToSection(true);
}
});
Just use the callbacks fullpage.js provides, such as afterLoad or onLeave:
$('#fullpage').fullpage({
autoScrolling:false,
onLeave: function(index, nextIndex, direction) {
var destination = $('.fp-section').eq(nextIndex - 1);
if(destination.hasClass('four')){
$.fn.fullpage.setFitToSection(false);
console.log("setting fitToSection off");
}else{
$.fn.fullpage.setFitToSection(true);
console.log("setting fitToSection on");
}
}
});
Example online
You don't need to check for the active class in this case because the destination section will always have it. Just check if it has the four class.
A shorter version of the same script can be:
$('#fullpage').fullpage({
autoScrolling:false,
onLeave: function(index, nextIndex, direction) {
var destination = $('.fp-section').eq(nextIndex - 1);
$.fn.fullpage.setFitToSection(!destination.hasClass('four'));
}
});
I have this code: http://jsfiddle.net/hevercking/t0qxavfc/
when you click the "&" button appear the social network links on the top of the button using the WCircleMenu effect, when someone sroll down the bar menu comes up using the jquery.fullPage effect, since here all works perfect, but now i want change the angle_start 180ยบ for show the menu in the oter page, because if i push the button in the otter page the social buttons appear on the other side, I tried to make some changes but everything stops working, someone could help me do this?
this is my js code
$(document).ready(function() {
//FULL PAGE CODE
$('#fullpage').fullpage({
verticalCentered: false,
onLeave: function(index, nextIndex, direction){
//leaving 1st section
if(index == 1){
$('.barra').addClass('fixed');
}
//back to the 1st section
if(nextIndex == 1){
$('.barra').removeClass('fixed');
pag = 'nextIndex';
}
},
afterResize: function(){
windowsHeight = $(window).height();
}
});
//END FULL PAGE CODE
//WCircleMenu config
$(document).ready(function(){
$('#my-menu').WCircleMenu({
angle_start : -Math.PI/1.371,
delay: 50,
distance: 100,
angle_interval: Math.PI/6.5,
easingFuncShow:"easeOutBack",
easingFuncHide:"easeInBack",
step:15,
openCallback:true,
closeCallback:true,
itemRotation:360,
iconRotation:180,
});
});
//End WCircleMenu config});
you can change the parameters at the full page function
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
onLeave: function(index, nextIndex, direction){
//leaving 1st section
if(index == 1){
$('.barra').addClass('fixed');
$('#my-menu').WCircleMenu({angle_start : Math.PI/4.371});
}
//back to the 1st section
if(nextIndex == 1){
$('.barra').removeClass('fixed');
pag = 'nextIndex';
$('#my-menu').WCircleMenu({angle_start : -Math.PI/1.371});
}
},
afterResize: function(){
windowsHeight = $(window).height();
}
//to avoid problems with css3 transforms and fixed elements in Chrome, as detailed here: https://github.com/alvarotrigo/fullPage.js/issues/208
//css3:false
});
});
I am using fullPage.js to create a full screen slider.
The slider should auto cycle through sections, I am using the following code:
var idInterval;
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
sectionsColor: ['#8FB98B', 'green', '#EAE1C0', '#333333', '#AA4321'],
slidesNavigation: true,
loopBottom: true,
afterLoad: function (anchorLink, index) {
if (index == 1) {
idInterval = setInterval(function () {
$.fn.fullpage.moveSectionDown();
}, 1500);
}
if (index == 5) {
clearInterval(idInterval);
}
}
});
});
When reaching the fifth slide the slider stops and does not cycle on. If I do not clear the interval the slider does not work properly. I have followed the same code as I would use when auto cycling with moveSlideRight(); but it somehow does not work the same with moveSectionDown.
View the fiddle: http://jsfiddle.net/2dhkR/254/
Any ideas?
That's because you don't need a setInterval.
You need a setTimeout in this case. It makes no sense to start an interval every time you reach the 1st section.
As afterLoad is called once any section loads, just use that.
afterLoad: function (anchorLink, index) {
setTimeout(function () {
$.fn.fullpage.moveSectionDown();
},1500);
}
Demo online
I'm working with two jQuery plugins fullpage and ferromenu.
fullpage makes it so that the window scrolls by entire pages and ferromenu is a neat circular menu that expands and collapses.
The problem is that since fullpage makes my entire website one page, ferromenu is shown on every single page so I don't want to just initialize it with $(document).ready
This is what I have tried but the problem I have now is that it doesn't disappear when the page changes away from the url
$(window).on('hashchange', function(e){
var pageURL = $(location).attr("href");
if (pageURL === "https://www.example.com/index.php#thirdPage") {
$("#custom-nav").ferroMenu({
position : "center-center"
});
};
});
You should be using the callbacks provided by fullPage.js such as onLeave and afterLoad:
$(document).ready(function () {
$("#custom-nav").ferroMenu({
position: "center-center"
});
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
onLeave: function (index, nextIndex, direction) {
//going to section 3 ?
if (nextIndex == 3) {
$('.ferromenu-controller').show();
} else {
$('.ferromenu-controller').hide();
}
}
});
});
Or even by using the css3 class added to the body by fullpage.js as detailed in this tutorial.
I don't know if this is the best way to do it but I found the class for the html object it creates and just changed the display property in the else part of my if statement.
$(window).on('hashchange', function(e){
var pageURL = $(location).attr("href");
if (pageURL === "https://www.example.com/index.php#thirdPage") {
$("#custom-nav").ferroMenu({
position : "center-center"
});
} else {
$('.ferromenu-controller').css('display', 'none');
};
});
I have been trying to create a site using fullPage.js, in which there are 5 vertical sections, 2 of which have horizontal slides. One of these I would like to scroll sideways automatically, and the other I want to scroll manually, ie be controlled by the user.
So far I am almost there, I set the interval after the page renders at 1500 ms, and the clear this interval when the page reaches the 5th "manual" section. There is a working version here:
http://jsfiddle.net/2dhkR/187/
The 2 problems I have are that after reaching the 5th section, upon returning to the 2nd "autmatic" scrolling section the scrolling does not resume. Also, the 5th section still scrolls one slide before stopping.
heres my code so far:
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
sectionsColor: ['#8FB98B', 'navy', '#EAE1C0', '#333333', '#AA4321'],
slidesNavigation: true,
loopBottom: true,
afterRender: function(){
idInterval = setInterval(function(){
$.fn.fullpage.moveSlideRight();
}, 1500);
},
//turns off the automatic scrolling. NEEDS TO BE TURNED BACK ON
afterLoad: function(anchorLink, index){
//using index
if(index == 5){
clearInterval(idInterval);
}
}
});
});
Ive tried resetting the interval after this, using:
if(index == 2){
setInterval(function(){
$.fn.fullpage.moveSlideRight();
}, 1500);
}
but this does not work, and seems to speed up the automatic scrolling.
Could anyone help me order these commands, and decide which fullpage.js callback to use (https://github.com/alvarotrigo/fullPage.js#callbacks )?
Thanks a lot
It doesn't make any sense that you try to slideRight using the afterRender callback.
You should only do it on the 2nd section, use the afterLoad callback instead, which will also be fired every time you access a section.
Living demo
var idInterval;
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
sectionsColor: ['#8FB98B', 'green', '#EAE1C0', '#333333', '#AA4321'],
slidesNavigation: true,
loopBottom: true,
afterLoad: function (anchorLink, index) {
if (index == 2) {
idInterval = setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 1500);
}
//using index
if (index == 5) {
clearInterval(idInterval);
}
}
});
});