I want to open a dialog in combination with touchOverflowEnabled: true.
The problem is the following:
The dialog is coming up properly but after a couple of milliseconds, the background below the dialog turns from black into white; the page seems to shrink.
Furthermore, the checkboxes on the main page are smaller; they do not fit the complete page from left to right.
If I do not use touchOverflowEnabled: true everything works well.
Any ideas, how to solve this problem??
Here's my complete sample code (the html-tags are missing):
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="images/icon.png" />
<link rel="apple-touch-startup-image" href="images/tablet_startup.png">
<link rel="stylesheet" href="css/black-tie/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" href="css/jquery-mobile/jquery.mobile-1.0.css" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
touchOverflowEnabled: true,
defaultDialogTransition: 'pop',
orientationChangeEnabled: false
})
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
</head>
<body>
<!-- Begin objective page -->
<section id="questions_objectives" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Goals</h1>
</header><!-- /header -->
<div data-role="content">
<form id="f_objectives">
<h3>Personal Goals</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="o_1" id="o_1">
<label for="o_1">Goal 1</label>
<input type="checkbox" name="o_2" id="o_2">
<label for="o_2">Goal 2</label>
<input type="checkbox" name="o_3" id="o_3">
<label for="o_3">Goal 3</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
<footer data-role="footer" data-id="pluginFooter" data-position="fixed">
<div align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
Abmelden
</div>
</footer><!-- /footer -->
</section><!-- /page -->
<!-- End objective page -->
<!-- Begin logout page -->
<section id="logout_panel" data-role="dialog">
<header data-role="header">
<h1>Logout</h1>
</header><!-- /header -->
<div id="section_logout" name="section_logout" data-role="content">
<h3>Would you like to receive emails?</h3>
<form id="logout_form">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="logout_yes" id="logout_yes" checked="checked" onchange="setLogoutCB('YES')">
<label for="logout_yes">Yes</label>
<input type="checkbox" name="logout_no" id="logout_no" onchange="setLogoutCB('NO')">
<label for="logout_no">No</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
<footer data-role="footer">
<div id="btn_logout" align="center" data-role="controlgroup" data-iconpos="top" data-type="horizontal">
Logout
</div>
</footer><!-- /footer -->
</section>
<!-- End logout page -->
</body>
i would recommend u not to use touchOverflowEnabled anymore. It has its own issues and it wont even be there in jquery mobile from the version 1.1
its going to be deprecated.
there,
In my opinion all your problems come from the jQuery version that you have been using - 1.7
According to the JQM blog
Reminder: 1.0 supports jQuery core 1.6.4 only
Since 1.7 was just recently released and has some significant changes (and improvements), only 1.6.4 is officially supported at this time. We plan on adding 1.7 support when we release version 1.1.
When I use touchOverflowEnabled with 1.6.4 there seems to be no problems as you explained above.
There is still a small bug with iPad and touchOverflowEnabled - the dialog is only half page height but this is also easy fixed with single line of css
.ui-mobile [data-role="dialog"]{height: 100%;}
I hope all this is useful :)
Best Regards,
Mihail
Related
I am trying to create a jQuerymobile app with a Nav Bar with Multiple Pages in single index.html. I am using the template Multi-page template structure
Unfortunately, I cannot get the nav bar to show different pages. Here is my code:
I did also use a script 'pageLoader.js' to force loading the pages. But that does not work either. Here is my pageLoader.js:
<!doctype html>
<html>
<head>
<title>My Page</title>
<!--https://jquerymobile.com/download/-->
<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>
</head>
<body>
<!--POST page 1-->
<div data-role="page" id="postPage">
<div data-role="header">
<h1>I'm a header</h1>
<div data-role="navbar">
<ul>
<li>POST</li>
<li>GET</li>
<li>PUT</li>
<li>DELETE</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div role="main" class="ui-content">
<label for="key">key:</label>
<input type="text" name="key" id="key" placeholder="enter your key" value="" data-clear-btn="true">
<label for="value">value:</label>
<input type="text" name="value" id="value" placeholder="enter your value" value="" data-clear-btn="true">
<button onclick="saveValue()"> Store Key</button>
<p id="status">Status: No Activity</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
<!--get Page 2-->
<div data-role="page" id ='getPage'>
<div data-role="header">
<h1>I'm a header</h1>
<div data-role="navbar">
<ul>
<li>POST</li>
<li>GET</li>
<li>PUT</li>
<li>DELETE</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div role="main" class="ui-content">
<label for="key">key:</label>
<input type="text" name="key" id="key" placeholder="enter your key" value="" data-clear-btn="true">
<button onclick ="getValue()"> Get Value</button>
<p id="status">Status: No Activity</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script src="scripts/client.js" type="text/javascript"></script>
<script src="scripts/pageLoader.js" type="text/javascript"></script>
</body>
</html>
I also tried to use a script to enforce change of pages. I used the pageLoader.js script with following content:
$(document).on("pageshow", function(){
if($('.ui-page-active').attr('id') === 'postPage'){
$.mobile.changePage("#postPage");
} else if ($('.ui-page-active').attr('id') === 'getPage'){
$.mobile.changePage("#getPage");
}
});
Any help would be greatly appreciated.
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/
I am creating a SPA ios application using phonegap and having some issue with Jquery mobile the lastest version (1.4.0). The pages do not fit to the screen of the iphone but they appear one after another and I can scroll down to view all my pages ! (possibly data-role = "page" is not working correctly. Can anyone shed a light on this. Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>App Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->
<link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
<script src="phonegap.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/soapclient-1.2.js"></script> <!-- for soap v1.1 use js/soapclient.js -->
<script src="js/EmailComposer.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/jquery.alerts.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/touchable.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/date.js"></script>
<script src="js/moduleScripts/timetoport.js"></script>
<script src="js/moduleScripts/imageslogic.js"></script>
<script src="js/moduleScripts/loadingScript.js"></script>
<script src="js/moduleScripts/LoginController.js"></script>
<script src="js/moduleScripts/kmlMap.js"></script>
<script src="js/moduleScripts/tools.js"></script>
<script src="js/moduleScripts/dataService.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
<script>
$(document).ready(function() {
InitializeLoginScreen();
CheckDisclaimer();
});
$("#discpage1").live("pageshow",function() {
$("#agree").click(function() {
localStorage.setItem('disclaimerAccepted', true);
tools.GoForward("#loginPage");
});
$("#disagree").click(function() {
localStorage.setItem('disclaimerAccepted', false);
navigator.notification.alert('To ccontinue you must accept the Disclaimer', null, '', 'OK');
});
});
$(document).delegate(".scroll-disabled", "scrollstart", false);
</script>
</head>
<body id="boddy">
<!-- LOGIN PAGE -->
<div data-role="page" id="loginPage" class="scroll-disabled">
<div data-role="header" class="header" >
<div id="LoginHeader" class="headerText">Login</div>
</div>
<div data-role="content">
<div>
<img src="images/shiplogo.png" id="logobspt">
<label id="ship2Go">Ships to go</label>
</div>
<div id="loginContainer">
<div>
<label for="uid" id="uidLabel">Username</label>
<input type="text" value="test" name="uid" id="uid" placeholder="Enter username" />
</div>
<div id="loaderdiv" style="height:50px;width:100px;padding:5px;margin-left:87px;margin-top:-12px;display:none;">
<img src="images/loading3.gif" id="loadingimg" style="margin-left:30px;">
<div id="loadingMsg">
<center >Please wait...</center>
</div>
</div>
<div>
<label for="pwd" id="pwdLabel">Password</label>
<input type="password" value="test" name="pwd" id="pwd" placeholder="Enter password"/>
</div>
</div>
<div class="Button" id="loginButton">Login</div>
<div data-role="footer">
<div id="envLabel"></div>
</div>
</div>
</div>
<!-- DISCLAIMER PAGE -->
<div data-role="page" id="discpage1" class="scroll-disabled">
<!--<div id="dleftpanel"></div>
<div id="drightpanel"></div>-->
<div id="dcontent">
<div id="bplogo"></div>
<div id="shiplogo"></div>
<div id="discHeading">Disclaimer</div>
<div id="agree" class="Button discButton">I have read and I agree</div>
<div id="disagree" class="Button discButton">Disagree</div>
</div>
</div>
</body>
</html>
Whenever this happens to me (as - I admit - it does from time to time), it is ALWAYS that the CSS file for jQuery Mobile is missing, linked to the wrong path, or I have a typo (used a "dot" instead of a "dash" more often than not).
Any chance that could be it?
A quick way to check is to open up the file you pasted in above in Chrome (or whatever) and look at the debug console for any messages throwing a fit about the CSS file.
Has anyone ever run into the problem of not neing able to type in spaces when using a text input type in jquery-mobile
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<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>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css"/>
<link rel="stylesheet" type="text/css" href="mobile-css.css"/>
</head>
<body>
<div data-role="dialog" data-theme="d">
<div data-role="header" data-theme="d"><h5 style="margin: 0.6em 10% 0.5em;">Comment</h5></div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
Try this simple example (tested on iPhone 5), which uses the latest version of jQuery Mobile at the moment (1.2.0), and let me know if this works:
<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/jquery.mobile.structure-1.2.0.min.css" />
<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.1.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" data-position="fixed">
<h1>HEADER</h1>
</div>
<div data-role="content">
<h1>my content</h1>
<input type="text"/>
<a data-role="button" href="#mydialog" data-rel="dialog">OPEN DIALOG</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>FOOTER</h1>
</div>
</div>
<!-- YOUR DIALOG -->
<div data-role="dialog" data-theme="d" id="mydialog">
<div data-role="header" data-theme="d">
<h5 style="margin: 0.6em 10% 0.5em;">Comment</h5>
</div>
<div id="" data-role="content" data-theme="d">
<label for="txtComment">Your Comment:</label>
<input type="text" id="txtComment" data-theme="d">
</div>
<div data-role="footer" data-theme="d">
<a href="#" data-role="button" data-mini="true" data-inline="true" data-transition="fade"
class="cancelButton" data-theme="c" data-rel="back">Cancel</a>
Save
</div>
</div>
</body>
</html>
You should get the following:
Try typing spaces in the input textbox:
Then, click on the button OPEN DIALOG, which will lead you to your dialog box (the code you provided), and try inputting spaces inside the dialog's input textbox:
I hope this will work for you. Anyway, let me know about your results mate.
I have a page with a slider that is connected to a deepzoomable image. That slider uses the jQuery slider plugin and now I would like to make that slider mobile friendly.
I started with just adding a static mobile slider. I added the jQuery mobile css and js and inserted the input[type="range"] as such:
<input type="range" id="zoomRange" value="25" min="0" max="100" />
I did not add a label since I've found it is not absolutely necessary.
And the outputted code in the DOM is as follows:
<input type="number" data-type="range" max="100" min="0" value="25" id="zoomRange"
class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-input-text ui-body-c ui-shadow-inset">
Is anyone familiar with what is going on here?
From the jQueryMobile docs
The framework will find all input elements with a type="range" and
automatically enhance them into a slider with an accompanying input
So what you see is perfectly normal.I assume you want to get away with that spinner and just have the slider alone.You can do it in two ways.
1) Use data-role="none" with the input type.This will tell the jQuery Mobile framework not to enhance the input type and it will look like a plain html slider.
2) Hide the spinner by manipulating the CSS.
I think point no. 2 will do the trick for you.
Here is a sample code that illustrates what I am talking.
<!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.0/jquery.mobile-1.0.min.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
</script>
<script type="text/javascript" src=
"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">
</script>
<style type="text/css">
#slider-2{
display:none;
}
</style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page1</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<div data-role="fieldcontain">
<label for="slider-0">jQueryMobile Default</label> <input type="range" name=
"slider" id="slider-0" value="25" min="0" max="100">
</div>
<div data-role="fieldcontain">
<label for="slider-1">data-role='none'</label> <input type="range" name="slider"
id="slider-1" value="25" min="0" max="100" data-role="none">
</div>
<div data-role="fieldcontain">
<label for="slider-2">Spinner hidden</label> <input type="range" name="slider"
id="slider-2" value="25" min="0" max="100">
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle.net/2SXV6/
Let me know if that help