I'm starting with developing for webpage available on mobile.
I need to have an application with 6 big icons which will consume almost all visible space. When mobile is placed horizontaly I'd like to have those icons 3 rows in 2 columns. And when mobile is placed vertically I'd like to have them 2 rows and 3 columns. I can't declare single icon widht as for example 100px and then use simple float:left - I'd like my loyout to be fluid.
I plan to use jQuery mobile in my page.
I made you a working example, just copy it into an empty html file.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
#custom-icon {
position: relative;
float: left;
width: 33.333%;
height: 50%;
}
.ui-content {
padding: 0 !important;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
detectOrientationMode();
setRealContentHeight();
});
$(window).bind('orientationchange', function() {
detectOrientationMode();
setRealContentHeight();
});
function detectOrientationMode() {
if($(window).height() > $(window).width()) {
$('[data-role="content"] div').each(function(){
$(this).css({'width':'50%','height':'33.33333%'});
});
} else {
$('[data-role="content"] div').each(function(){
$(this).css({'width':'33.33333%','height':'50%'});
});
}
}
function setRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
$.mobile.activePage.find("div[data-role='content']").height(content_height);
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<div id="custom-icon" style="background: red;">Icon 1</div>
<div id="custom-icon" style="background: blue;">Icon 2</div>
<div id="custom-icon" style="background: green;">Icon 3</div>
<div id="custom-icon" style="background: yellow;">Icon 4</div>
<div id="custom-icon" style="background: orange;">Icon 5</div>
<div id="custom-icon" style="background: violet;">Icon 6</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Tested on :
Android 4.1.1 Chrome
iPad iOS 6.0
Related
Iam having code with two dialogs one from another, while going back from second dialog to first i have given data-transition as slide but it is not working. Can someone help me please thanks.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.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.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<style>
.ui-simpledialog-screen-modal{
opacity: 0.4;
}
.ui-simpledialog-container {
border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
padding: 2px;
}
</style>
<script>
$(document).on("pagecreate", "#page1", function () {
$(document).on('click', '#openPopup', function() {
$('#inlinecontent').simpledialog2({
mode: "blank",
headerText: "Select Item(s)",
headerClose: false,
blankContent: true,
themeDialog: 'a',
width: '75%',
zindex: 1000
});
});
$(document).on('click', '#dialogSubmit', function() {
var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
if (numChecked > 0){
$(document).trigger('simpledialog', {'method':'close'});
} else {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Warning',
headerClose: true,
transition: 'flip',
themeDialog: 'b',
zindex: 2000,
blankContent :
"<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>OK</a></div>"
});
}
});
});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>SimpleDialog2 Chained Popup</h1>
</div>
<div class="ui-content" role="main">
<!-- button that opens the popup -->
<button id="openPopup">Select One or More Item(s)...</button>
</div>
</div>
<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
<div style="padding: 15px;">
<fieldset id="cBoxes" data-role="controlgroup" >
<legend>Favorite Fruit:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
<label for="checkbox-v-2a">Apple</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
<label for="checkbox-v-2b">Banana</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
<label for="checkbox-v-2c">Orange</label>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
</div>
</div>
</div>
</body>
</html>
I must use localstorage in my phonegap (3.0) app so that I can call the specific number want by the user in each page. In order to do that I use a form and a script like that below. This script work in browser but not with phonegap build. I should have miss something but can't find what!
<!DOCTYPE html>
<html lang="fr">
<head>
<title>local storage</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<style>
#message {
display: none;
border-radius: 10px;
padding: 10px;
background-color: #ff0000;
color: #fff;
}
#storageDemoPage h2 {
white-space: normal;
}
</style>
<script type="text/javascript">
var localStorageKey = "allo";
$('#storageDemoPage').live('pagecreate', function() {
showStoreValue();
$('#addToStorage').click(function(e) {
localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
});
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
</head>
<body>
<section data-role="page" id="storageDemoPage">
<section data-role="header">
<h2>My app</h2>
</section>
<section data-role="content">
<p id="message"/>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Enter your number</li>
<li>
<input type="text" id="entry" name="entry" placeholder="Write digits"/>
<input type="button" id="addToStorage" value="Store value"/>
</li>
<li data-role="list-divider">Value record</li>
<li class="storeItem"/>
</ul>
<div data-role="content">
<p id="audio_position"></p>
<ul id="allRepos" data-role="listview"></ul>
</div>
</section>
</body>
</html>
Edit : add cordova script at the begining
Thanks to #QuickFix and #Chris here is the solution :
<script type="text/javascript">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
var localStorageKey = "allo";
function onDeviceReady() {
showStoreValue();
$('#addToStorage').click(function(e) {
window.localStorage.setItem(localStorageKey, $('#entry').val());
showStoreValue();
e.preventDefault();
});
}
function showStoreValue() {
var item = localStorage.getItem(localStorageKey);
if (item == null) {
item = 'Pas de valeur';
}
else if (item.length === 0) {
item = 'Aucune valeur d\'enregistrée';
}
$('.storeItem').text(item);
}
</script>
Here are the possible things you would have missed
a)Cordova script file inclusion in your head tag.
b)Use and listen device ready before using local storage.
Implementing this should solve your issue.
Im using JQM and phonegap to create a simple app. In Android everything's fine, but when I run the app in an IOS device the keyboard makes some strange effect on the screen
If the list is not scrolled, everything seems to be working,
but if I scroll the list a little bit and make the keyboard appear, the hell breaks loose:
HTML
<div id="my-wrapper">
<ul data-role="listview" data-theme="a" data-filter="true" data-filter-theme='b' data-filter-placeholder="Buscar Producto y/o Droga" id="RemediosList">
</ul>
</div>
and the CSS
#my-wrapper {
top : 45px;
}
#my-wrapper form {
position :fixed;
top : 87px;
left : 15px;
width : 100%;
z-index : 10000;
}
Any help, will be welcomed!
I have tried to remove the header and only have a fixed seachbox. Works perfect on desktop and Android. But I get the same result in iOS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>title</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
#wrp {
padding-top : 45px;
}
#wrp form {
position :fixed!important;
top : 13px;
left : 15px;
width : 100%;
z-index : 2;
}
</style>
</head>
<body>
<div data-role="page" data-theme="a" data-dom-cache="true">
<div data-role="content">
<div id="wrp">
<ul id="search" data-role="listview" data-filter="true" data-filter-placeholder="Sök.." data-inset="false" data-filter-theme="a">
<li><h2>header<h2></li>
</ul>
</div><!-- /my wrapper -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
In my project i have some buttons with icon its working fine but the issue is when i long press the button it remains in active state unless i press some other button can any tell what the issue and how can i solve this.
Here is the css code for btn active state.
.ui-btn-active {
border: 1px solid #ccc;
background: #B4B7BA;
font-weight: 700;
color: #fff;
cursor: pointer;
text-shadow: 0 1px 0 #EDF1F4;
text-decoration: none;
background-image: -webkit-linear-gradient(#5393c5, #6facd5);
background-image: -moz-linear-gradient(#5393c5, #6facd5);
background-image: -ms-linear-gradient(#5393c5, #6facd5);
background-image: -o-linear-gradient(#5393c5, #6facd5);
background-image: linear-gradient(#5393c5, #6facd5);
font-family: Helvetica, Arial, sans-serif }
I encountered a similar issue and worked around it with something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App</title>
<script type="text/javascript" src="cordova-2.8.0.js"></script>
<script type="text/javascript" src ="assets/lib/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src ="assets/lib/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="assets/lib/jquery.mobile-1.2.0.css" type="text/css" />
<script type="text/javascript" >
$.mobile.defaultPageTransition = 'none'; // Remove default page transition
$('div[data-role="page"]').on('pagecreate',function(event, ui){
$('div[data-role="footer"] a', $(this)).on("taphold",function(e){
$(this).addClass("ui-btn-active");
$(this).one("touchend", function(e){
e.preventDefault();
$(this).trigger("click", e.data); // Remove this if you don't want the long press to act as a click
$(this).removeClass("ui-btn-down-a ui-btn-active");
return false;
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page-1">
<div data-role="content">
<p>Page 1</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page-2">
<div data-role="content">
<p>Page 2</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You can download my Eclipse project and compiled APK here
When run, if I click the link at the bottom of the index page to get to the map page, I see the map briefly, filling a quarter of the screen, before it vanishes. What am I doing wrong?
Here is the code for the index page, which creates the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
function initialize(){
if(!window.navigator.onLine){
alert("An internet connection is required to use the MetPetDB App. Please find a connection and reopen the app.");
var element = document.getElementById("mainPage");
element.parentNode.removeChild(element);
document.getElementById("mainBody").innerHTML = "<p>An internet connection is required to use this app.</p>";
}
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
initializeMap(42,-73);
});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</head>
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the following search methods.</p>
</div>
<div data-role="content" style="height: 100%;">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
Testing
</div>
</div>
</body>
</html>
And here is the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<body>
<div data-role="page" data-theme="e" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
</body>
</html>
The following code works: jsfiddle
I took your code, simplified it (using a single page template instead of the multi page one, but just to make it easier for jsfiddle) and moved all scripts inside the head.
Also be careful with phonegap, you should handle the onDeviceReady event, and not the body onload event. Even then there's a different method there to check if you're online.