I've got an InDesign magazine which contains a Web Content Overlay (pointing to a responsive web site). Everything works fine apart from when it comes to scrolling.
Only vertical scrolling (up and down) is required, horizontal isn't.
Problem
When the user swipes left or right, the magazine's page changes and the web content closes.
Question
Is there any way that I can prevent scroll events from propagating up to the magazine from the web content overlay? Preferably, this would be done from the web content itself (e.g. using JavaScript) as it would mean I would only have to edit in one place, rather than on each page the web content is shown.
Attempted
Catching the touchmove event on the page's body and calling stopPropagation() on it.
Calling preventDefault() on the event (this stops any scrolling at all).
Using pageX on touchmove events and calling preventDefault() on any ones that look to be horizontal swipes (too unreliable).
Using CSS overflow-x: hidden
jQuery Mobile's custom scroll events.
A few more combinations of the above.
Found a solution. First, insert a <meta> viewport tag in the head:
<meta name="viewport" content="width=701, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no" />
Note that I've set a static width of 701, this is important. The web content overlay's width is 700px. Setting a width of 701 means that the page can move ever so slightly. This wiggle means that the swipe left/right is caught and not percolated up to InDesign. There is a slight shift (by a pixel) if they do swipe, but it's minor compared to changing page.
Next, add the following CSS to your content:
.content {
-webkit-overflow-scrolling: touch
}
You may not need this CSS, but it was necessary for us.
Related
The site I am working on www.salonbkb.com when in a mobile browser will act responsive but will allow the user to use touch to move the site from left to right creating a whitespace on the remaining space after the drag.
Foundation.zurb.com does not do this nor do most sites I have found. I believe msn.com still does this.
How can I prevent this from happening.
I tried
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
but that didn't do anything.
A page will not do this ordinarily if you have width=device-width, initial-scale=1. Some element is stretching the page, allowing the user to pan sideways. This will often happen if you have margins on a 100% width element, or if box-sizing is not set to border-box and there is padding on the 100% width element. You just need to find the element (chrome devtools is useful for this, keep scrolling down and try to find the one with a big border that sticks out) and modify or remove it.
By the way, I would highly recommend against setting user-scalable=no or maximum-scale=1. It's terrible for usability. Users should be able to zoom in. There are almost no good use cases for this. If you're concerned about tap delay, use fastclick.
You can use javascript to disable the default actions of the browser (like page drag).
document.addEventListener("touchmove",function(event){event.preventDefault();});
BUT, that will stop the user from being able to scroll down also. to prevent only sideways you would have to add conditions that check the touch direction...
document.addEventListener("touchmove",function(event){
if(//check if the absolute value
of last touch.x -current touch.x
is greater than some threshhold){
event.preventDefault();
}
});
I'm trying to disable document zooming in my web page.
I'm creating a web page for laptop Touch Screens that are running on Windows 8 this web page contains a pictures inside a dragabble divs ... the user drag it and drop it in a container then the application should let him/her zoom-in & out the image using(fingers or mouse scroll) ... every thing is cool.
but, the problem is if the image didn't recognize directly the pinch (to zoom) or the user put his fingers outside the image the document starts to (zoom-in & zoom-out)
what i need is to disable the document zooming using JQuery or css. please help.
if you want to prevent pinch to zoom on your document you need to add meta tags to your html head.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
None of the questions on the subject has any real answer (I've
seen one that says "Just stop the zoom altogether!" and the other that
says "Set the width!" (which isn't the case))
I have a web application that's supposed to work on mobile (Mobile Chrome only is enough). Pinch-to-zoom is a must-have feature.
It all works well, except for the control buttons I have. Standard buttons, fixed position at the bottom left of the page.
When I pinch-to-zoom, those buttons, while remain on bottom left, grow along with the zoom.
Is it possible to have those buttons not grow by zoom somehow?
Here is a potential fix and good read if you are running into this problem.
Here is the website, css fixed position.
How my prototype works
What I’m doing is calculating the zoom level (poorly) with JavaScript
and then applying CSS transforms to scale the fixed element back down
to normal size. As you might expect there is no smooth transition
during zoom. There are a whole host of bugs and edge cases. I’ve not
even attempted cross browser support (hence no code).
This does not seem to provide a script but it gives you the idea of what to do and how to accomplish it.
Another link on this site seems to have a bunch of great info about your problem, more of a proposal.
Here is the website, position: device-fixed;
The only other option I currently know of is disabling zoom. This is not the best approach but is what I currently do if a mobile design needs a fixed header. This will prevent the user from zooming which will then prevent the element to be affected.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have a responsive layout with a fixed header. When scaling (zooming) is enabled via the viewport meta tag, the layout can break when the user zooms because the header also zooms - which is BAD. (I wish I could keep just the header in place without scaling no matter what the current scale setting is). Anyway, that's why I'm use the following meta tag that disables scaling:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My goal is to implement some sort of media viewer like Facebook that overrides the viewport settings of the document. Upon closing, it should restore everything back to normal. I tried opening an iframe that loads a document that can scale, but it seems like the parent document overrides the iframe.
FYI, I'm using jquery.
Just discovered that with jQuery you can do this:
var meta = $('meta[name=viewport]');
$(meta).attr('content', 'device-width, initial-scale=1, maximum-scale=5');
I could get more fancy... like getting the original setting first and then restoring it when you're done. I tested this on iOS 6 and it works. I have not tested it on other devices.
I have a site that uses a jQuery UI slider.
I fired it up in my iPhone, and realised that when trying to drag the slider (by dragging my finger over it), it scrolls the site left to right and leaves the slider unaltered.
It appears I can only slide when the site is at a zoom level that shows the entire page. I think you can force this zoom level with a meta element. However, the site's content is quite illegible at this zoom level (at least on an iPhone's screen).
What is the quickest way to get around this? Is it possible, on mousedown (I guess the iPhone will fire this when the finger is placed on it) to zoom the site to fit-all so the user can actually use the slider?
And if the quickest way is hacky/ugly, what are some better solutions?
I am using jQuery.
Many thanks!
Try adding this meta-tag
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
I copied it from mrdoob's harmony webapp. I know that when you open his harmony app from android webkit browser, you can still draw around by sliding your finger. It doesn't make the entire web page slide.
Do you have to use the slider element? I also use the slider element on a site but if javascript is disabled or not available, I show two selectboxes instead of the slider.