Sorry for the long title. The "launch demo modal" button on 'click' opens a modal, which loads an iframe from another domain. The iframe site is just an image wrapped in an anchor tag with a 'mailto:' href.
the iframe loads via jQuery.
This flow works well on desktop across browsers, and in Android devices (v. 4-6 tested so far).
In iOS, most of the time Chrome loads the mailto link quickly without issue after the user clicks the image.
In Safari, however, the 'tap' is ignored, and only when the user touches and holds the image will safari open a dialog asking the user to "open message".
Has anyone encountered this before? This is not an issue if loading the iframe directly into a div. It seems to happen only if loading into a modal, which is hidden at page load time.
You can test on iOS Safari here:
https://valuer-fox-52454.netlify.com/
from researching online I've implemented:
'touch-action: manipulation;' rules to both parent and child pages.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> on the parent page
I've added 'touchstart touchend tap focus' to the 'click' even function.
added an onclick event to the anchor tag and tried using jQuery to link out.
Image mapped a clickable area rather than wrapping the image in an anchor tag.
None of the above affected the iOS safari behavior.
Since I can't find anything specifically related to iOS overriding touch events when in an iframe and/or when loaded into a modal, I figured I'd check here.
Thanks for any assistance.
This is the parent page:
<!doctype html>
<html>
<head>
<title>Bootstrap - Modals (test)</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {font-family: Arial, sans-serif;}
.errors {display: none;}
.errors h2 {color: red;}
.coupon {width: 100%; height: 500px; border: 1px solid #ccc;}
.coupon iframe {width: 100%; height: 100%; overflow: scroll;}
ol li {margin: 1em 0; line-height: 1.5em;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>
<!-- Button trigger modal -->
<button id="getCoupon" type="button" class="btn btn-primary btn- lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
</p>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h2>Your coupon is below!</h2>
<div class='coupon' id='mydiv'></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.1.1.js'></script>
<script>
$(document).ready(function(){
$("#getCoupon").on("click", function(){
var rtxURL = "https://childinmodaltest.herokuapp.com/index.html";
if (!$('iframe[src="'+ rtxURL +'"]').length > 0) {
var iframe = document.createElement('iframe');
iframe.src = rtxURL;
$(iframe).prop({
'scrolling': 'no',
'marginwidth': '0',
'marginheight': '0',
'hspace': '0',
'vspace': '0',
'frameborder': '0',
'allowtransparency': 'true'
}).css('min-height', '640px');
setTimeout(function(){
$('#mydiv').append(iframe);
}, 333)
}
});
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
This is the child page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>child page to be loaded into modal</title>
<style>
body {text-align: center;}
img { width: 100%; height: auto; }
</style>
</head>
<body>
<a href="mailto:test#example.com" target="_blank">
<img src='https://lh3.ggpht.com/vqKa5XeIG6W51gLV-wG_-DfX20FJxGxOw4-AoDQOJAzCqFeoED50-gabK94PFnWbHf8=w300' alt="click me button" />
</a>
</body>
</html>
In case anyone comes across this, my fix was to use postMessage to communicate from the iframe to the parent page and tell it to redirect on the click event.
Related
I am using jqm 1.4.5 to create an application but I have a problem about icons.
I got remove all the disc from the icons with a class=ui-nodisc-icon but when I get to the header icons the disc does not come out. Someone was able to remove the disc from the icons in the header?
print https://i.postimg.cc/v81SLPZx/2019-02-26-00-10-54.png
Solution:
<div data-role="header">
<div id="custom-border-radius">
No text
</div>
</div>
And some CSS:
#custom-border-radius .ui-btn-icon-notext.ui-corner-all {
border: 0 solid transparent;
background-color: transparent;
}
Working example: http://jsfiddle.net/kv1jayLe/
If this is it please do not forget to accept the answer.
The .ui-nodisc-icon class is used for the icon background, not for the button itself.
Here is the reference Icons - jQuery Mobile Demos :
The semi-transparent dark circle behind the icon ensures good contrast
on any background color so it works well with the jQuery Mobile
theming system.
If You need a full-flat design, You can wrap the buttons inside a container with the .ui-noboxshadow class (see my explanation below) and declare the border and the background of the button as transparent. If You need to do that for all Your .ui-nodisc-icon buttons, remoove the .ui-header selector from the css.
.ui-header .ui-alt-icon.ui-nodisc-icon.ui-btn.ui-btn-icon-notext {
background-color: transparent;
border-color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<div class="ui-noboxshadow">
Menu
</div>
<h1>Header</h1>
</div>
<div role="main" class="ui-content">
Shadow, disc: <a href="#" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-icon-notext ui-btn-inline ui-alt-icon ui-icon-bars" >Menu</a>
<br>
Shadow, no-disc: <a href="#" class="ui-btn ui-btn-corner-all ui-shadow ui-nodisc-icon ui-btn-icon-notext ui-btn-inline ui-alt-icon ui-icon-bars" >Menu</a>
<br>
No-shadow, no-disc: <a href="#" class="ui-btn ui-btn-corner-all ui-nodisc-icon ui-btn-icon-notext ui-btn-inline ui-alt-icon ui-icon-bars" >Menu</a>
<br>
</div>
</div>
</body>
</html>
To clarify my answer, please note: You don't need to add an extra div to Your markup, it is just enough that Your buttons are inside a container with the class .ui-noboxshadow. For instance, You can add the class to the header. So, this will achieve the same result:
<div data-role="header" class="ui-noboxshadow">
Menu
<h1>Header</h1>
</div>
I am new to JQueryMobile... I am trying get this sample code to open another popup from within an open popup using JQueryMobile and I am failing. The first link works, but the one within the popup does not. I am also open to suggestions on a better way I should be doing this.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/mobile/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="jquery/jquery-2.0.3.js" ></script>
<script type="text/javascript" src="jquery/mobile/jquery.mobile-1.4.2.js" ></script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 585px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 585px;
}
</style>
</head>
<body>
<div data-role="page" style="max-height:590px; min-height:590px;">
main menu
<div data-role="popup" id="mainMenu" data-overlay-theme="a" data-theme="a" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
settings
<div data-role="popup" id="settingsMenu" data-overlay-theme="a" data-theme="a" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
Cancel
Delete
</div>
</div>
</div>
</body>
</html>
Update:
Alright, I do not like the solution on the duplicate question, is there a different way I could go about doing this in JQueryMobile to do something similar, maybe just using pages but theming them as the popup?
You can open a popup within a popup is possible is Jquery mobile. Check the below one to get popup within a popup.
Open poup 1
<div data-role="popup" id="expensePopup" data-dismissible="false"> Close
<div> <div data-role="header">
<h3>popup1</h3>
</div>
Open popup 2
</div>
<div id="pagetwo" data-role="popup">
<a data-role="button" data-theme="a" data-icon="delete" class="ui-btn-left" data-iconpos="notext" onclick="closePopup();"></a>
<div data-role="header">
<h3>I'm A popup2!</h3>
</div>
<div data-role="main" class="ui-content">
<p>The dialog box is different from a normal page.</p>
</div>
</div>
<div>
function closePopup(){
$("#pagetwo").popup("close");
$("#expensePopup").popup("open");
}
See this fiddle Demo
I am using jQuery mobile 1.3 for my app in phonegap. I would like to implement the left slide menu like facebooks's app. I have fixed header with data-position="fixed". When I open the app in chrome it works. When I open the App in phonegap it doesn't works, because the fixed header is not moving to the right.
Some solutions to fix this?
EDIT:
Here is very simple example code:
<!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.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 435px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 435px;
}
.ui-content{
padding:10px 15px 0px 15px;
}
.panel-content { padding:15px; }
#myhdr.ui-panel-content-fixed-toolbar-position-left {
border:1px solid red;
}
</style>
</head>
<body>
<div data-role="page" style="max-height:440px; min-height:440px;">
<!-- defaultpanel -->
<div data-role="panel" id="defaultpanel" data-theme="b">
<div class="panel-content">
<ul data-theme="d" data-icon="false" data-divider-theme="d" data-inset="false" data-filter="true" data-filter-placeholder="keywords" data-role="listview" style="overflow:auto; height:200px;">
<li><a data-rel="close"><img src="images/icon.png" class="ui-li-icon" />close</a></li>
</ul>
</div><!-- /content wrapper for padding -->
</div><!-- /defaultpanel -->
<div data-role="header" data-position="fixed" id="myhdr">
<h1>Panel Demo</h1>
</div>
<div data-role="content">
Default panel
</div>
</div>
</body>
</html>
I am working with Cordova 2.2.0, but I have tested it now with Cordova 2.9.0 and it is the same situation. Somehow the browser in Phonegap doesn't apply some style to the fixed header.
Thanks
Nik
This solution is working for me, I am talking about Android hybrid app made in Phonegap.
Working jsFiddle example: http://jsfiddle.net/Gajotres/PMrDn/56/
<div data-role="page" id="index">
<div data-role="panel" id="mypanel" data-position="left" data-display="push">
<a data-role="button">Some button</a>
</div>
<div data-theme="b" data-role="header">
Open panel
<h1>Index page</h1>
</div>
<div data-role="content">
</div>
</div>
What you require is data-display="push" attribute inside your panel. It will successfully push fixed header to the right. This works on Android 3+ and it will not work on Android 2.X, but this is not jQuery Mobile fault.
You either need to turn on hardware acceleration in the android manifest.xml file, or you need to turn transforms off.
I was able to do this with the following..
$(document).bind("pagebeforeshow", function(event, data) {
// this doesn't seem to turn off animations
//$(".ui-panel-menu").panel("option", "animate", false);
// this does turn off animation
$(".ui-panel-animate").removeClass('ui-panel-animate');
});
I'm experiencing the same issue in Android 4.1.2 and here's what I did to resolve the issue.
I added this code in my stylesheet
.ui-header.ui-panel-open {
top:-1px;
position:absolute;
bottom: auto;
}
and this script on my app.js
$( '.ui-panel' ).on( "panelbeforeopen", function( ) {
$('.ui-header.ui-header-fixed').addClass('ui-panel-open');
} );
$( '.ui-panel' ).on( "panelclose", function( ) {
$('.ui-header.ui-header-fixed').removeClass('ui-panel-open');
} );
and set data display of my panel to push ( data-display="push" )
I am learning jQuery Mobile building the simplest single page template application: main page and a little form.
In this form I have a single text field that I want to be required.
Here's my link to the form page:
Form
In the form page I have all the key elements: the jquery validation plugin (and jquery before it, of course), the validation script, the mandatory field and the submit button:
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#field").validate();
});
</script>
<input type="text" id="field" name="field" class="required" required>
<input id="submit" class="submit" type="submit" value="Inserisci" data-theme="a"/>
If I get in the form page using the normal link the validation won't happen (simple page reload because my form action is not yet set).
If I change my form link to:
<a href="form.html" data-ajax=false>Form</a>
The validation works and tells me to insert my data in the mandatory field.
But, even if insert data, it'll keep on asking me to insert it without submitting the form.
I really can't understand what I'm doing wrong...
After the 1st suggestion I've kept on reading and I've updated my code with this example: http://jquery.bassistance.de/validate/demo/jquerymobile.html and the problem is now that I am forced to refresh the form page to see the validation working. If I use data-ajax=false on the link that leads me to the form then validation is always perfectly working.
Update:
to be sure that everything is "as vanilla" as possible I got the main template from jquery documentation as starting page, my index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="cruscotto">
<div data-role="header" id="header">
<h1>page</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="a">
<li>
Inserimento clienti
</li>
<li>
Ricerca clienti
</li>
<li>
Gestione pagamenti
</li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<div class="ui-bar">
Torna su
</div>
</div>
</div>
</body>
</html>
And then I got a perfectly working form from a tutorial, my inserisci_clienti.html page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<style type='text/css'>
label.error {
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
#media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
#media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
em { color: red; font-weight: bold; padding-right: .25em; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$( "#frmLogin" ).validate({
submitHandler: function( form ) {
alert( "Call Login Action" );
}
});
});//]]>
</script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" id="login">
<div data-role="header">
<h1>Acme Corporation</h1>
</div>
<div data-role="content">
<form id="frmLogin" class="validate">
<div data-role="fieldcontain">
<label for="email"><em>* </em> Email: </label>
<input type="text" id="email" name="email"
class="required email" />
</div>
<div data-role="fieldcontain">
<label for="password"><em>* </em>Password: </label>
<input type="password" id="password" name="password"
class="required" />
</div>
<div class="ui-body ui-body-b">
<button class="btnLogin" type="submit"
data-theme="a">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
Needless to say it's working only if I reload the form page after loading it or if I put data-ajax=false OR rel="external" on the link that leads to the form (losing jQuery animations)
I am going mad :(
This the proper use of jQuery.validate in jQuery Mobile.
$(document).on('pageinit', function () {
$(form).validate({ // or form #id
rules: {
field: "required" // field name not #id and has class="required
},
submitHandler: function (form) {
alert('data submitted');
return false;
}
});
});
The validation should be applied on the form not in the input .Try the following :
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#myForm").validate(); // applying the validation on myForm
});
</script>
<form id="myForm">
<input type="text" id="field" name="field" class="required" required>
<input id="submit" class="submit" type="submit" value="Inserisci" data-theme="a"/>
<form>
for more infos : http://docs.jquery.com/Plugins/validation
I am trying to get modal data-dismiss action working to close the modal on click. There seems to be an issue that I cannot find documented and hopefully someone here can shed some light on it. Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title> Modal test </title>
<link href='themes/default/bootstrap/css/bootstrap.css' rel='stylesheet'/>
<link href='themes/default/bootstrap/css/bootstrap-responsive.css' rel="stylesheet"/>
</head>
<body>
<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<div class="alert alert-block">
<a class="close" data-dismiss="alert" href="#">x</a>
<h4 class="alert-heading">Warning!</h4>
Best check yo self, you're not...
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="themes/default/bootstrap/js/bootstrap.js"></script>
</body>
</html>
is the full suite of bootstrap including bootstrap-modal.js
I put in the <div class="alert alert-block"> for testing the action, it seems to work in the alert but not the modal!
add this code please:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal(); // initialized with defaults
$('#myModal').modal('show'); // open your modal dialog
});
</script>