I am trying to implement a slide-in menu for a responsive page, which appears when the device size is small. I used Bootstrap Simple Sidebar and added a top toolbar that appears when the screen width is small, which has a button to slide-in or slide-out the menu. All works well.
I am now trying to also trigger the event to slide in or out the menu using swipe left and swipe right gestures. I added JQuery Mobile (custom build with only events included).
The event triggers fine, my code looks something like this.
<script>
$(document).on("swiperight",function(e){
if ($('.smallscreen-toolbar').is(':visible')) {
e.preventDefault();
if (!$("#wrapper").hasClass("toggled"))
{
$("#wrapper").addClass("toggled");
}
}
});
$(document).on("swipeleft",function(e){
if ($('.smallscreen-toolbar').is(':visible')) {
e.preventDefault();
if ($("#wrapper").hasClass("toggled"))
{
$("#wrapper").removeClass("toggled");
}
}
});
</script>
The problem I have is that during the swipe left gesture (to close the menu), the page (which would be offset to the right) performs horizontal scrolling. When I tested it using Chrome's emulator I also got this error message: Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted., which I presume is related.
I am trying to cancel the event using e.preventDefault(). Isn't this the right way?
How do I block horizontal scrolling events (without blocking vertical scrolling)?
I also tried to put overflow-x: hidden on the html, body and the <div> wrapping my content but when its margin is offset to the right (when the menu is visible) I can still drag it and move it around. If I bind an event to touchmove and do e.preventDefault() during it I block everything, including swipes.
Related
I am using adminLTE template with fixed sidebar. i have issue in the sidebar section. when i click sub menu, sidebar scroll not displayed. but when i load chrome inspect element section, scrollbar appeared. why is that? please check attached images
but when i load inspect element, scroll bar appeared.
I am also facing same issue.The problem from scroll plugin height detection .For first time load its read some height and add scroll on respected data.
Then you expand the menu .its still perform the same height.
Why its working after developer mode open ?
Because the window was resized that scroll plugin detect new height
So we need manualy trigger the resize event on expand menu click/hover .use below code on click/hove while expand menu
setTimeout(function () {
$(window).trigger('resize');
},10)
create click/hover event on menu (inspect to find classname)
$(document).on('click hover','classnameOfMenu',function(){
setTimeout(function () {
$(window).trigger('resize');
},10)
})
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 need to disable mouse scroll horizontal scrolling while hovering tab panel title text.
If you hover tab title and try mouse scroll, it start scrolling horizontal way.Its OK for tapping left and right navigation arrow to scroll.
How can avoid this horizontal scrolling which is happening my mouse scroll ?
Please find fiddle for same.
Note - Look like this scrolling happen with Google chrome browser only.
ExtJS Tab panel Fiddle
Like Evan said, set the wheelIncrement to 0. If you want to add that to a specific panel, add it with a listener:
listeners: {
boxready: function(panel) {
var layout = panel.tabBar.getLayout();
layout.overflowHandler.wheelIncrement = 0;
}
}
I have an weird issue in IE8. I have a bunch of div's in an area. Each div has the same structure. Here is the basic structure.
<div class="brandImage">
<div style="display:none;">
<a><img/></a>
<div><span>See More</span></div>
</div>
</div>
Each brandImage div has an on hover listener which will give the inner div a display:block reveling the image and allowing the user to click through.
All these "tiles" are contained in a div with a set height and is scroll-able using the jquery.mCustomScrollbar plugin.
It works with all the tiles above the fold, however, when a you start to scroll down below the fold, if you click on one of the tiles, on mousedown will cause the container to scroll up. If the container does not have to scroll very far or you release the mouse button fast enough to complete the click it will work.
My question is what could be causing the scroll up on the mousedown event?
The plugin defaulted to scroll on focus. The function that was called on focusin. This was scrolling the container. Here is the code from the plugin.
/*scrolling on element focus (e.g. via TAB key)*/
if($this.data("autoScrollOnFocus")){
if(!$this.data("bindEvent_focusin")){
mCustomScrollBox.bind("focusin",function(){
mCustomScrollBox.scrollTop(0).scrollLeft(0);
var focusedElem=$(document.activeElement);
if(focusedElem.is("input,textarea,select,button,a[tabindex],area,object")){
var mCSB_containerPos=mCSB_container.position().top,
focusedElemPos=focusedElem.position().top,
visibleLimit=mCustomScrollBox.height()-focusedElem.outerHeight();
if($this.data("horizontalScroll")){
mCSB_containerPos=mCSB_container.position().left;
focusedElemPos=focusedElem.position().left;
visibleLimit=mCustomScrollBox.width()-focusedElem.outerWidth();
}
if(mCSB_containerPos+focusedElemPos<0 || mCSB_containerPos+focusedElemPos>visibleLimit){
$this.mCustomScrollbar("scrollTo",focusedElemPos,{trigger:"internal"});
}
}
});
$this.data({"bindEvent_focusin":true});
}
}
When I initialize the plugin, I set autoScrollOnFocus to false and there was no issue.
What I want to do, is to catch the event when the user is scrolling div horizontally.
For vertical scroll I am using event 'mousewheel' and it's working properly. ( horizontal scroll is performed by a two finger drag on the touchpad - I am testing on Mac OS).
You can handle horizontal scrolling by :
$("#someContainer").on("scroll", function (e) {
horizontal = e.currentTarget.scrollLeft;
vertical = e.currentTarget.scrollTop;
});
In this case this bind all kind of scroll events on this element so you can also handle
Vertical by e.currentTarget.scrollTop
and
Horizontal by e.currentTarget.scrollLeft
I don't have the proper setup to test this, but $.scroll() should do the trick. It's probably preferable to binding the mousewheel event as well. People use all means of scrolling ;)