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.
Related
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>
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 am trying to change number of grids on orientation is landscape from 2 to 3 grids how can I achieve this?
First thing first, we cant use window.orientation to definitely recognize portrait or landscape orientation, because every device will give different results. Read more about it here: http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/
So, to achieve this we need to use classic orientation detection function. If window height is bigger then window width the we have a portrait or in any other case we have a landscape orientation.
I made you a working example of your question. Unfortunately I cant create you a jsFiddle example because it wont detect orientationchange event. To test code below, 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>
.ui-block-a {
background: red;
}
.ui-block-b {
background: green;
}
.ui-block-c {
background: blue;
}
</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('pagebeforeshow', '#index', function(){
detectOrientationMode();
});
$(window).bind('orientationchange', function() {
detectOrientationMode();
});
function detectOrientationMode() {
if($(window).height() > $(window).width()) {
$('#custom-grid .ui-block-c').css('display','none');
$('#custom-grid').removeClass('ui-grid-b').addClass('ui-grid-a');
} else {
$('#custom-grid .ui-block-c').css('display','block');
$('#custom-grid').removeClass('ui-grid-a').addClass('ui-grid-b');
}
}
</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 class="ui-grid-a" id="custom-grid">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
You can have the three grids present and addClass('hidden') or removeClass('hidden') as appropriate, and assign display: none to the class hidden in your CSS.
I had the same question and Without better advice I simply found a workaround:
I just use the jquery mobile orientation change detection to switch between 2 different div (data-role page) duplicating my content with different layouts.
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