Good afternoon ...
My problem is this (link to issue image).
When using, for example, a COLLAPSIBLE control, this adds me a higher or lower margin.
I see no statement on the same CSS to display as well.
The code is nothing strange.
Appears well in the pages of demonstrations or others pages. This happens to me on multiple browsers including Chrome and Firefox only with my page.
Thanks for your help and sorry my English.
jQueryMobile version 1.4.5.min
jQuery version 1.11.2.min
<!doctype html>
<html>
<head>
<title>Documento sin título</title>
</head>
<meta name="viewport" content="width=device-width, initial-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.2.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" data-theme="b" data-content-theme="b">
<div data-role="header">
<h1>Definición de Formulario</h1>
<input type="text" placeholder="Nombre del formulario" value="" id="nombremapa" name="nombre" />
</div><!-- HEADER -->
<div data-role="content" data-position="fixed" id="campos">
</div><!-- CONTENT -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar" >
<ul>
<li>Agregar</li>
<li>Quitar</li>
<li>Editar</li>
<li>Información</li>
<li>Enviar</li>
</ul>
</div>
<div data-role="popup" id="popupMenuAgregar" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose an action</li>
<li><a id="add_texto">Texto</a></li>
<li><a id="add_numero">Numero</a></li>
<li><a id="add_fecha">Fecha</a></li>
<li><a id="add_lista">Lista</a></li>
</ul>
</div>
</div><!-- FOOTER -->
</div><!-- PAGE -->
</body>
</html>
http://jsfiddle.net/zwLvjrc2/
Related
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 an application in which i'm using jquery-mobile which has a header and it has 2 buttons "home" and "back" and when i click on back button it should terminate the page and should go back but this is not happening. Can anyone please help me how to make this possible with jquery mobile back button.
My code:
<div id="home" data-role="page">
<div data-role="header" data-position="fixed" data-add-back-btn="true">
<a id="backBtn" href="#" data-icon="arrow-l">Back</a>
<h1>SDCard Explorer</h1>
<a id="homeBtn" href="index.html" data-icon="home" data-transition="pop">Home</a>
</div>
</div>
And here are the jquery libraries which i used:
<href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<src="jquery.mobile-1.0.1.min.js" />
<src="http://code.jquery.com/jquery-1.7.1.min.js" />
Hi you can try this:
<!DOCTYPE html>
<html>
<head>
<!--here links to the jQuery Mobile Library -->
</head>
<body>
<div id="Page" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
Back
<h1>Tite</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--here links to the jQuery Mobile Library -->
</head>
<body>
<div id="Page" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
Back
<h1>Tite</h1>
</div>
</div>
</body>
</html>
here the function in the JS File
function GoBack(){
history.go(-1);
}
it should work in the art
I am currently doing some development for Windows Phone 7 using phonegap+jquery mobile
For some reason, Windows phone emulator included in the latest Visual Studio express could not render simple multipage app.
Anyone have some pointers on how to solve this? Thank you
below is the code. It is pretty much taken from jquery mobile documentation.
<!DOCTYPE html>
<html>
<head>
<!--
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no;" />
-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8"/>
<title>JQ Tester</title>
<link rel="stylesheet" type="text/css" href="js/jquery/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="js/jquery/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/custom-scripting.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one" data-title="Page One">
<div data-role="header">
<h1>Multi-page</h1>
</div>
<!-- /header -->
<div data-role="content" >
<h2>One</h2>
<p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
<p>
This is a multi-page single page template that has just one page within it.
</p>
<p>Just view the source and copy the code. Remember to include a meta viewport tag in the head to set the zoom level.</p>
<p>
You link to internal For example, to <a href="#two" >link</a> have a <code>href="#two"</code> in the code.
</p>
<h3>Show internal pages:</h3>
<p>
Show page "two"
</p>
<p>
Show page "popup" (as a dialog)
</p>
</div>
<!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a" data-title="Page Two">>
<div data-role="header">
<h1>Two</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>
Notice that the theme is different few <code>data-theme</code> swatch assigments here to show off how flexible it is.
</p>
<p>
Back to page "one"
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="d">
<h2>Popup</h2>
<p>
I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.
</p>
<p>
Back to page "one"
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page popup -->
</body>
</html>
The viewport is the problem here, is not the same on all plataforms and devices, for Windows Phone 7 you can try add this code to the head tag
<!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
Good Luck!
I copied your code into a new Phonegap 1.4.1 project and it worked with both jQuery 1.6.4 and 1.7.1. I'd suggest trying a different version of jQuery and/or re-installing any dependencies for the project such as the Windows Phone SDK and Phonegap template.
Can anybody help me and show me why in this code the back button is not working? I tried it on Chrome and also on Safari via Electric Mobile Simulator (http://www.electricplum.com/dlsim.html). I tried it also with the global setting with javascript ($.mobile.page.prototype.options.addBackBtn = true;).
The back button is correctly shown, but when I click/tap on the back button the page stays itself. In chrome I see that the Url of the subpage is shown (#sub-page) and after the tap on the back button the url changes back, but not the site itself.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width;initial-scale=1,user-scalable=0" />
<title>Index.Mobile</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" rel="Stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
</head>
<body>
<h2>Index.Mobile</h2>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Mobile Events</h1>
</div><!-- /header -->
<div data-role="content">
<!---- BUTTON ---->
<div>some content</div>
Next Page
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="sub-page"" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content">
<p>This is the main content</p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width;initial-scale=1,user-scalable=0" />
<title>Index.Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<h2>Index.Mobile</h2>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Mobile Events</h1>
</div><!-- /header -->
<div data-role="content">
<!---- BUTTON ---->
<div>some content</div>
Next Page
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="sub-page"" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content">
<p>This is the main content</p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
Try this...
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link