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>
Related
single tap produce popup appearing and beside "cancel" button I put also button for function call. I thought that's enough to put just one "close" to close popup but I needed twice in order to close it. Did I miss something or I must write it on this way in this case?
<div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="b">
<h1 id='h1pop'>Tap PopUp</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Single tap</h3>
<p>This is a popup...</p>
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">Call function</a>
Cancel
To Page 2
</div>
</div>
function myfunction() {
$("#popMe").popup("close");
$("#popMe").popup("close");
alert('Here I'm, in the function');
// ... rest of code
}
Here is a snippet which should work for you:
function myfunction() {
$("#popMe").popup("close");
console.log("Here I'm, in the function");
// ... rest of code
}
<!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.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
PopMe
</div>
<div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="b">
<h1 id='h1pop'>Tap PopUp</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Single tap</h3>
<p>This is a popup...</p>
<button class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">myFunction</button>
Cancel
To Page 2
</div>
</div>
</div>
</body>
</html>
Please note: if you need a CDN, i would suggest you to use the jQuery Mobile libraries from code.jquery.com
Moreover:
IMHO Popups works well if you need to display small menus or text-only hints, but if you need also form elements or some complex user interaction, i believe a page widget with the dialog option it would be a better choice. Here is a reference: JQM Dialog Pages.
Just a little additional hint: to trace your function execution, try to use the console instead of window.alert, and pay attention how you are enclosing strings.
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.
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 would like my header and footer to be accessible when a page has an overlay due to a popup menu (as seen on http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html).
So in a nutshell, only the div with attribute 'data-role=content"' should have the overlay applied.
If possible, this should be achieved using a minimum of extra CSS and/or JavaScript. I've looked through the entire jQuery Mobile docs, but haven't found any reference to my problem.
Some code:
<!DOCTYPE html>
<html>
<head>
<title>Context Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Header</h1>
</div>
<div data-role="content">
Menu
<div data-role="popup" id="popupMenu" data-overlay-theme="b">
<ul data-role="listview" data-inset="true" style="width: 200px">
<li>Add</li>
<li>Edit</li>
<li>Manage</li>
<li>Delete</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
So in this exmaple, the header and footer shouldn't be overlayed when the Menu link is clicked.
The z-index css property allows you to set the way the different "layers" of your page are superposed. A fixed header in jquery mobile has a z-index of 1000.
By setting the z-index of your overlay to a value below 1000, it will be displayed "under" the header.
I have a right log off button in my header on each page which is defined this way:
<div data-role="page" id="displaySchedule" data-title="Display Schedule">
<div data-role="header" data-theme="a">
<h1>Schedule</h1>
<div class="ui-btn-right">
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
.....
This worked fine in 1.1.1. However, when the page is displayed in 1.2.0-Beta-1, the header looks like the following (notice the X icon is below the horizontal line (by about 1/2 of its height) of the home button and the word Schedule). In 1.1.1, all three were lined up correctly.
Any help is, of course, appreciated.
In fact, you shouldn't include your right button inside a div.
Have a try:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="displaySchedule" data-title="Display Schedule">
<div data-role="header" data-theme="a">
<h1>Schedule</h1>
<a class="logoffButton" data-role="button" id="logoffButton"
href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
</div>
</body>
</html>
If you want to add multiple aligned buttons within the header, you can do the following:
Include the class class="ui-btn-right" (or class="ui-btn-left") to your button / link <a> for the buttons which will be positioned at the right (left) side of the header title
Play with CSS's margin-right and / or margin-left to separate the different buttons from a same side (right / left); otherwise, the buttons will be stacked together.
Here's a simple example including several buttons:
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1">
<div data-role="header" data-theme="a">
<!-- 1st LEFT BUTTON FROM THE LEFT -->
<a href="#" data-icon="arrow-l" data-iconpos="notext"
class="ui-btn-left"></a>
<!-- 2nd LEFT BUTTON FROM THE LEFT -->
<a href="#" data-icon="arrow-r" data-iconpos="notext"
class="ui-btn-left" style="margin-left: 30px"></a>
<!-- HEADER TITLE -->
<h1>hello</h1>
<!-- 1st RIGHT BUTTON FROM THE RIGHT -->
<a href="#" data-icon="gear" data-iconpos="notext"
class="ui-btn-right"></a>
<!-- 2nd RIGHT BUTTON FROM THE RIGHT -->
<a href="#" data-icon="arrow-r" data-iconpos="notext"
class="ui-btn-right" style="margin-right: 30px;"></a>
<!-- 3rd RIGHT BUTTON FROM THE RIGHT -->
<a href="#" data-icon="arrow-l" data-iconpos="notext"
class="ui-btn-right" style="margin-right: 60px;"></a>
</div>
</div>
</body>
</html>
Here's a screenshot of the example above:
In portrait mode:
In landscape mode: