At the moment my mobile app looks similar to the one on the link below:
http://jsfiddle.net/TM6Dt/
with the following code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
Mail
Settings
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
What I'd like to do is have both of the circular buttons on the right side of the header bar. I've tried putting them in a controlgroup div but for some reason this changes them so they are no longer circular - I get square buttons with the icons in the middle. What's worse is they are not even aligned properly! You can see what I mean here:
http://jsfiddle.net/Gd8ZB/
and the code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
<div data-role="controlgroup" class="ui-btn-right">
Mail
Settings
</div>
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
How do I get around this problem? Any help would be appreciated!
I've done that as follows:
<div class="ui-btn-right">
Mail
Settings
</div>
Fiddle
http://jsfiddle.net/TM6Dt/1/
one way to do it is to change position of the first button in first example and move it to the right with following css
style="right: 40px; left: initial;"
Related
I'm a touch lost - I have taken a popup example from the jquery demo page as a template...
If I put my popup within the first page, it works - I can call it from within js script to open.
Thus... the following does work
<div data-role="page" class="page" id="Menu">
<div data-role="header" data-position="fixed" class="ui-title center">
<div data-role="controlgroup" data-type="horizontal">
<span class='htitle'>Barserver.com</span>
</div>
</div>
<div id="MainContent">
<div id="MenuList"></div>
</div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div role="main" class="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>
</div>
I can dynamically open it via
$("#popup").popup("open");
However if I move the popup to another (data-role) page within the same document, it does not get displayed, nor errors in console.log. Can anyone steer me forward? The following does NOT work...
<div data-role="page" class="page" id="OrderList">
<div data-role="header" data-position="fixed" class="ui-title text-center">
<div data-role="controlgroup" data-type="horizontal">
<span class='htitle'>Barserver.com</span>
</div>
</div>
<div id="OrderListContent" class="productdhtml ui-content"></div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div role="main" class="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>
</div>
</div>
To avoid misunderstanding - the first code sample works, the second one does not work (meaning no errors, no modal like dialog box gets displayed).
Why?
(All help appreciated of course)
I got it (thanks to #Omar for direction). A coded answer is not easy but I will try draft and share in a few days (I'm behind on my work because of trying to fix this problem).
For the purpose of this note, when I say "this failed" I mean "no popup, no change in address bar, no console error."
I have a form. If operator attempted to navigate away, a test should be done to confirm all data was entered. All my a-href tags had page references, and jquery gives precedence to a-href tags over any other events I had applied. I had not considered the ramifications of this. The result? Form displayed, incompletely filled, operator selects to navigate elsewhere, popup call starts/ends but "failed" and jquery quickly navigates to the page named in the a-href page.
Solution:
When using popups, do not name pages in a-href tags. Thus, when using popups, avoid
<a href='#Page5'>Page 5</a>
and instead
<a href='#' id='page5'>Page 5</a>
and create an event that decides if a popup should be displayed, or if not, that page5 should be navigated to.
I hope that makes sense.
I am having a problem getting a simple header message to show up while using Jquery mobile 1.4.2. The message shows on page load then quickly disappears. I cannot figure out what is hiding the message from displaying. Weirdly enough, when I delete the 'panel' from the page the message shows, however I need the panel for the functionality of the page. Also, while messing around with the Jsfiddle I noticed that earlier versions of JQM displayed the message properly. Thanks
Jsfiddle is http://jsfiddle.net/sAKq5/
<div data-role="page" id="pager">
<div data-role="panel" id="addpanel" data-position="right" data-animate="false">
</div>
<div class="header" data-role="header">
</div>
<div data-role="main" class="ui-content">
<h3>Your Table </h3>
<table id="xx">
</table>
<ul id="xxx">
</ul>
</div>
<div class="actionMsg">
<h5> Message holder at length </h5>
</div>
<div class="footer" data-theme="a" data-role="footer" data-position="fixed" class="actionMsg">
<h2>
Powered by
</h2>
</div>
</div>
Adding in the line
z-index: 1000;
into the css allows the message to be shown. If z-index is less than 1000, message still is not shown.
I'm using jQM popup to 'alert' users of something. For example, I make a $.ajax() request and if there's something wrong with the response I shoot a popup.
Something like this:
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
</div>
$("#popupMsg").html(msg);
$("#popup").popup({
history:false,
overlayTheme: "a"
}).popup('open');
It all works fine, but If I change the popup to include a button, this way:
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
Then the link is not styled, and it will just show an 'Ok' link.
If I move the popup to a dialog then it all works, button and all, but since I want the page underneath to be seen, I'd like to keep it a popup.
Am I missing something? I saw a lot of questions about popups/dialogs, but they all refer to clicking a button to show them.
I use jquery-1.8.2 and jquery.mobile-1.2.0.
Edit: the solution to my case is that the popup div must go inside the page div, and not outside of it (as a dialog div would), like this:
Before (wrong):
<div data-role="page">
<div data-role="content">
...page stuff...
</div>
</div>
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
After (right):
<div data-role="page">
<div data-role="content">
...page stuff...
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
</div>
</div>
You need to refresh the jQM markup
http://jsfiddle.net/xvvCA/1/
http://jsfiddle.net/xvvCA/ ( inline button )
JS
var msg = 'Look! A new button!';
$("#popupMsg").html(msg);
$("#popup").popup({
history:false,
overlayTheme: "a"
}).popup('open');
$('#okButton').button('refresh'); // you need to refresh jQM markup
HTML
<div data-role="page">
<div data-role="content">
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
</div>
</div>
I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
<!--Safety Home Page Starts Here -->
<div data-role="page" id="safety_home" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topics</li>
<li>Report</li>
</ul></div>
</div>
<div data-role="content" data-theme="c">
<p>Home</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
</div>
<!--Safety Home Page Ends Here -->
<!--Safety Topic Page Starts Here -->
<div data-role="page" id="safety_topic" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topic</li>
<li>Report</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Topics Page Ends Here -->
<!--Safety Incidents Page Starts Here -->
<div data-role="page" id="safety_report" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topics</li>
<li>Report</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Incident Page Ends Here -->
Yeah your second and third page has no closing </div> tag. You may want to try and use validators to help spot issues like this. Here is the type of thing that you see when you run your code through a validator.
Line 38, Column 56: Unclosed element div.
<div data-role="page" id="safety_report" data-theme="c">
Line 20, Column 55: Unclosed element div.
<div data-role="page" id="safety_topic" data-theme="c">
HTML5 Validators
http://validator.w3.org/
http://html5.validator.nu/
I hope this helps.
Please help,
jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.
<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
Try adding to the anchor the attribute rel="external".
Example:
Description
try giving <div data-role="page" first for your second page
When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!
Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.
Try linking to this page with an external link and you'll find it works fine.