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.
Related
Is there a relatively simple method for making the Bootstrap (v3) mobile menu to appear full height on screen (100%)?
It appears as though the menu will only overlay as much as the menu content that is within it (default behaviour in bootstrap.js). I just want to prevent users from scrolling/seeing the underlying page when they are viewing the mobile menu.
You could try this instead. I think it looks better than having a menu that takes the entire page and achieves the desired result.
https://jsfiddle.net/rjx3460f/4/
var mywindow = $('#window');
$('#navbar').on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});;
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
$('#navbar').on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});
The general idea is that you disable scroll on the page, and hide the content when the menu is open. Although you could just as easily just disable scroll. Or set the height of the menu to 100% when things open up.
Here is the menu taking up the entire thing. Very similar setup, but has a jumpy transition... I think you may need to create your own open transition to make it non jumpy, which is not impossible, but then no longer really bootstrap.
https://jsfiddle.net/rjx3460f/7/
#aduss's answer worked for me too but instead of assigning id's I used the bootstrap classes to target the menu,
var mywindow = $('body'), navbarCollap = $('.navbar-collapse');
navbarCollap.on('show.bs.collapse', function(x) {
mywindow.css({visibility: 'hidden'});
$('body').attr("scroll","no").attr("style", "overflow: hidden");
});
navbarCollap.on('hide.bs.collapse', function(x) {
mywindow.css({visibility: 'visible'});
$('body').attr("scroll","yes").attr("style", "");
});
I lost a few days trying to make top position in view on other slide than active slide. I use plugin: idangero.us/swiper/. However, didn't work when I join above plugin with malihu.plugin and I dont know what I'm doing wrong.. PLEASE help me, anbody...
If I use only idangero.plugin then everythink work: fiddle but after join next plugin scrollbar no working scroll to top on (other than active) slides.
How I can join both plugin?
In malihu plugi part of code responsible for srolling:
_wrapperScroll=function(){
var $this=$(this),d=$this.data(pluginPfx),
namespace=pluginPfx+"_"+d.idx,
wrapper=$("#mCSB_"+d.idx+"_container").parent();
wrapper.bind("scroll."+namespace,function(e){
if(wrapper.scrollTop()!==0 || wrapper.scrollLeft()!==0){
$(".mCSB_"+d.idx+"_scrollbar").css("visibility","hidden"); /* hide scrollbar(s) */
}
});
},
In dev show code in browser (ff) I can see:
mCSB_scrollTools mCSB_3_scrollbar (...) mCSB_scrollTools_vertical
Where:
mCSB_X_scrollbar
is propably equal X malihu scrollbar in X slide.
X is number of slide and scrollbar
So what should I edit/do to make it work and where paste it in idangero plugin
I realy need to your help with that...
best regards
Since you're using custom scrollbar on the slides, you need to use the script's API to control it. The mCustomScrollbar plugin defines a scrollTo method, which is available on the element you attached the scrollbar to.
If you want to reset scrollbar position on all slides in the slider except current slide, inside the onSlideChangeEnd callback call
$(hook.slides).not(':eq(' + hook.activeIndex + ')').mCustomScrollbar('scrollTo', 0);
What I need to achieve is that when you swipe up the page from the arrows, the page needs to slide up and the user will be redirected to another page (as an intro).
I currently have a working way to use the slider:
The question is: how do I actually make an effect that looks like the page goes up when the slider is used?
There are many different ways to do it. As I prefer to do it without plugins (well except jQuery), here's my way to achieve this:
1. Detect the Swipe
This can be achieved with the "touchstart" and "touchend" events. If the touchstart event is fired, you'll get the coordinates of the touch position. When the touch ends, get it again and compare the distance.
There are many really helpful articles about this topic.
here or here or just google "javascript swipe"
2.Scroll down
Can be done in many different ways, depends on what animation you want. Google for "smooth scrolling javascript". If you use jQuery, this might be the easiest way:
function afterscrolling(){
$('html, body').animate({
scrollTop: $( YOUR_ELEMENT ).offset().top
}, 500);
return false;
};
You can use Hammer.js
var swipe = new Hammer.Swipe();
swipe.recognizeWith(swipeup);
See swipe-recogniser.
So once you recognise the swipe-up gesture, you can animate the div to translate up using css.
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
Refer this
Made a Codepen http://codepen.io/keephacking/pen/RaYxpm
Used jQuery touchSwipe and slideUp in jquery for the effect
For more about TouchSwipe ,Check link below.
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
I have read few similar questions regarding the same issue and I have implemented my function. However it doesn't work as expected. I am using Bootstrap for my website thus every element on the page is responsive.
Problem description: I am using jQuery stick plugin http://stickyjs.com/ and I am making one element of my page always visible. Now what I am trying to achieve that the sticky plugin call would only work if the window width is above 1024px. Since I am using bootstrap and below 1024 px every element get stacked underneath.
Here is my function
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize >= 1024) {
$(".rightmain").sticky({
topSpacing:0
});
}
}
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
This code doesn't invoke the sticky plugin.
If I remover the width calculation function and simply invoke the sticky plugin like the one mentioned below then it works fine.
$(document).ready(function(){
$(".rightmain").sticky({
topSpacing:0
});
});
Also, if anyone can give me some pointers to some other library other than http://stickyjs.com/ where I have the option to disable the plugin after a certain given windows (height/width) then it would be great. Since I am using bootstrap I dont want to invoke the sticky plugin in every other cases.
I have a website that is essentially four divs - each of which is set to the height of the window so that the total document is four times the height of the window.
The idea is that a click on a div advances the scroll by one "window height" - which works fine, like this:
// on click event
if(cur_frame<number_slides){
scrolling = true;
$('html,body').animate({scrollTop:window_height*cur_frame},function(){
scrolling=false;
});
}
After the user scrolls the page manually, however, I'd like to "snap" the position to the nearest multiple of the window height - so a given div is once again centered on the screen. I tried using a timeout, figuring that a small delay would keep it from triggering a thousand times a second...
// on scroll event
clearTimeout(scroll_timer);
if(!scrolling) scroll_timer = setTimeout(function(){
if(cur_scroll!=window_height*(cur_frame-1)) {
scrolling = true;
$('html,body').stop().animate({scrollTop:window_height*(cur_frame-1)},function(){
scrolling = false;
});
}
},100); //20? 400? 1000?
...but couldn't strike a balance between the script fighting the user over scroll position, or a seriously long delay that defeats the "snapping" effect.
Any suggestions how this might be achieved?
There is a CSS spec for this, and it is well supported with native rendering and very nice touch behavior except on Chrome: http://caniuse.com/#feat=css-snappoints
For the laggard browser, there's a polypill: https://github.com/ckrack/scrollsnap-polyfill
See also How to emulate CSS Scroll Snap Points in Chrome?
The jquery scrollsnap plugin for this supports down to IE9.
What you're looking for is called "Scroll Snap".
<script src="demo/foundation/javascripts/jquery.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 50
});
});
</script>
What about using a simple scrollTo? Plain Javascript and CSS used, no frameworks or libraries.
Here are two examples, one for vertical scrolling and the other for horizontal scrolling:
Vertical: https://jsfiddle.net/x9z5tpye/
Horizontal: https://jsfiddle.net/bwsyn6q4/
If you want to consider a cross-browser javascript re-implementation of the native CSS Scroll Snap spec, as already answered here: How to emulate CSS Scroll Snap Points in Chrome?, you can use
this library:
The main reason to use this instead of the native css solution is that it works in all modern browsers and has a customizable configuration to allow custom timing in transitions and scrolling detection.
The library re-implements the css snapping feature using vanilla javascript easing functions, and works using the values of the container element's scrollTop/scrollLeft properties and the scroll Event Listener
Here is an example that shows how to use it:
import createScrollSnap from 'scroll-snap'
const element = document.getElementById('container')
const { bind, unbind } = createScrollSnap(element, {
snapDestinationX: '0%',
snapDestinationY: '90%',
timeout: 100,
duration: 300,
threshold: 0.2,
snapStop: false,
easing: easeInOutQuad,
}, () => console.log('snapped'))
// remove the listener
// unbind();
// re-instantiate the listener
// bind();
You could do this with javascript or for a slightly simpler and older solution you can use page anchors.
If you change your document.location.hash to an anchor that exists in the page then the browser will scroll to it.
So in your HTML put some anchors in the page:
<a name="anchor1" id="anchor1"></a>
then in your js put:
document.location.hash = "anchor1";