zoomooz
zoomooz copied to clipboard
jaukia
Scroll when zoomed in
Why is it not possible to scroll around, when zoomed in?
I was looking for a way to reproduce the "safari double tap smart zoom" for other browsers or platforms (I was thinking of combining it with http://jgestures.codeplex.com/ to get the double tap; or to have some ctrl + key version until then).
Is it possible to enable scrolling?
Regards, and thanks for the great work,
jakov
there are no scrollbars so no scrolling
then change in your sourcecode the click event to something other you need or fire the zoomto function manually
there are no scrollbars so no scrolling
Yes, but does it have to be like that or is it possible to enable the scrollbars? I have no issues to fire the function, but i would like to be able to zoom on one element and then scroll around with the same zoom level, e.g. when reading an article, it often has only very little width due to navigation menus or advertisement etc. After zooming to the first paragraph I want to normally scroll down to read the rest of the article, just like if i had manually zoomed in on the element.
hm wouldnt be this be better? : http://www.professorcloud.com/mainsite/cloud-zoom.htm innerzoom? so you want it like this but with the features of zoomooz?
Not exactly, I would want to zoom on an element. The result should be quasi the same as if I would fiddle around with my browsers zoom to have that element in my viewport. Safari can handle this better through its "smart zoom" where you double tap the element: safari then sets its zoom to fit that element, but you can pan or zoom in/out like if you manually zoomed in on that element.
Adding this would not be trivial, since when zooming, the page size does not change, so there is no way of adusting the page scrollbars to scroll the whole zoomed content, as far as I know. Maybe one could add an huge element to dom somehow that is as large as the whole zoomed content area, but it gets somewhat tricky.
Probably making some kind of drag-scrolling of the page would be easier than actual scrollbars. Or then one could hack own scrollbars, that are not the real browser scrollbars.
Sorry for the impresise descriptions, if I have time at some point, I could try to think of this, but unfortuntely I am currently quite busy with work & other stuff...
Very sorry to hear this; but i will try to find another way. Thanks for your responses!
I have been able to get scrollbars added to the page when zoomed in by adding a huge image as a background (pretty much like @jaukia suggested -> add a huge element to the dom). I can then scroll around when zoomed in with no problems. The only problem though is that once you scroll around and click on another zoomable element, it doesn't correctly center on the new element since it doesn't take scrolling into account. @jaukia, any ideas on how to mitigate this? could the scroll offsets be calculated and subtracted from the translations? thanks
Handling the scrolling is a bit hacky in Zoomooz and bolting the tweaks on top of it might be a bit difficult. You could try adding "window.scrollTo(0,0);" when Zooming to the second level elements. But this would probably cause some artifacts.
Yeah I tried that ;) definitely didn't work great. I removed the scrolling, will look at adding drag scroll when I get a chance. Thanks
Sent from my iPhone
On Sep 29, 2012, at 4:06 AM, jaukia [email protected] wrote:
Handling the scrolling is a bit hacky in Zoomooz and bolting the tweaks on top of it might be a bit difficult. You could try adding "window.scrollTo(0,0);" when Zooming to the second level elements. But this would probably cause some artifacts.
— Reply to this email directly or view it on GitHub.
Hi, I am facing the same problem. Is it possible to change transform-origin during the scroll? this would act as hand drag effect and would cover the scrolling option. Is it feasible?
thanks
I think it makes more sense to open a new issue and reference to this issue here
I made another issue named "Drag in zoom". Sorry and thank you again for the code.
Is there any solution for the scroll or drag when zoom-in? I am having the same problem.
I think it is possible with some custom JavaScript code. But the last commit for this project is over a year old. And the forks were also not updated for a while.
I don't think there is any clean solution to this yet. And currently I don't have time to work on creating one. The problem is, that each browser handles the zooming + scrolling a bit differently so implementing this would need to take those differences into account.
Hi I have this problem too for smartphones. I don't want to scroll inside the zoomed container but actually scroll the whole page like normal and it seems when you do zoom in on the target, it disables this feature.
Any quick work around to enable scroll again just so users can scroll up and down the page like normal?
Not sure why they've done this but if you look in the non-min js of Zoomooz, on line 1171, they have this bit of code:
$(document).on("touchmove", function(e) { e.preventDefault(); });
It must be there for some reason but for I want it to do, I just commented out this bit of code and now scrolling on touch should work again for all mobiles!
It must be there for some reason but for I want it to do, I just commented out this bit of code and now scrolling on touch should work again for all mobiles!
https://github.com/jaukia/zoomooz/blob/master/jquery.zoomooz.js#L1171 Right, it prevented the normal scrolling as this caught the touchmove event / scroll gesture.
If this change breaks nothing and this could be also done with a custom setting supplied to zoomooz, a PR could make sense as @jaukia has merged some in the last month.
There is also just one branch which is still maintained as it seems https://github.com/sbrown345/zoomooz
Blame says it was added in August 2012, two months after this issue was filed: https://github.com/jaukia/zoomooz/blame/master/jquery.zoomooz.js#L1171
Also see https://github.com/jaukia/zoomooz/compare/09dd8689e0665a8da83549f3383d1c65c7dd2f4b...0d603ac74893ced7d5c956264392ddc7487f0a29