I'm trying to implement a fixed topbar for mobile devices in HTML5 that also stay fixed when the users zoom in/out the webpage.
As far as I saw on Jquery mobile they disable the zoom in/out in order to achieve a fixed topbar.
Google made its own content scrolling implementation to make the fixed topbar for the gmail application. But they also disallow the zoom.
Does anyone know a workaround over this? Do know If I can relocate the bar at the top of the new area with js when they zoom in/out?
Update: I found this post where there's an example of a fixed top bar that doesn't disable the zoom but when you zoom in/out it doesn't stay at the top.
Also I was seeing the docs for Safari on IOs but I can't find a way to get the relative position of the new zoomed area so I can relocate the bar at the top of it on every zoom in/out event.
Apple has implemented a special META tag to handle zooming:
<meta content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
This disables zooming on the iPhone, and it should work on Android as well.
As for your desired zooming effect, my advice would be to disable zooming completely and do 100% of this using jQuery and CSS webkit transitions and animations.
#some-div {
-webkit-transition: all 0.5s ease-out;
}
Here are some other jQuery libraries that do zooming:
http://flwtb.co/VKTQ1C
http://flwtb.co/VKTTdW
Hopefully this helps!
I solved the conflict between fixed position and zoom by adding
"data-disable-page-zoom="false""
to the fixed tag.
Hope this can help.
Related
I am working on a website which is working normally on 100% zoom level.
but in some windows laptops the recomended zoom level 150%, so website is zoomed and some sections overlapping in 150%.
however when we change the zoom level to 100% in windows settings website looks normal.
could anyone tell the right approach to handle this issue ?
Is there any way yto target and change windows zoom level to 100% ?
You can use
window.devicePixelRatio
to detect odd zoom percentages. Here's a link to where someone asked a similar question. I'm not sure where you would go next. Maybe you'd increase the padding by that percentage or something
EDIT: Person in the link said this worked:
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale=1.0, user-scalable=0')
I am implementing a plugin where users can zoom in and out of web content as they wanted. The plugin is going to be implemented to any mobile responsive websites.
I implemented the zoom in using
For FireFox
$('body').css('MozTransform','scale(2)');
For Chrome
$('body').css('zoom', ' 200%');
I have attached the images at the bottom.
Here right and bottom black bar is plugin part.
The problem is Desktop zoomin view.
Overflow happen and contents overflow are hidden. So when users click zoom in button on desktop, I would like to show zoomin version of mobile not zoomin version of desktop view.
I tried to fix this by changing or adding viewport metatag using Javascript.
<meta name="viewport" content="width=400, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
Here 400 is width of mobile device.
But it changed nothing.
Seems it can be easily solved if I can set device-width using Javascript, but not found solution yet.
I have been working on this issue for 2 days and anyone who have experienced this field, appreciate your help!
Is it even possible?
Desktop original view:
Desktop zoomed view:
Mobile original view:
I use position: fixed to create a fixed top navigation menu on my mobile web application.
After adding -webkit-overflow-scrolling: touch, the scrolling works smoothly. However, the top menu disappears during scrolling. It shows only after the scrolling stops.
I have searched many solutions, such as CSS3 property webkit-overflow-scrolling:touch ERROR and iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch. However, the given solutions are not working for me. Please check out this example: http://jsbin.com/woxuwihuzu/12/ (visited from iPhone 5c Chrome/Firefox).
Did I miss anything?
After two days struggling, I found this post saves me: 100% screen height css.
I have to limit the height of my content area to be the same height of the screen. Please find the working demo here: http://jsbin.com/tubaqaqumi/3/ (visit from a real phone; a Chrome simulator doesn't tell the difference).
I'm having issues with a parallax site I am building using Skrollr.
I've built a site that has the same effect as https://www.spotify.com/uk/. The effect being large full width background images that move slower than the natural browser scroll, and have text and other images moving on top of them.
When viewed on a desktop browser the site functions fine and performs perfectly. The problem I'm having is when testing on an iPad (iOS 6.1.3) and you release your finger from the screen and Skrollr's intertia animation takes over, the large background images and other content on the screen start to jitter and jump on the screen. This does not happen when you still have your finger touching the screen and scroll, only when you let go and the easing takes over.
A couple of things I've tried are:
Setting webkit-backface-visibility:hidden on all of the background images, and skrollr-body div.
Animate elements using –webkit transition: translate3d
If anyone could shed any light on why I'm getting this page flickering issue that would be great.
I had a very similar issue (i.e. Skrollr / iOS parallax background image 'flicker'). I believe you'll find it's related to this: cubiq.org/you-shall-not-flicker
Simple solution (from the article): -webkit-transform:translate3d(0,0,0).
I'm working on a jQuery lightbox type plugin that needs to function for mobile devices and desktops. I'm having a problem with the full screen overlay effect. From my research, it seems that the standard solution for this is to use position: fixed or background-attachment: fixed to accomplish the overlay effect. Of course, mobile devices don't support fixed positioning, and so I'm trying to find another way.
Right now, I'm attaching a function to $( window ).on( 'resize' ) to get the new dimensions of the window and set the overlay to them. The problem I'm seeing is that this is triggering flickering scroll bars that make the whole thing really jumpy when I size the window down. You can see the effect here: (http://jsfiddle.net/dominic_p/ZqLCx/3/ or http://3strandsmarketing.com/lightbox.php).
Any idea how I can solve this? The code is still in heavy development so it's kind of a mess, but I tried to highlight what I think the 2 problem areas are in the jsFiddle with a comment that says "THE PROBLEM: START".
UPDATE:
I had a brilliant idea to just change the positioning to fixed for desktop browsers and still rely on my resizing scripts for mobile browsers. It seems to have helped a lot, but there is still some significant flicker when the browser window starts to get small (especially when shrinking it vertically). Also, when using position: fixed on Android 4 there is suddenly a large white gap on the side of the screen that I can horizontally scroll to in portrait mode only. Anyone have an idea of how to resolve either problem?
The solution for the flicker problem seems to be to set the overflow-x (or just overflow if you prefer) property for the <body> element to hidden. For curiosity's sake, it actually wasn't the overlay layer, but the lightbox contents that were causing the flicker.
I'm still struggling with the white gap that shows up on Android, but that's a separate problem, so I'm posting this as the solution.