I am trying to accomplish a simple slide in popup animation in jquery mobile. I tested this on the desktop browser (chrome and firefox) and works fine. But in mobile i get the following results on pressing the button:
The popup comes in fine but creates a white space to the right of the screen which is visible if the user slides to the right. Dismissing the popup removes this white space. This only happens if the popup is triggered using "slide" transition. Does anyone know the reason for this behavior.
I can manually resize the window but I am not sure what event fires after the popup is done sliding in.
(I had images to show this but I don't have 10 rep so I cannot post them :( )
Does anyone know why this is happening. I am testing with Droid Razr Maxx (running Jelly Bean). I have tested with chrome, firefox and the default browser on the device. They all produce the same result. Here is my code:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
Pop Up
<div data-role="popup" id="pop" data-overlay-theme="a">
<p>Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup</p>
</div>
</div>
</body>
</html>
Upon further research, I found out that this issue was fixed in the latest version of jquery mobile (1.4) which is still in alpha phase.
http://jsbin.com/edeluh/32
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.
The below code draws a lager blue rectangle border around a close button. It only happens in Chrome. The chrome is Version 46.0.2490.86
I tried playing with CSS styling but didn't help. The below sample code is from jQuery.com site. I am a novice in area of HTML,CSS, and jQuery, so please provide detailed answer that would help me to resolve the issue. Thanks.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Use this css code:
.ui-button:focus { outline:none !important }
I have been working on a jQueryMobile App wrapped in phonegap with fixed footer.
In windows8 phones, while changing the orientation to landscape mode, the fixed footer is not aligned correctly in landscape mode only. The footer seems to have a bottom padding like behavior in landscape mode. In Portrait mode, it is aligned perfectly.
I am using jquery.mobile-1.3.2, and Phonegap 2.7.0.
I have been trying the fixes mentioned in the below URL's, but did not help:
https://forum.jquery.com/topic/jquery-mobile-fixed-footer-not-at-the-bottom-on-windows-phone-7-and-8
stackoverflow.com/questions/16602585/jquery-mobile-position-fixed-in-windows-phone-8-and-viewport-height
gilesey.wordpress.com/2013/08/15/jquerymobilephonegap-hintshacks-for-windows-phone-8-0iosandroid/
Also tried some of the JS, jQM and CSS tricks, but no change affected for the footer.
A screen-shot of the page in Landscape mode is shown in the below link (You can see the black footer, even the footer text is not clearly visible):
http://goo.gl/8RICNG
For more clarity, a part of the header section is pasted below:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
And my App footer code is:
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" class="footer-cls">
<div align="center" class="footer-txt"><script>document.write(footerText);</script></div>
</div>
Can any one please help me with a perfect work around as I am stuck with this issue?
Thanks in advance..
In Mainpage.xaml try changing the property
shell:SystemTray.IsVisible="True"
to
shell:SystemTray.IsVisible="False"
This will render the app in fullscreen mode and will reset your CSS to the entire page.This might fix your issue
Looking for a workaround to get around this or if there is a better way to resolve the issue I am open to adjusting the code..
Here is the situation:
If I do not use a doctype then the bars icon is appearing just fine within a controlgroup, however as soon as I add the doctype then it seems to flip to the plus icon instead.
The only change is adding the doctype to the top of the file and the icon flips from bars to plus.
Doesn't matter if it is jQuery Mobile 1.3.1 or 1.3.2, having the same results
Has anyone encountered this or found a way around it? I really want the bars icon to be displayed and am trying to avoid not using the doctype declaration so the code can validate properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#import url('include/jquery.mobile-1.3.2.min.css');
</style>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="NO" />
<script src="include/jquery-1.9.1.min.js"></script>
<script src="include/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="mobile">
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" class="ui-body">
Test
</div>
</div>
</div>
</body>
</html>
EDIT: Same issue occurs with the GRID icon
This is just a typo. Replace
data-icon="Bars"
with
data-icon="bars"
And your'e good to go. You have to follow the exact case when it comes to images. The full set can be found here : http://api.jquerymobile.com/icons/
Here's a demo : http://jsfiddle.net/hungerpain/cpRh2/1/
Quick question, as I think this should be very simple for those who know how it works (HTML5 app building is new to me).
I'm using Phonegap to build an app, problem however is that the default built from phonegap is portrait orientated. Atleast, that's what it seems. When I test the app on my ipad the width is adjusted fine, bu the height for some reason is bigger then the actual content of the body. I narrowed it down to this line:
When I remove height=device-height it works fine. With other words, I'm getting the wrong height of the device there. When on landscape, do I need to switch to height=device-width or something? Because that seems kind a weird, I would expect my height to change based on the orientation.
I think the code below solves your problem. You need to use
<meta name="viewport" content="width=device-width, initial-scale=1">.
and this structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
</head>
<body>
...content goes here...
</body>
</html>
Check more info on JQM Anatomy of a Page
to work with iOS screens have to make two views, one for landscape and one for portrait, measures ipad screen is 1024 × 768 pixels then I think you should handle them directly with numbers, or keep trying with the options PhoneGap gives