I'm trying to convert a simple .html file to a phone application. I used jquery in writing the .html file, which works perfectly on my browser, then I used PhoneGap to create the .apk file. When I tried to run the .apk file on ARC welder, I got something that looks more like a web page than an application and there was no style or anything. It was a plain page with the text only. Can you tell me what I'm missing here? Do I need to download the .js and .css file and include them with .html file when creating the .apk?
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script src="../js/jquery.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Header</h1>
<a data-icon="back" onclick="history.back()">Back</a>
</div><!-- /header ------------------->
<div data-role="content"><p>Hello</p></div>
<div data-role="footer" data-position="fixed">
<h1 position="center">Footer</h1>
</div><!-- /footer ------------------->
</div>
</body>
</html>
Related
I can't seem to figure out why bootstrap 3 doesn't seem to render form-horizontal correctly on smaller screen sizes.
The labels should all be right aligned (not left) and their vertical alignment should be baseline so the text lines up with the inputs.
This does not work when rendered in mobile mode in Chrome on the "Nexus 5" device nor on a true mobile device.
Any ideas as to what I missed / got wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body style="margin-top: 20px">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-7 col-md-5 col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">My Panel Heading</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-5">Test Label</label>
<div class="controls col-xs-7">
<input class="form-control" type="text" placeholder="My Test Value A"/>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-5">Really Long Test Label</label>
<div class="controls col-xs-7">
<input class="form-control" type="text" placeholder="My Test Value B"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Override bootstrap 3.3.6 defaults with this:
#media (min-width: 1px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}
You need to use col-sm/md/lg to define the column/s
Col-xs-* is for mobile devices correct, but will not display what you want properly.
After updating to Firefox 25 on Android (Galaxy S4) just days ago, i found an issue with fixed header in jqm 1.3.2, it seems to be positioning above the screen pulling footer and slidepanel up.
If i tap the screen the header comes in okay and positiones footer okay, then disappearing again when tapping once more.
Anyone else noticed any such problem in new FF25 on android ?
Here is a source where this scenario occurrs, ive removed all load and custom css and js as it doesnt affect the problem.
is it FF25 or is it me ??...
<!doctype html>
<html>
<head>
<meta charset="ISO-8859-15">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>TEST</title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="jquery/jquery.mobile-1.3.2.min.js"></script>
<script src="plugins/autocomplete/jqm.autoComplete-1.5.2-min.js"></script>
<script src="plugins/touchswipe/jquery.touchSwipe.min.js"></script>
</head>
<body>
<div class="jqm-mypage" data-role="page" id="index" data-theme="c">
<div data-role="header" data-position="fixed" class="jqm-header">
<h1 class="jqm-logo">heading</h1>
Menu
</div>
<div data-role="content" class="jqm-content">
<p>Content</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>....</h1>
</div>
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="c">
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos" class="jqm-list">
<li data-role="list-divider">TEST</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div><!-- /panel -->
</div>
</body>
</html>
SOLVED
Obviously a bug in FF25 mobile.
If i set div content a min height that is higher than the screen height, the fixed header shows fine and everything is positioned normally.
On pages where the content is less than the screen height, the fixed header disappears on pageload, pulling footer and panels up.
I've develop a Phonegap App and I've a problem to resize the image as per Android Device(set width and Height). As device Height and Width change I want to change my image size. I 've use below link for that but it does not work supporting multiple resolution and density of images in phonegap
My code is as below
<!DOCTYPE html>
<html>
<head>
<title>Worklist</title>
<meta charset="utf-8" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/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 type="text/javascript">
$(document).ready(function () {
if(window.devicePixelRatio == 0.75) {
$("#dIcon_notification").attr('src', '/images/mpdi/my_notification_new.png');
}
else if(window.devicePixelRatio == 1) {
$("#dIcon_notification").attr('src', '/images/mdpi/my_notification_new.png');
}
else if(window.devicePixelRatio == 1.5) {
$("#dIcon_notification").attr('src', '/images/hpdi/my_notification_new.png');
}
else if(window.devicePixelRatio == 2) {
$("#dIcon_notification").attr('src', '/images/hpdi/my_notification_new.png');
}
}
</script>
</head>
<body>
<div data-role="page" data-theme="f">
<div class="ui-header ui-bar-a" role="banner" data-role="header" data-position="fixed">
<h1 style="white-space:pre-wrap" aria-level="1" role="heading" tabindex="0" class="ui-title" >Smart Self Service</h1>
</div><!--/header-->
<div data-role="content" data-theme="f">
<div id="center_content" >
<div id="dashboard">
<a href="Notification.html" data-ajax="false" ><img id="dIcon_notification" display="inline" src="images/hdpi/my_notification_new.png" class="dashaboard_icon" alt="" ></a>
<a href="#" ><img id="dIcon_request" src="images/hdpi/new_request_new.png" class="dashaboard_icon" alt="" ></a>
<a href="#" ><img id="dIcon_setting" src="images/hdpi/setting.png" class="dashaboard_icon" alt="" ></a>
<a href="#" ><img id="dIcon_exit" src="images/hdpi/exit.png" class="dashaboard_icon" alt="" ></a>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
I am new to Jquery and CSS so every help will be appreciable. I want to solve it. please Help
The solution you used will work for different resolutions. like normal and retina display. If you want to change image sizes according to device sizes(but same resolutions) you can use CSS 3 media queries and apply different css on different size devices.
your css will go under something like this-
#media screen and (min-device-width : 480px) and (max-device-width : 854px){
//css for devices whose width is more than 480px but less than 854px
}
you can use combination of width and resolution media queries as well.
Please search for adaptive web design and media queries you will get a lot of stuff.
I have problem with displaying round edges in Android browser (in Samsung Galaxy Tab). However, it works fine in IOS browser (in iPad and iPhone i.e, Safari). As shown in the following image
Link to the image Round corner display problem in Android browser
Below is the code
<!DOCTYPE html>
<html>
<head>
<title>Sample App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=false">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript/cordova-1.8.0.js"></script>
<script type="text/javascript" src="javascript/precache.js"></script>
<script type="text/javascript" src="javascript/common.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="front">
<div data-theme="b" id="search-container">
<form id="search-field" action="" method="get" data-ajax="false">
<input type="search" name="search" value="" />
</form>
</div>
</div><!-- /page -->
</body>
</html>
I am not sure if I have to override the default jQuery Mobile styling. If so can anyone let me know the configuration I have to override or if there is any other solution to overcome this issue.
However, this works fine when the input field is in focus, as shown here Round corners display properly when the field is in focus
When I do a view page source in browser, this is the code (for div block)
<div id="search-top">
<form id="search-field" action="" method="get" data-ajax="false">
<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-b" style="border-radius: 1em;">
<input type="text" data-type="search" name="search" value="" class="ui-input-text ui-body-b">
<a href="#" class="ui-input-clear ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext ui-input-clear-hidden" title="clear text" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="b" data-mini="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">clear text</span>
<span class="ui-icon ui-icon-delete ui-icon-shadow"> </span>
</span>
</a>
</div>
</form>
</div>
Thanks in advance
After many Tests, I've found this issue's reason!
Just remove this class .ui-shadow-inset from jquery.mobile.css file.
When I resize my browser window and make it smaller, the navbar nicely creates a collapse menu with a button on the right top corner. When I view the same site on my android phone, the navbar menu is always collapsed and the top right corner button is not visible. How can this be solved? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>My Groundhops</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My Groundhops</a>
<div class="nav-collapse">
<ul class="nav">
<li>Clubs</li>
<li>Visits</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">Content</div>
</div>
</div>
</body>
</html>
You're probably missing the meta tag required for mobile devices to properly scale.
So stick this in the head section of your page and try again:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
it seems to be a twitter bootstrap issue on opera mobile, it works on the default android browser. So my code seems OK.
https://github.com/twitter/bootstrap/issues/3621