Just starting to use fullPage.js and loving it so far.
Anyhow, when implementing continuous and looping effect and you're on the first section, it allows the end-user to scroll up and land on the last section as well ... which is a problem when trying to tell a story to the user. Therefore I am just trying to disable the up scrolling, but have no idea how to do so.
I did some research and came across the moveSectionUp and tried disabling it but had not figure out how to. Can anyone familiar with fullPage.js help me out here?
Note: I am only hoping to disable it for the first section and the rest is free to scroll back and forth.
Thanks in advance.
Use the fullpage.js function setAllowScrolling with the parameter up like so:
//disabling scrolling up
$.fn.fullpage.setAllowScrolling(false, 'up');
You can use it on the afterRender callback and the afterLoad to play with it, like this:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
continuousVertical: true,
afterRender: function () {
//disabling scrolling up on page load if we are in the 1st section
if($('.fp-section.active').index('.fp-section') === 0){
$.fn.fullpage.setAllowScrolling(false, 'up');
}
},
afterLoad: function (anchorLink, index) {
if (index !== 1) {
//activating the scrolling up for any other section
$.fn.fullpage.setAllowScrolling(true, 'up');
} else {
//disabling the scrolling up when reaching 1st section
$.fn.fullpage.setAllowScrolling(false, 'up');
}
}
});
Demo online
This way the visitors won't be able to scroll up on page load.
From the docs:
setAllowScrolling(boolean, [directions])
Adds or remove the possibility of scrolling through sections by using
the mouse wheel/trackpad or touch gestures (which is active by
default).
directions: (optional parameter) Admitted values: all, up, down, left,
right or a combination of them separated by commas like down, right.
It defines the direction for which the scrolling will be enabled or
disabled.
Related
I have a normal scroll section at the top of the page which has some parallax effects and below it there are more standard animated fullPage.js sections.
It works really great but the problem I have is when I do a fast scrolling from top of the page. It skips second section and maybe the third, depending how fast mouse wheel is fired.
It's very bad user experience especially when using Apple's magic mouse, but issue occurs with any type of mouse.
I guess the problem is because of normal scroll section at the top, but I don't know how to solve it. Does anybody has the idea on how this could be solved?
Here is the link: http://2016.macleo.de
P.S. I have also added an onLeave callback with scrollTop animation triggering manually but still buggy. I can see third section a little when trying to scroll fast through site, like some users would probably do.
onLeave: function(index, nextIndex, direction) {
var leavingSection = $(this);
//after leaving section 1
if(index == 1 && nextIndex == 2 && direction =='down') {
$("html,body").stop().animate({scrollTop:$(window).height()});
}
}
Thanks a ton!
I'm using fullPage.js, especifically onLeave function to disable scrolling down in my website. This would be okay but I'm having issues using the menu because I just can scroll in one direction.
This is my code:
onLeave: function(index, nextIndex, direction){
if (direction == 'up') {
return false;
} else {
return true;
};
}
So, if I am on the number 3 section, and want go to section number 4, the page will be blocked. How could I handle an exception for my menu?
What about using $.fn.fullpage.setAllowScrolling(false, 'down');
?
From the docs:
Adds or remove the possibility of scrolling through sections by using the mouse wheel/trackpad or touch gestures (which is active by default). Note this won't disable the keyboard scrolling. You would need to use setKeyboardScrolling for it.
That won't disable your links.
$('#fullpage').fullpage({
afterRender: fuction(){
$.fn.fullpage.setAllowScrolling(false, 'down')
}
});
If you also want to disable the keyboard, then you need to use setKeyboardScrolling as well.
I'm using the fullpage.js plugin for a single page marketing site.
I'm using navigation links to jump to scenes (all horizontal) around the site so I want to disable to the touch/swipe (between scenes) feature as it interferes with other touch elements.
I've been though all the documentation but I can't find out how to achieve this.
Any help is welcome. Thanks, Jack.
Just use the option autoScrolling:false when initializing the plugin. This way the mouse wheel won't swipe and neither the touch events will.
If you want to keep the mouse wheel scrolling (for computers) but disable the touch events (touch devices), then I would recommend you to initialize the plugin in a different way for touch devices.
In order to do so, I recommend you to do something like this.
Update 2016:
You can use the options responsiveWidth or responsiveHeight as well as the class fp-auto-height-responsive.
The options will disable the autoScrolling feature for mobile devices under the specified dimensions. Examples available in the examples folder of fullPage.js or online.
You can also use responsiveSlides and force the transformation of horizontal slides into vertical sections on responsive. This can be done through the Responsive Slides extension.
Update Sep-2014:
A method named $.fn.fullpage.setAllowScrolling can also be used with this same purpose. It will disable both the touch scrolling and the mouse scrolling.
Update Jun-2014:
autoScrolling:false only disables the vertical scrolling.
If you want also to disable the horizontal one, there's no way to do it right now. You would need to modify a bit the plugin.
Inside fullpage.js replaces this:
function removeTouchHandler() {
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
}
For this:
$.fn.fullpage.removeTouchHandler = function (){
if (isTablet) {
$(document).off('touchstart MSPointerDown');
$(document).off('touchmove MSPointerMove');
}
};
And then, when you initialize the plugin, call that public function in the afterRender callback like so:
$(document).ready(function() {
$('#fullpage').fullpage({
afterRender: function(){
$.fn.fullpage.removeTouchHandler();
}
});
});
Don't call fullpage twice. Just add the afterRender function inside your initialization.
The setAllowScrolling function also accepts a second argument for directions so the following can be used to disable left/right scrolling/swiping:
$.fn.fullpage.setAllowScrolling(false, 'left, right');
As of June 2017, none of the previous methods worked for me. The simplest way I found to effectively disable touch is as follows.
In jquery.fullPage.js you will find the function setAllowScrolling
function setAllowScrolling(value, directions){
if(typeof directions !== 'undefined'){
directions = directions.replace(/ /g,'').split(',');
$.each(directions, function (index, direction){
setIsScrollAllowed(value, direction, 'm');
});
}
else if(value){
setMouseWheelScrolling(true);
addTouchHandler();
}else{
setMouseWheelScrolling(false);
removeTouchHandler();
}
}
When fullpage is initialized it automatically calls setAllowScrolling(true), triggering the else if(value) condition above. Simply comment out the call to addTouchHandler() to fully disable it, or add some sort of condition for it to be called, eg
var winw = $(window).width();
if (winw > 480){
addTouchHandler();
}
With this method the left and right arrows still work when tapped, so horizontal slides can still be navigated. It should be noted that using $.fn.fullpage.setAllowScrolling(false, 'left, right'); will also disable the arrows.
I use carousel bootstrap 3 to use slide text. When the row#1 text is long to bottom (ex: height 300px) and the row#2 text is too short (ex:just 10px), The problem is we always must scroll to top as manually when we click next to row#2 from row#1. How to make when next slide, the system will 'smooth scrolling' to top as automatically???
In other hand, How to user can use 'hand carousel' ??? (I don't know the technology name but user just tap to right on mobile when want to next slide) when use mobile so its easy next slide without go to bottom again (find the carousel again) (this issue important when mobile ).
This is simple code
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: false
})
});
But full code in fiddle: http://jsfiddle.net/luisan/B9FeP/1/
Thanks
You could tap into the carousels slide event and then add the jquery scroll top function
$('#carousel-example-generic').bind('slid', function () {
console.log('slid event');
$('.carousel-inner').scrollTop(0);
});
Maybe using body would be better
$('body').scrollTop(0);
You can also add in an animation that would look nicer
$('body').animate({ scrollTop: 0 }, 600);
The carousel (caroufredsel) scroll (check this for example) continously to the left. When I hover to an arrow to the right it will stop scrolling then it will reverse it's direction. I tried using custom events but it appears that it's not working. Here's a code of the carousel.
$('#gallery').carouFredSel({
width: "variable",
auto: {
items : 4,
duration :"40000",
easing :"linear",
timeoutDuration :0,
pauseOnHover :"immediate"
},
items: {
visible: 3
}
});
Now my custom event that will cause the carousel to reverse is direction is like this. But it's not working until the whole items where finished scrolling. What I want to achieve is to instantaneously reverse the direction when hovering.
$('a.prev').hover(function()
{
$('#gallery').trigger("pause");
$('#gallery').trigger("configuration",["direction",right]);
$('#gallery').trigger("play");
}
The code above doesn't work and I've tried different events that will simulate the reversal of scrolling but had no luck with it.
If there's no workaround for this. I'm willing to change another plugin that will easily do the work. If you know something that can do it easily please leave your suggestions. Thank you very much!
That totally depends how the carousel is implemented. A possible solution might be to stop the eventPropagation. It may or may not work depending on the implementation of the carousel.
$('a.prev').hover(function(event)
{
event.stopPropagation();
$('#gallery').trigger("pause");
$('#gallery').trigger("configuration",["direction",right]);
$('#gallery').trigger("play");
}