I have a webpage where I show some PDFs converted in HTML5 with this awesome tool called pdf2htmlEX.
In the same page I make a navigation bar.
If I use mobile devices and I zoom with pinch-to-zoom gesture, the device apply zoom to all elements with navigation bar included.
I would like to make only the html-pdf content zoomable with pinch-to-zoom on mobile devices. I wrapped the content inside a div with id "content-container" and I tried some JS libraries like HammerJS (results with bad bad mobile performance) and iScroll-5 but I can't figure it out.
I checked out OpenStreetMaps mobile website that have some fixed elements and zoomable contents.
Have anyone implemented with good result this feature?
Thank you.
See this similar question: How to zoom div content using jquery?
Basically you can use $('#divName').animate({ 'zoom': zoomlevel }, 'slow'); to get the effect you like using zoom control buttons.
A good plugin that is very flexible to use zoom is http://jaukia.github.io/zoomooz/
Related
Google has now implemented a very unique pinch zoom for their images. The viewport meta tag does not allow user scaling or zooming, and as you would expect the resulting content is not pinch-zoomable on a mobile touch device. The image, however, is pinch zoomable. The image is the only part of the page that zooms, and the viewport scaling never changes. Does anyone know what javascript framework they are using to accomplish this? Is it publicly available?
I don't think their version is opensource, however this library is pretty nice:
https://openseadragon.github.io/
Not sure what google uses but there is a jQuery library that does this. It's called
panzoom
I have a page with a slider carousel. Recently, I've been tasked with adding touch interfacing to explore the slides by finger swiping.
I located an older jQuery plugin which appears to be no-longer supported. It allowed for touch sliding, as required, but it disabled the ability to scroll the page with a vertical swipe if the swipe originated within the slider carousel element's boundaries.
Does anyone have a resource for an element draggable library that allows to a specified axis (horizontal, for example) that won't disable vertical scrolling intentions if the origin of the swipe occurs within the element? This should function across devices like iPhone, Blackberry OS 5+
engadget.com has a slider on their mobile website that accomplishes this.
There are a couple jQuery gesture plugins, that may help you out. You could easily integrate one of these into a custom slider plugin.
I have a complex web application which is based on dijit.layout. You will find a good example of the structure here (check the examples).
As you can see there is no full page scrolling only scrolling inside the layout boxes. All layout areas have overflow:auto, which means they enable scrolling when the layout areas content is larger than the available area space.
The problem is, iOS devices like iPad/iPhone/iPod touch don't support scrolling inside HTML only for a full page.
Is there any generic way to make a digit.layout application compatible for iOS and other touch devices? For example extend the layout areas depending on the length of the content.
did you already find a solution to this problem? I played around with a combination of dojox.mobile.ScrollableView and dijit.layout but end up having two scrollbars.
I really want to use jQuery mobile, but my first needs are just to control what areas are scrollable and create fixed menus, etc.
This takes lots of effort with that toolset, when it's VERY easy with something like iScroll http://cubiq.org/iscroll-4
Is there an easy way to accomplish a scrollable area or fixed position elements with jQuery mobile?
jQuery mobile is way too much setup just to create scrollable areas.
iScroll would be what you need. And unlike jQuery mobile, iScroll works on various devices and on the desktop. jQuery mobile, not so much.
And to the person who said that is has a problem with form elements, he is right, but there is an easy fix...
iScroll 4 not working with form <select> element iPhone Safari and Android browser.
I am playing around with Sencha Touch, especially with examples like http://dev.sencha.com/deploy/touch/examples/
However I am faced with a problem, when using the component the scale is set on the iPhone and the user cannot scroll the page or zoom in or out.
How may I disable these settings as I would like to have the carousel on a page which can be scrolled, and zoomed in/out.
Thanks.
[Sencha person] You can't zoom in or out of a Sencha component. Having fixed UI Chrome is one of the reasons to even use a UI framework (otherwise you'd might use a simple mobile-optimized web page).
You can have a scrollable area within a carousel, but you might want to consider whether that's really the best UX, since the carousel is already a scroller (it just scrolls in fixed increments) Take a look at touchstyle.mobi/app for an example of a data-store backed carousel.
I could be wrong, but it seems to me that the goal of sencha is to make full screen apps, so it seems logical that you cannot zoom/scroll the page ?
There are methods and plugins for zooming if you want.
Carousel ImageViewer (plugin) - Zoom feature
Pinch-to-zoom in panels
Pinch emulator (plugin)