I'm working on my first app in jQuery Mobile. I'm stuck on a select menu.
I've tried to copy/paste the "Your state" style at http://jquerymobile.com/demos/1.2.0/docs/forms/selects/custom.html and work it into my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CAST</title>
<link rel="stylesheet" href="./custom.css" />
<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>
<script src="./global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<div data-role="page" data-theme="c" id="home-page" class="type-interior" data-url="home-page">
<div data-role="header" style="background:#AAA">
<h1><img src="/logo.png" width="97" height="50" border="0" /></h1>
</div>
<h2 id="header_title"></h2>
<div id="error" class="error" style="display:none;">Could not connect to the server. Please try again.</div>
<div data-role="content">
<div class="content-primary" id="content">
<div data-role="fieldcontain">
<label for="client" class="select">Client:</label>
<select name="client" id="client" data-native-menu="false">
<option value="1">Option 1</option>
</select>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2013</h4>
</div>
</div>
</body>
</html>
The select menu shows up, but it doesn't look like the custom mobile version on their site? It just looks like a regular select menu.
I don't understand enough jquery.mobile yet to really even know how to ask this question properly... but any help getting this to work would be appreciated!
If you mean the "Your state" example looks like a dialog, showing the contents of the menu alone in the screen, you have to add more options to the select element as it is stated in the page you link:
When it has too many options to show on the device's screen, the framework will automatically create a new "page" populated with a standard listview for the options. This allows us to use the native scrolling included on the device for moving through a long list. The text inside the label is used as the title for this page.
I modified the jsfiddle provided by Omar to add more options and it looks exactly like in the original site
<Ignore>Code so I can post link to jsfiddle</ignore>
Related
I am Unable to hide the following slider using jquery mobile, here is my code
can anyone help
javascript code:
$(document).ready(function($) {
$("#d_c").hide();
}
html code:
<label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
<select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
<option value="off">No</option>
<option value="on">Yes</option>
</select>
To hide the native select element behind that nice label which looks like a Flipswitch, JQM is using absolute positioning, so you are out of luck here just because you are hiding the wrong element.
Please, let say it is somewhat unusual to hide just the Flipswitch and keep the corresponding caption visible but anyway, up to you. The solution here is to set a wrapper container and use the standard JQM class ui-screen-hidden to get the job done. You may use for that a trivial standard naming convention and attach to all your wrappers the suffix -container. Here is an example:
function toggleFlipswitch() {
$("#d_c-container").toggleClass("ui-screen-hidden");
}
$(document).on("pagecreate", "#page-one", function() {
$("#d_c-container").addClass("ui-screen-hidden");
});
<!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-theme="a" data-role="header" data-position="fixed">
Show/Hide Flipswitch
<span class="ui-title"></span>
</div>
<div data-role="content">
<div id="d_c-container">
<label for="d_c" class="containing-element5">Design & Construct Type Project:</label>
<select name="d_c" id="d_c" data-role="slider" class="containing-element3" data-mini="true">
<option value="off">No</option>
<option value="on">Yes</option>
</select>
</div>
</div>
</div>
</body>
</html>
I have two pages: Page A and Page B, built with jquery mobile. On Page A, I have a popup dialog, in which there is a menu option displaying Page B when I click on it. On Page B there is a back button leading me back to Page A when I click on it.
Here is my problem. If the users of my app decide for some reason to reload Page B and then push the back button on Page B after reloading it, the page A will change its appearance from full screen into a dialog view. I realized that this strange behavior only occurs, a) after reloading Page B and b) when calling Page B from a popup menu on Page A, as described above.
Is there a way to tell jquery mobile not to change the appearance of Page A, no matter whether or not Page B gets reloaded? Of course, as I mentioned above, calling Page B directly (and not through a popup menu) would also solve my problem, but I would like to keep my popup menu on Page A and I'm looking for a better solution.
Here is my code causing this problem:
Page A:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h2>Page A</h2>
</div>
<div data-role="content">
<a href='#popupMenu' data-rel='popup' data-transition='slideup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a'>Menu</a>
</div>
<div data-role='popup' id='popupMenu' data-theme='b'>
<ul data-role='listview' id='listview' data-inset='true' style='min-width:210px;'>
<li data-role='list-divider'>Choose an action</li>
<li><a href='pageb.html' data-rel='page'>Page B</a></li>
</ul>
</div>
</div>
</body>
</html>
Page B:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Page B</h2>
</div>
<div data-role="content">
Back
</div>
</div>
</body>
</html>
You should add data-history="false" to your popup, like this:
<div data-role='popup' id='popupMenu' data-history="false" data-theme='b'>
<ul data-role='listview' id='listview' data-inset='true' style='min-width:210px;'>
<li data-role='list-divider'>Choose an action</li>
<li><a href='pageb.html' data-rel='page'>Page B</a></li>
</ul>
</div>
This will prevent JQM to add the Popup to the history stack.
I am trying to create a mobile version of my site using JQuery Mobile. I'd like a fixed header toolbar and a fixed footer toolbar to appear on all pages. However, those portions of the page are instead being written out as simple HTML lists. Here is the relevant header code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Nightscape Creations Wallpapers</title>
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-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>
</head>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
This code is visible at www.NightscapeCreations.com on the mobile site.
It seems like the JQuery code is either not being included correctly or is not being initialized. I'm not sure if maybe I missed something obvious in the installation that I just need a second set of eyes on.
If it's relevant, the remainder of the page might be similar to:
<body>
<div data-role="page" id="home">
Some text
</div>
<div data-role="page" id="liveWallpapers">
Some text
</div>
<div data-role="page" id="products">
Some text
</div>
<div data-role="page" id="about">
Some text
</div>
<div data-role="page" id="staticWallpapers">
Some text
</div>
</body>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</html>
EDIT 1
Per a suggestion by mwfire I have moved all of my visible code inside of the body tags. A simplified version of the page is now available with this code:
<!DOCTYPE html>
<html>
<head>
<title>Nightscape Creations Wallpapers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-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>
</head>
<body>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="page" id="home1">
<div style="font-weight:bold; text-decoration:underline;">Welcome</div>
Welcome to Nightscape Creations Mobile. Here you will find animated live wallpapers, static wallpapers, and links to physical products
with the wallpaper images included. Use the header button above to browse the mobile site, or
click here to visit the main site instead.
</div>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</body>
</html>
However, this does not cause the toolbars to appear.
Actually all your HTML code belongs inside the body tag. I bet you don't see any footer as well ;)
Edit
Just to clarify, the structure is supposed to be like that:
<!DOCTYPE ...>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- All visible HTML content goes here! -->
</body>
</html>
No HTML tags should be outside the body tag (except head, body & Doctype).
You can find more on page structures here.
Edit2
In addition to this, header and footer are supposed to be inside the data-role="page" div. jQuery displays one page at a time, think of it as a single HTML page. It has to include the complete structure of a single page (if you want header and footer, of course), like:
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>
I have a site built on jQuery Mobile and am trying to get our Terms of Service to open in a dialog.
TOS page is a full page itself (separate URL) and when I link with the dialog reference it simply opens as a new page.
My footer is
<div data-role="footer" data-theme="<?php echo $dataTheme ?>">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
</div>
and my tos.php page is (content stripped for convenience)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="AXCIS Information Network">
<title>TrackMaster Terms of Service</title>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/themes/TrackMasterMobile.min.css" />
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery-current.min.js"></script>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/mobileStyle.css" />
<!-- Make sure there is a back button on each page -->
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
$.mobile.page.prototype.options.addBackBtn= true;
});
</script>
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery.mobile-current.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="main">
<div data-role="header">
<h1 class="headerLink"><span class="tmFirst">Track</span><span class="tmSecond">Master</span> </h1>
Home
</div>
<div data-role="content" data-theme="a">
<div data-role="content" class="informationText">
Blah, Blah, Blah
</div>
</div> <!-- this one closes out the content div set in the section header template -->
<div data-role="footer" data-theme="a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
<h5 class="copyrightText">© 2013 Axcis Information Network, Inc.</h5>
<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7303976721498796";
/* Mobile Bottom */
google_ad_slot = "5684536575";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div> <!-- this one closes out the page div set in the header template -->
</body>
</html>
I have tried changing the data role of the TOS page to a dialog but that made no difference.
Am I not understanding the way dialog links can be used (from the docs I thought I could open one from any URL simply by defining the link as a dialog)
Site itself is http://mobiletest.trackmaster.com and it is the Terms link in the footer I am trying to get as a dialog (I don't want to include the content on every page, only when the user asks for it)
Any help appreciated (even pointing out the dumb things I am missing)
You are either missing a <div> or they don't match up; you've got two "content" divs.
EDIT: It's probably OK to have one within another, just noting that the <div data-role="page"> is never closed. Don't know if that makes any difference.
Found the issue.
The line in the header
$.mobile.ajaxEnabled = false;
I commented it out and the dialog link works as expected.
was the problem, I am testing it to see what else gets broken when I pull it out :-).
Data role for the TOS page is NOT relevant as loading it as a dialog automatically assigns the dialog data role
I'm trying to create a simple widget using jQuery mobile. I have a button, and when I click on that button, I want a dialog to appear that will display a date submission form. I defined a div in my html like this:
<div data-role="dialog" id="DatePage" >
<div data-role="content">
<form>
<input type="date" name="date" />
<input type="submit"/>
</form>
</div>
</div>
Now, in order to make this dialog appear when I click a button, I've been trying to use the following line of code:
$.mobile.changePage("#DatePage");
However, when I do this, nothing happens. I've tried adding other arguments and using different variations, but nothing works. From what I've read elsewhere, and from the examples I've seen, this line should show me the dialog, but it simply doesn't. What am I doing wrong?
use this snippet
<button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>
to open your dialog with a button, see working example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<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>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div><!-- /header -->
<div data-role="content">
<button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>
</div>
</div><!-- /page -->
<div data-role="page" id="DatePage">
<div data-role="content">
<h1>My Dialog</h1>
<form>
<input type="date" name="date" />
<input type="submit"/>
<button data-rel="back">Close Dialog</button>
</form>
</div>
</div><!-- /page -->
</body>
</html>
In my final solution the dialog was triggered by the following code snippet:
$.mobile.changePage('#DatePage', {transition: 'pop'});
The problem with the dialog being shown only on the first click on the button appeared because the front page was never shown again after the dialog was shown the first time and any of the two button was clicked the dialog disappeared. The page could be seen because it was the dialog's background, but it was actually never there. In order to avoid the problem, I used the following code snippet:
<!-- The popup dialog for date selection -->
<div data-role="page" id="DatePage">
<div data-role="content">
<form id="DateSubmissionForm">
<input type="date" name="date" />
Submit
Cancel
</form>
</div>
</div>
The 'submit' and 'cancel' buttons are actually links back to the front page. With this code, the front page is really shown again and the button is again clickable.