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.
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 hope someone can help me. Here is my project: http://jsfiddle.net/oz7bgL5v/8/
adjustNav: function(self, $parent) {
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
$(".next").click();
$parent.addClass(self.config.currentClass);
}
This works when scrolling down but not when scrolling up.
I just need to go back in pagination navigation (click "previous" button) when scrolling up (You intuitively can understand what I mean when you see my project.)
To detect going to 'previous' when scrolling up you need to keep track of the previous scroll location when you handle scrolling. Please see how I did it in this fiddle: http://jsfiddle.net/x74w3tcs/
Then your adjustNav function can look like this:
adjustNav: function(self, $parent, direction) {
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
$parent.addClass(self.config.currentClass);
if (direction === 'up') {
$(".prev").click();
}
else {
$(".next").click();
}
},
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.
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.
How are you?
Im using waypoints plugin for sticky elements as i scroll down the page.
However I will like to have the sticky remove at a certain position of the page, lets say 30px from its starting scroll point and then when the user scrolls up back the page, the sticky elements takes it back and up back to its original starting point:
JavaScript:
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(event, direction) {
nav.toggleClass('sticky', direction=='down');
if (direction == 'down') nav_container.css({ 'height':nav.outerHeight() });
else nav_container.css({ 'height':'auto' });
},
offset: 15
});
});
Another Example you can look at that i found online is here
http://webdesigntutsplus.s3.amazonaws.com/tuts/313_waypoints/demo/index.html
Lets just say I want the sticky nav to be dropped off at CHAPTER ONE as im scrolling down then when I'm scrolling back up it gets picked up back and carry it to the starting point.
Also: http://imakewebthings.com/jquery-waypoints/#doc-disable
I was trying to use this but no success.
Thanks
Any direction from Fiddle will help!