I am building a mobile website that contains fixed elements. Unfortunately the iPhone handles fixed elements as if they were static.
I know of a solution where you put that image into a scrollable div, so the elements stay at their position while you scroll. But then on the iPhone you have to use two fingers for scrolling which is very uncomfortable.
Can you show me a way to bind the two-finger-touchmove to one finger or switch the touchmove events?
Thanks in advance!
Look into UIGestures. You can map one to multiples touches. You can also check what type of gesture it is. Eg. Panning, Pinching, Shake, Swipe right etc...
Related
check code http://liveweave.com/ExmKkE
i have both scrollable and droppable object , problem i that when i try to scroll in mobile device object starts dragging how to stop dragging behaviour when scrolled
see below link :http://liveweave.com/ExmKkE
is it possible to stop vertical drag drop or any better way to overcome it
Use the Quo.js , it will fit your needs. Probably you will use the hold method.
Or if you don't want to use, this answer might be the best for you. Trigger Click-and-Hold Event
In HTML/CSS/JS, there is one thing I am having trouble figuring out:
How to prevent people from scrolling an element using the mouse wheel press (i.e. hold down the mouse wheel and drag, or click the mousewheel, drag, click the mouse wheel again) and how to do the same when people try to drag the elements around on a touch-device.
This is something I stumble upon, amongst other places, when trying to make a hamburger-style menu.
Setting an element's CSS to overflow: hidden will hide the scroll bars, but using above two methods, it is still easy to scroll through them.
Until now, the only 'solution' I found was to make a second element, and position it on top of the element that should not be scrollable. But this hardly seems like a perfect solution to me.
How can these events be captured using JavaScript?
How can, on, for instance, this page, scrolling horizontally and vertically be blocked when the menu is open?
If you create a jsfiddle, we can give a better solution. If you are OK with jquery, I can give some solution for your second point "How can, on, for instance, this page, scrolling horizontally and vertically be blocked when the menu is open?".
First you need to create one simple class like below.
.overhidden
{
overflow:hidden !important;
}
Next, we need to apply this class when you press the menu icon on your screen. Also we need to remove if they click again for closing. It is easy to do in jquery like below.
$(document).ready(function(){
$('#hamburger').click(function(){
$('body').toggleClass('overhidden');
});
});
I am developing a Windows 8 app with HTML5 and Javascript.
I decided to use a FlipView. My template for this consists of several div which contains the HTML.
Everything works except for one thing, my div containing the HTML I added the option overflow: scroll, the scrollbar appears, but my problem is that I can not scroll that pressing the ScrollBar. Unable to retrieve mousewheel event.
What is the solution to successfully scroll (horizontal scroll) also with the mouse wheel? (No worries for browsing with your finger).
I solved this problem by using the event to wheel up mousewheel.
It's that grey area at when you've reached the bottom of the page. I've tried it all!
Viewports, overflow, etc. The methods that do what I need (lock the page in place) also disable zoom, which I need. My web app involves people grabbing moveable images and divs. If they touch the background instead and drag, then the whole page drags and snaps - it is irritating, but not the end of the world.
you can add a touchmove listener to the body so that it doesn't react like the other elements:
document.body.addEventListener('touchmove',function(event){ event.preventDefault(); },false);
iScroll does a fantastic job of handling framed scrolling. It may be worth looking at.
http://cubiq.org/iscroll-4
In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.
http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.