I want to swipe right to close my menu. I want users to be able to scroll up and down through my menu given that the menu may be long on mobile.
However if you swipe up or down and you swipe to the right a little bit, it closes the menu.
http://codepen.io/ashconnolly/pen/gpBLPp/
$('.menu_toggle').click(function (event) {
$('.menu').toggleClass('active');
});
new Hammer(document.getElementById('menu')).on("panright", function(ev) {
$('.menu').removeClass('active');
});
Is there a simple way round this?
I almost want a threshold to make it obvious.
Like a simple calculation - IF distance traveled to the right is greater than distance traveled vertically = swipe right.
Hope you can help!
You can use swipe events. Hammer JS provides you clear separation between swipe up/down/right/left. You can put a higher threshold for swipe right event if you want to avoid it on vertical scroll.
Related
I have 5 images and I want to slide those images when we hit the arrow up or down with keyboard button or when we move the scroll bar up or down
For reference:www.webflow.com please just check it from the link. when you will scroll down to the Buil Custom section on the page. you will see the slider and its working with when you hit the arrrow button up and down from keyboard or when you move down or up with scroll bar.
You can use https://api.jquery.com/scrollleft/ to scroll horizontal on an element.
Example: $( "div.slider" ).scrollLeft( 300 );
You will have to first compute the width of each element of your slideshow and scroll exactly that much each time.
You can do this on arrow keys with an event handler: Detecting arrow key presses in JavaScript
The reference you linked shows changes in your page based on the scroll position, reading js: change style based in scroll position might give you hints on where to start there.
JSFiddle: https://jsfiddle.net/q6q499ew/
So far, I have a very basic system to start with, so if you scroll past a certain point it should become stuck until you start scrolling back up.
$(".body").scroll(function(){
$(".mainContent").toggleClass("stickyBottom", $(this).scrollTop()>1040)
}).scroll()
I would like to be able to have it so that, regardless whether the sidebar or main content is greater in height, the one which is least tall will stop when it is at the bottom of the div, scrolling back up will scroll both until one reaches the top but the other can still scroll.
You were on the right track, but ultimately what you want to do is use an if statement to addClass("stickyBottom") when the scroll is beyond 1040 and removeClass("stickyBottom") when the scroll is less than 1040.
$(".body").scroll(function() {
if ($(this).scrollTop() > 1040) {
$(".mainContent").addClass("stickyBottom");
} else {
$(".mainContent").removeClass("stickyBottom");
}
});
Working example.
I have a fullpage web site on angular 5, which do pagination by vertical swipe down and up (on desctop version is listening for wheel events). On mobile I met a serious problem with non-hiding address bar because of no scrolling happens on page (page have a size of viewport). So my structure looks like this:
<div (swipeup)="fnc()" (swipedown)="fnc()">
Container handling vertical swipes and has touch-action: pan-y property
and 100vh height
<component>Container handles horizontal swipes inside components</component>
</div>
My current Hammer config:
mc.get('pinch').set({enable: false});
mc.get('rotate').set({enable: false});
mc.get('swipe').set({direction: Hammer.DIRECTION_ALL});
mc.get('pan').set({direction: Hammer.DIRECTION_ALL});
And { "touchAction": "pan-y" } seted to container which handles vertical swipes.
With this config I'm able to scroll with hiding of address bar but vertical swipe doesn't work (or it fires super rare in strange circumstances). But I want vertical swipe to fire every time when scrolling is over and not possible (when I scroll to the bottom and my address bar became hidden it should fire next swipe in the same direction).
I will be grateful for any help or advice on how to do this in different way.
new Hammer(element, {
inputClass: Hammer.TouchInput,
});
this try
I want horizontal scrolling by buttons instead of scroll bar in my website.
For Example: http://www.entrepreneur.com/video/index.html
Here are thumbnails for videos are scrolling when left/right button at top right corner are pressed.
If i'm understanding your question correctly, You'd like to scroll a block element horizontally when a button is clicked.
EDIT: I created a JSFiddle for you to take a look at
$("#fixedSize").animate({
scrollLeft: $("#scrollAmount").val()
})
That block is what creates the scrolling effect you're looking for.
Take a look at the jquery scrollLeft.
Let me know if this helps!
Quick question...
Is there any way to change the default behavior of a scrollbar from moving one pixel at a time (continuous motion), to jumping say 100px at a time (less continuous more discrete jumps). I have an animation that jumps between pictures and I want to use the scrollbar to show one picture at a time.
Whenever I try changing the behavior of the scrollbar it either jumps all over the place or does some screwy stuff. BTW I'm scrolling the bar, not using arrows to move it. That way I can manually make the animation faster or slower.
Use the Control.ScrollBar.scrollBy() function to scroll by any number of pixels.
var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
$('scroll_down_50').observe('click',function(event){
scrollbar.scrollBy(-50);
event.stop();
});
EDIT: To disable the scrollbar try: scrollbar.disable()
From: http://livepipe.net/control/scrollbar