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);
}
}
});
});
Related
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 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
I am using fullpage.js to create a wp site, I wonder if it is possible change the scroll direction when the user gets to a certain page.
To explain better, let's use this this example:
http://alvarotrigo.com/fullPage/examples/navigationV.html
Is it possible for the scroll direction to change to horizontal when you visit the second slide?
So instead of clicking on the arrows to navigate horizontally, I want the mouse wheel to scroll horizontally.
Is this possible with fullpage.js or do I have to change to another script?
Okay, here's the basic method:
When you get to a page that needs horizontally scrolled, add a mousewheel listener that:
Turns scroll events into left or right slide changes and
Prevents the default for the mousewheel unless:
Last slide and scroll down or
First slide and scroll up
Turn off the listener when you enter another slide.
There is also some code to prevent things from happening while slides are loading.
var currentSlide = 0;
var loaded = false;
$('#fullpage').fullpage({
navigation: true,
navigationTooltips: ['First section', 'Second section', 'Third section'],
sectionsColor: ['#f1c40f', '#e67e22', '#c0392b'],
loopHorizontal: false,
afterLoad: function (anchorLink, index){
loaded = true;
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
currentSlide = slideIndex;
loaded = true;
},
onLeave: function(index, nextIndex, direction) {
loaded = false;
if (nextIndex == 2) {
$('#fullpage').on("mousewheel",function(e){
if(loaded){
loaded = false;
var delta = e.originalEvent.deltaY;
console.log(delta);
if(delta>0){ //down
if(currentSlide===2){//if last slide
$('#fullpage').off("mousewheel");
}else{
$.fn.fullpage.moveSlideRight();
e.preventDefault();
e.stopPropagation();
}
}else{ //up
if(currentSlide===0){//if first slide
$('#fullpage').off("mousewheel");
}else{
$.fn.fullpage.moveSlideLeft();
e.preventDefault();
e.stopPropagation();
}
}
}else{ //slide still loading, don't scroll
e.preventDefault();
e.stopPropagation();
}
});
}
}
});
JSFiddle
This works on Chrome. I'm not sure how cross browser the e.originalEvent.deltaY bit is. You can replace the mousewheel handler with this plugin to make it properly cross platform.
Here's a JSFiddle with jquery.mousewheel for a fully cross platform solution.
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');
};
});