Does anyone know an easy fix to make scrolling possible when using an iframe and fancybox2? The ipad, using mobile safari, still does not appear to allow scrollbars or touch scrolling
Do not show scrolls, just open fancybox with the height of the frame content, then user will scroll through popup as he does in usual window.
In the iframe template add mobile metas:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Call fancybox like this:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$("a.fancybox").fancybox({
'scrolling' : 'yes',
'type' : 'iframe',
'autoSize' : true,
'autoResize': true,
'fitToView' : false
});
}
You might want to set the width.
That works for me.
Related
I have a native app that uses React Native WebView to wrap a web page.
<WebView
ref={webview => (this.webview = webview)}
source={{
uri: `http://localhost:8000`
}}
/>
In this example, the page is simply pointing to an instance of localhost that has the following code, which increments a number when the user scrolls:
var i = 0;
var $el = document.getElementById('counter')
window.addEventListener('scroll', function(e) {
e.preventDefault();
i += 1;
$el.innerText = i
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="height: 2000px; background: linear-gradient(dodgerblue, yellowgreen)">
<div id="type"></div>
<div id="counter" style="position: fixed">0</div>
</body>
</html>
The scroll behaviour inside a React Native WebView behaves in a way that is different to the browser. It waits for the scroll to finish before firing a scroll event.
Here is a comparison of the behaviour; in the browser, the scroll event fires while the scroll is in progress, as wanted and as expected:
In a React Native project in iOS 11, the scroll event fires after the scroll has finished:
This behaviour is used presumably for performance reasons but it's all but killing the intended behaviour of my app.
Is there another work around I haven't thought of?
How can I ensure the scroll event behaves in the same way as the browser inside my React Native app?
I found the below information on MDN scroll event documentation. I think issue is not related to react-native.
Browser compatibility
iOS UIWebView
In iOS UIWebViews, scroll events are not fired while scrolling is taking place; they are only fired after the
scrolling has completed. See Bootstrap issue #16202. Safari and
WKWebViews are not affected by this bug.
The problem was solved by using WKWebView instead of the React Native WebView.
<!doctype html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=600,user-scalable=no">
</head>
<body>
<div style="width:570px;height:300px;border:1px solid black" >
<input type=text>
</div>
</body>
</html>
When opening file above from Home Screen and tapping into input box in landscape mode, then rotating phone to portrait mode, screen zooms in and there's no way to zoom out. Doesn't happen when opening in Safari.
Steps to Reproduce:
1. Save the bookmark to file to Home Screen
2. Open bookmark from Home Screen
3. Turn phone to Landscape mode
4. Tap into input field, keyboard appears
5. Turn phone to Portrait mode
Expected Results:
Screen shouldn't zoom in.
Actual Results:
Screen zooms in.
Version:
IOS 9
Notes:
Didn't happen prior to IOS9. Doesn't happen in Safari, only in Web Clip.
Any ideas for workaround?
Found a solution over here:
https://github.com/scottjehl/iOS-Orientationchange-Fix
Although for me there's no need for accelerometer, simply setting meta content to "maximum-scale=1" does the trick:
var meta = document.querySelector( "meta[name=viewport]" ),
initialContent = meta && meta.getAttribute( "content" ),
disabledZoom = initialContent + ",maximum-scale=1";
function restoreZoom(){
meta.setAttribute( "content", disabledZoom );
}
window.addEventListener( "orientationchange", restoreZoom, false );
I'm creating an app in jQuery Mobile based on wordpress with a child theme for twenty twelve. Probably the CSS could be made better. The app loads fine and is without zoom and no scrolling with
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
But when changing orientation on an iPhone from landscape to portrait I'm getting a wider screen than the actual page and the scroll shows up in the middle when there is an input-field in a form on the page. however when choosing (focus-ing) on a form input field the page re-renders and the width is correct with no scroll. I've used some responsive css present like #media only screen and (max-width:..
So is there a good way of doing this?
//This one triggers on orientation change
jQuery( window ).on('orientationchange', function( event ) {
if(event.orientation == 'portrait'){
// Rerender as if an input field is focused..
}
});
This could be a solution. Better ofcourse is to prevent it to build some good CSS from the ground up, but if using twenty twelve as a parent theme in wordpress - this code might come handy.
jQuery( window ).on('orientationchange', function( event ) {
if(event.orientation == 'portrait'){
jQuery('body').fadeOut(300, function(){
jQuery('body').fadeIn(300);
});
}
});
I have use phonegap+jquerymobile to develop my mobile application.
I noticed condition below:
(step.1)I tap an textarea to input something
(step.2)I tap a select button with ios form control(prev/next), then the style change greatly. All the elements has been zoomed in.
I test my application in andriod. However, everything works as expect.The condition only shows in IOS.
Any idea? thanks a lot.
To prevent zoom when input element is selected use this viewport meta tag:
Android:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
iOS:
<meta name="viewport" content="width=device-width,user-scalable=0" />
I have set the following viewport tag in html file using UIWebView.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
Now, when user piches out, I get this effect as shown in the image.
I want to disable this effect but still have the ability to zoom in.
Tried by setting UIWebView's bounce to NO, but still this problem persists.
Thanks.
You can do it by using bouncesZoom property of UIScrollView(property of UIWebView) as below-
[webView.scrollView setBouncesZoom:NO];