I am currently working on a web app for mobile phones and tablets and got to another problem with jquery mobile. my header is fixed to the top an i have got to lists that are under it. the left one is positioned relative the right one absolute.
the left one slips under my header. the scrolling is active, although there is no need to scroll actually.
does someone have a hint?
<div id="page" class="ui-page ui-body-c ui-page-active ui-page-header-fixed" data-role="page" data-url="page" tabindex="0" style="min-height: 491px; padding-top: 44px;">
<div id="content" class="ui-content" data-role="content" role="main">
<div class="ui-header ui-bar-a ui-header-fixed slidedown" data-role="header" data-position="fixed" data-tap-toggle="false" role="banner">
<ul id="console" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" style="width: 50%;">
<ul id="control" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" data-role="listview" style="width: 48%; position: fixed; top: 58px; right: 1%;">
</div>
</div>
EDIT:
Here you have got a print out of my firebug console:
EDIT 2:
The strange thing is the size of the html element:
You have a header at a wrong position, it should not be a part of a content:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="page" data-role="page" data-url="page" >
<div class="ui-header ui-bar-a ui-header-fixed slidedown" data-role="header" data-position="fixed" data-tap-toggle="false" role="banner">
<h3>Header</h3>
</div>
<div id="content" data-role="content">
<ul id="console" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-role="listview" data-inset="true" style="width: 50%;">
<li><a>Item 1</a></li>
</ul>
<ul id="control" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" data-role="listview" style="width: 48%; position: fixed; top: 58px; right: 1%;">
<li><a>Item 1</a></li>
</ul>
</div>
</div>
</body>
</html>
Working example: http://jsfiddle.net/Gajotres/us2w5/
Related
jquerymobile panel cross page
I wanna make a same panel menu for every page.
because the panel menu is the same content for every page.
How do I do? or any suggest?
My sample code is by following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div data-role="page" id="status">
<div data-role="header" data-theme="b">
<h1>Access Point Status</h1>
<a class="ui-btn" data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-menu">menu</a>
</div>
<div id="left-menu" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
</div>
<div data-role="page" id="A">
<div data-role="header" data-theme="b">
<h1>PAGE A</h1>
<a class="ui-btn " data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-a">menu</a>
</div>
<div id="left-a" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</html>
create a panel in body tag and outside page div like following
<body>
<div data-role="panel" id="myPanel" data-display="overlay" data-position="right" data-theme="b">
<ul data-role="listview">
<li data-icon="false">
<a href="#" data-transition="pop" data-rel="close">
Home
</a>
</li>
<li data-icon="false">
Logout
</li>
</ul>
</div>
<div data-role="page" id="login">
..... page ....
</div>
.... other pages ....
</body>
then in pagecreate event of first page add this
$(document).on("pagecreate", "#firstPage", function () {
$("body>[data-role='panel']").panel().enhanceWithin(); //you can put this in document.ready but its not preferable
}
I tried to implement external panel on JQM 1.4.5 but I did'nt success to display it correctly on my web app. JQM 1.4.5 doc about external panel
My code is written below.
Thanks for helping,
Clément
<html>
<head>
<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-2.1.4.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" id="home">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some content
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some other content
</div>
</div>
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
<div class="ui-panel-inner">
<ul data-role="listview">
<li data-icon="home">
<a id="menu-home" href="index.php#home">Home</a>
</li>
<li data-icon="user">
<a id="menu-account" href="#">Account</a>
</li>
<li data-icon="gear">
<a id="menu-settings" href="#">Settings</a>
</li>
<li data-icon="mail">
<a id="menu-contact" href="#contact">Contact</a>
</li>
</ul>
</div>
</div><!-- /mypanel -->
</body>
</html>
You need to enhance the panel in java-script. In $(document).ready write the following code:
$('#mypanel').enhanceWithin().panel();
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 just switched to JQuery Mobile 1.4, now when I do page transition, both header and footer lose css styling for a while before applying again.
IOS 7.04
Main index file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<script type="text/javascript" src="js/library/phonegap/cordova_ios.js"></script>
<link rel="stylesheet" type="text/css" href="css/library/JQuery/jquery.mobile-1.4.0.css">
<link rel="stylesheet" type="text/css" href="css/application/base.css">
<script data-main="js/main.js" src="js/library/require/require.js"></script>
</head>
<body class="main_body">
</body>
</html>
some pages that transit between each other with header and footer
page1
<div id="login_template_wrapper">
<div id="leftmainmenu" class="menu-container" data-position="left" data-display="overlay">
</div>
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('LOGIN'));%></h1>
<!-- <a id="menu_link" data-role="button" data-icon="gear" data-position="left"><%print(T('LEFTMAINMENU'))%></a> -->
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<div id="login_input">
<div data-role="label"><%print(T('USERNAME'));%></div><input bc-data-role="input" class="login-form" name="username" value="<%print(logindata['du'])%>"/>
<div data-role="label"><%print(T('PASSWORD'));%></div><input bc-data-role="input" class="login-form" type="password" name="password" value="<%print(logindata['dp'])%>"/>
<input type="submit" class="login-form" data-role="button" id="login_submit" value="<%print(T('LOGIN'));%>"/>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="rememberme" id="rememberme" <%if (logindata['rm']) {print('checked');}%> />
<label for="rememberme"><%print(T('REMEMBER_ME'))%></label>
<input type="checkbox" name="rememberpass" id="rememberpass" <%if (logindata['rp']) {print('checked');}%> />
<label for="rememberpass"><%print(T('REMEMBER_PASSWD'))%></label>
</fieldset>
</div>
</div>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
page2
<div id="registration_template_wrapper">
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false">
<h1><%print(T('REGISTRATION'));%></h1>
<%print(T('BACK'))%>
</div><!-- /header -->
<div data-role="content" class="main-content">
<div id="login-content_wrapper" class="content_wrapper">
<div class="content_inner">
<ul id="registration_input" data-role="listview" data-inset="true">
<li><div data-role="label"><%print(T('USERNAME1'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME1" name="USERNAME1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('USERNAME2'));%></div><input bc-data-role="input" class="registration-form" id="USERNAME2" name="USERNAME2" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD1'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD1" name="PASSWORD1" value="" data-mini="true"/></li>
<li><div data-role="label"><%print(T('PASSWORD2'));%></div><input bc-data-role="input" class="registration-form" type="password" id="PASSWORD2" name="PASSWORD2" value="" data-mini="true"/></li>
<!--
<li><div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="showpass" id="showpass"/>
<label for="showpass"><%print(T('SHOWPASS'))%></label>
</fieldset>
</div></li>
<li><button id="registration_clean"><%print(T('CLEAN'))%></button></li> -->
<li><button id="registration_save"><%print(T('REGISTRATION'))%></li></button>
</ul>
</div><!-- /content inner -->
</div><!-- /content wrapper-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ifooter" data-tap-toggle="false" data-hide-during-focus="false">
<div id="login_links" data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-icon="edit" href="#registration"><%print(T('REGISTRATION'))%></a>
<a data-role="button" data-icon="refresh" href="#passwordretrieval"><%print(T('RETRIEVEPASSWORD'))%></a>
</div>
</div><!-- /footer -->
</div>
I load page template through backbone view, and do the page transition use the following code
$.mobile.changePage(__this.currentView.$el, {'reverse': reverse, 'changeHash': false, 'transition': mobile_transition});
Everything worked fine in 1.4 alpha and beta, but in 1.4 release, the header and footer loses css styling for a while before applying css style again.
I had the same problem. My solution was to directly add data-theme="a" to the header.
<div data-role="header" data-position="fixed" data-id="iheader" data-tap-toggle="false" data-hide-during-focus="false" data-theme="a">
<h1><%print(T('REGISTRATION'));%></h1>
<%print(T('BACK'))%>
</div><!-- /header -->
I believe this is something to do with the new theme inheriting mechanism but i cant seem to find any useful documentation on the subject.
I tried the Max's answer but it didn't work for me.
The "fixed" header/footer are moved outside the containing "page" div during transition and moved back in after the animation. You should add additional css selectors to apply the styling on the moved header/footer.
For example if you current selector is .ui-page-theme-a .ui-bar-a .ui-btn.back-link , add another selector for your css like .ui-mobile-viewport .ui-bar-a .ui-btn.back-link. This is because the header/footer is no longer inside .ui-page-theme-a and is inside .ui-mobile-viewport during the transition.
Hope it helps!
I am trying to add a 2 selection list view to the page2 footer below. I have the footer position fixed and the list view and links work just fine. My problem is I can't find a way to size the list view to stretch the screen width other than by adding text. The list view "buttons" in the footer are small and I want to control their width. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Page Two</li>
<li>Page Three</li>
<li>Page Four</li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer" align="center" data-position="fixed" data-theme="c">
<ul data-role="listview" data-theme="b" data-inset="true">
<li>Page One </li><br>
<li>Page 3</li>
</ul>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Page Four</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
I ended up adding a navbar which did what I needed.