I'm developing an web app. On the left side is an sidebar using the Sidr-plugin (jQuery Plugin: Sidr). The test site is on my developing server. My problem is that if I'm swipe from left-to-right the sidebar is displayed. That's very good. But if I want to close the sidebar by swiping from right-to-left I must prevent the scrolling by add this following code:
$('body').bind('touchmove', function(e){e.preventDefault()})
I did that, but now: My navigation in the top of the page (menu) doesn't work fine. I can't scroll until to the end.
So my question is: How can I change this. It should only prevent the vertical Scrolling if I'm going to close the Sidebar on the left.
Here's my complete JavaScript:
$(function(){
$(document).foundation();
$('#sidebar-toggle').sidr();
var hammertime = Hammer(document.getElementById("wrapper")).on("swiperight", function(event) {
$.sidr('open');
});
var hammertime = Hammer(document.getElementById("wrapper")).on("swipeleft", function(event) {
$.sidr('close');
});
var hammertime = Hammer(document.getElementById("content")).on("tap", function(event) {
$.sidr('close');
});
$('body').bind('touchmove', function(e){e.preventDefault()})
});
Make page not scrollable
Something like this?
I think that using $(document) would be better!
Reference: Prevent horizontal scroll on jQuery Mobile
var lastY;
$(document).bind('touchmove', function (e){
var currentY = e.touches[0].clientY;
if (currentY !== lastY){
// moved vertically
return;
}
lastY = currentY;
//insert code if you want to execute something when an horizontal touchmove is made
});
I was trying to integrate Sidr with Hammer JS but there is conflict, so I got rid of Hammer and used the code below, which uses TouchWipe JS combined with Sidr JS.
<!-- Swipe to open or close mobile menu -->
<script>
jQuery(window).touchwipe({
wipeLeft: function() {
// Close
jQuery.sidr('close', 'sidr-main');
},
wipeRight: function() {
// Open
jQuery.sidr('open', 'sidr-main');
},
preventDefaultEvents: false
});
</script>
I guess the problem you are facing with right-to-left swipe should be fixed.
Related
I'm trying to achieve a sliding scroll (like fullPage.js) by myself. I don't want to create a plugin either use a plugin. I only want to scroll/slide to a section when user trigger scroll (up and down!).
I've searched all over the internet and I do not know how to prevent the user from scrolling to replace standard scroll behavior by my animated scroll (desktop and mobile). I want to implement this animation inside a Bootstrap carousel item.
Summarizing, I have a carousel with several items, and each item will have a caption (outside the viewport). When the user scrolls down, then I will show the caption (like third slide here), and when the user scrolls up, I will scroll up and hide the caption.
Here is the CodePen with the carousel example running: link
This is what I get so far (I've got part of the code from StackOverflow)...
$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
_direction = 'down';
window.scrollTo(0, document.body.scrollHeight);
} else {
_direction = 'up';
window.scrollTo(0, 0);
}
_top = _cur_top;
console.log(_direction);
});
});
I get a very (very!) slow animation... It is not smooth at all.
I've tried this too:
$(document.body).on('DOMMouseScroll mousewheel', function (event) {
event.preventDefault();
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// Scroll up
$("html, body").animate({scrollTop: 0}, 400);
}
else {
// Scroll down
}
});
But, that code does not work and I get this error: [Intervention] Unable to preventDefault inside passive event listener due to the target being treated as passive.
I will be very thankful if you can help me, please!
Edited:
Someone helped me at "StackOverflow en español". Here is the solution!! Many thanks to #matahombres ;)
I want to show an animating arrow the first time a web page loads, and disable it when the user scrolls.
Normally I could do something like this:
jQuery(window).scroll(function() {
jQuery('.arrow').css("display", "none");
});
However my site has a few plugins to allow horizontal scrolling which I think is preventing this from working.
Is there a way to hide the animation that is not based on scrolling detection?
http://codepen.io/sol_b/pen/ORGKbP
Thanks.
EDIT: the plugins I'm using are jquery kinetic and jquery mousewheel.
You can do the following in your jquery.
jQuery(window).scroll(function() {
document.getElementById("animation").style.WebkitAnimationPlayState = "paused";
});
This will stop your animation while scrolling, but this will cause an issue that the animation won't be played when the scroll is stopped. Fot that you can use this function
$.fn.scrollStopped = function(callback) {
var that = this, $this = $(that);
$this.scroll(function(ev) {
clearTimeout($this.data('scrollTimeout'));
$this.data('scrollTimeout', setTimeout(callback.bind(that),250, ev));
});
};
And then on scroll stop you can start the animation again.
$(window).scrollStopped(function(ev){
document.getElementById("animation").style.WebkitAnimationPlayState = "running";
});
If the plugin, that allows horizontal scrolling, has an official documentation, you should look for a callback method. Like when the users is scrolling this called gets called. In the callback you could then hide the arrow (or .fadeOut() imo)...
I was able to fix this by replacing 'window' with my content wrapper. Like this:
jQuery('#wrapper').scroll(function() {
jQuery('.arrow').css("display", "none");
});
I have a form that is sticky on every page, and I need it to stop being sticky when it reaches the top of the footer. I have this working properly, but I need it to become sticky again when scrolling back up the page. Anything glaringly wrong?
$(window).scroll(function(){
var footerTopPos = $('#footer-wrapper').offset().top;
var navBottomPos = $('#footer-form-wrapper').offset().top;
if(navBottomPos >= footerTopPos) {
$('#footer-form-wrapper').addClass('sticky');
} else {
$('#footer-form-wrapper').removeClass('sticky');
}
});
To clarify, the first part works perfectly. The css changes from "fixed" to "absolute" and the form stays in place. The problem is, I want it to revert back to "fixed" when you start scrolling back up the page (my else statement). This part does nothing at all.
Here is a rough jsfiddle to show the issue http://jsfiddle.net/L693f5bg/14/
--Edit--
To keep what you have started with the same and not use any other plugins you have to make sure you are declaring the variable outside the scroll function so that it doesn't get changed every time you scroll and change its position.
$(function () {
var footerTopPos = $('#footer-form-wrapper').offset().top;
$(window).scroll(function () {
var windowTopPos = $(window).scrollTop();
if (windowTopPos >= footerTopPos) {
$('#footer-form-wrapper').css('position', 'absolute');
$('#footer-form-wrapper').css('top', '0');
} else {
$('#footer-form-wrapper').css('position', 'fixed');
$('#footer-form-wrapper').css('bottom', '0');
$('#footer-form-wrapper').css('top', 'auto');
}
});
});
Updated your JSFiddle
Personally I recommend using Waypoints.js and the sticky elements plugin. It does everything and it's super clean and easy to implement. include the jquery.waypoints.js and the sticky plugin then initialize using:
var sticky = new Waypoint.Sticky({
element: $('#footer-wrapper')[0],
offset: '90%',
stuckClass: 'unstuck'
});
I updated the JSFiddle using the Waypoints.js plugin
I'm building a scrollable navigation panel for a project, and I'm having some issues optimising it for touch screens. I'm using this piece of script in order to use a touch event where necessary:
var getUserInputMethod = function() {
//same issues using touchend too
clickEvent = (Modernizr.touch) ? 'touchstart':'click';
return clickEvent;
}
$('#navigation li').on(clickEvent, function() {
$('#mainContent').load($(this).data('link'));
});
However, I can't seem to scroll without selecting a link. Is there a way I can determine between a click/tap and a scroll?
I created this javascript function which disables the scrolling of the page content when the side menu is shown: (like a fb on mobile app)
function disableScroll(){
var top = $(window).scrollTop();
var left = $(window).scrollLeft();
$('body').css('overflow', 'hidden');
$(window).scroll(function(){
$(this).scrollTop(top).scrollLeft(left);
});
}
However, whenever I try to scroll the side menu, the page content shows the scroll bar moving up and going back to its original position. How do I prevent that from showing cos it looks really ugly.
I tried fixed the scroll position using CSS but it will automatically bring my page to the top which is not what i want. i want it to stay at the position where the user last clicked the button for the side menu to appear.
You should also set overflow: hidden to the body element.. Then the scroll bar won't be shown at all. Return it back to the original overflow afterwards.
JQUERY
$('body').delegate('#element', 'click', function() {
$("body").css('overflow', 'hidden');
});
This could maybe fix your problem?