I seem to be having some trouble setting up and playing with jquery mobile. The issue is that if you hover over list items in a ul you get a huge delay in the animation, same with hovering on the tablet. My page is simple and almost exactly taken from a jQuery mobile tutorial. You can see the code below or visit : aliahealthcare.com/jquerymobile to reproduce the same environment. Thanks!
my Code:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Select a Class Type</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#">
<img height="100px" src="https://static.webresint.com/images/micro.hostel.com/gallery/34561.jpg">
<h2>Day Class</h2>
<p>Broken Bells</p></a>
</li>
<li><a href="#">
<img src="http://sweetclipart.com/multisite/sweetclipart/files/sunset_hills.png">
<h2>Evening Class</h2>
<p>Hot Chip</p></a>
</li>
<li><a href="#">
<img src="http://www.webweaver.nu/clipart/img/nature/planets/cartoon-moon.png">
<h2>Night Class</h2>
<p>Phoenix</p></a>
</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
The problem is that you are using very large images and rescaling them in the browser. The biggest culprit is sunset_hills.png. Here's a jsFiddle with just that image commented out and and you will already notice a huge difference in performance.
Instead of resizing your images using css or img attributes, you should use smaller versions of the images (even better you should try and use css sprites). If you need to support multiple sizes based on the screen size then you can accomplish this by displaying your images using css media queries.
That said I'm not exactly sure why there is such a big difference in performance between chrome and other browsers.
As a side point you are linking to the css for jQuery mobile 1.0.1 but you are using jQuery Mobile 1.3.2. Also JQM 1.3.2 supports jQuery 1.9.1 (while you are linking to jQuery 1.6.4).
Related
I have created a simple application in Worklight 6.0 with jquery mobile 1.3.2.
This is an single page application with Header, Content and Footer. Necessary jquery mobile javascript and css files are included.
Given below is the html file from the application.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>DemoApp</title/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
<link rel="shortcut icon" href="images/favicon.png"/>
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
<link rel="stylesheet" href="css/DemoApp.css"/>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
<div data-role="header"><h1>Header</h1></div>
<div data-role="content">Content</div>
<div data-role="footer" data-position="fixed"><h1>Footer</h1></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/DemoApp.js"></script>
<script src="js/messages.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</body>
</html>
I have created the Windows Phone 8 Environment and built the worklight project. With the help of Microsoft Visual Studio Express 2012 for Windows Phone the application is launched in windows phone emulator.
When I scroll the screen I am getting the following response.
Please suggest a way to solve this issue.
If what you want is fixed header/footer with the content in between scrollable, then try:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h3>Header</h3>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h3>Footer</h3>
</div>
</div>
The tap-toggle setting is to disable hiding the header/footer on tap, but I haven't been able to get JQM fixed headers/footers to behave at all unless I disable it.
I've also found on Windows Phone 8, the footer will position itself too high. So I have to add the following to the CSS:
#media screen and (orientation: portrait) {
#-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
Can you show us the app CSS that you are using DemoApp.css. Try disabling the default css in it and running again.
The problem seems to be of the css having been told that the screen size is something bigger than the actual device size.
Regards,
Elvis
As part of my first PhoneGap app, I need to load up an OpenLayers map (ultimately using my own local custom tiles, but for the moment, I'm just testing with online ones, modding the standard OpenLayers examples).
But when I try to initialise the map in the iOS simulator, the tiles don't want to load, using either OpenStreetMap or alternatives. The map initialisation gets as far as placing the controls, and the copyright notice, but I keep getting the blue question-mark boxes instead of live tiles. Testing the map-loading code independently in a browser, it seems to function properly if I remove the jQuery Mobile references, but that doesn't seem to work if I tweak the file in Xcode, and besides that, it screws up my desired appearance and behaviour. Is this a known conflict and does anyone know a way around it?
Thanks in advance!
Giles
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobilecus-1.1.0.min.css"/>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<script src="js/sessionstorage.1.4.js"></script>
<script src="js/OpenLayers.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() { //ready
// JQuery stuff trimmed out
}); //end ready
var map
function init() {
map = new OpenLayers.Map("mapview");
map.addLayer(new OpenLayers.Layer.OSM());
var lonLat = new OpenLayers.LonLat( 0.0 ,51.0).transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection);
var zoom=10;
map.setCenter (lonLat, zoom);
}
</script>
</head>
<body onload="init();">
<div data-role="page" id="page1" class="page">
//html for first page (no map)
</div><!-- /page -->
<div data-role="page" id="page2" class="page">
<div data-role="header" data-id="fixedheader" data-position="fixed" >
<h1>Fixed header</h1>
</div><!-- /header -->
<div data-role="content">
<div id="leftbar">
<img src="images/leftbar.png">
</div><!-- /leftbar -->
<div id="mapview">
//map appears here
</div><!-- /mapview -->
</div><!-- /content -->
<div data-role="footer"data-id="fixedfooter" data-position="fixed">
<a id="ForwardButton">Forward</a><a id = "BackButton" href="#page2">Back</a>
</div><!--/footer -->
</div><!-- /page -->
</body>
</html>
Sorry - forget I spoke! Just discovered that I needed to add a reference to the map server domain to the "ExternalHosts" in Cordova.plist. Now the images seem to be loading okay.
I have the following code:
<div data-role="page" id="Page1" >
<!-- Footer here -->
<div data-role="footer" data-position="fixed" data-id="id-footer1">
<div data-role="navbar">
<ul>
<li>Page1</li>
<li>Page2</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="Page2" >
<!-- Footer here -->
<div data-role="footer" data-position="fixed" data-id="id-footer1">
<div data-role="navbar">
<ul>
<li><a href="#Page1" >Page1</a></li>
<li>Page2</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->
The above codes will work if I use the following scripts. That is, Page 1 will have the Slide effect and Page 2 the Pop effect.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.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/jquery.mobile-1.0.min.js"></script>
However, when I used the following, the slide effect and pop effect are gone.
<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>
Seems like the new JQM version has affected the page transition or am I missing something? Can anybody confirm?
Thanks.
Read the transitions section in the announcement of 1.1.0:
Unfortunately, after a ton of work, we’ve determined that it’s not possible to dumb down
page transitions enough to get acceptable performance in Android 2.x, even on a newer device
like a Nexus S running 2.3. After a lot of deliberation, we’ve decided to use a feature test
for 3D transforms to target transitions: if a browser passes, it will see the full range of
transitions. By default, if a browser fails this 3D test, they will fall back to a fade
transition, regardless of the transition specified. All Android 1.x-2.x devices fail this
test but Android 3.x and 4.x pass. The fallback behavior for each transition is completely
configurable if you want to change this behavior.
If your testing browser doesn't support 3D transforms you will get a fade transition.
I'm writing a Html 5 application for mobile devices using jQuery mobile (and Phonegap, but the following is device independent), using one html page that contains various <div data-role="page"... > elements as subpages. To change between one subpage and another I use $.mobile.changePage. Everything works well unless I place a div tag into one of the <div data-role="content"> containers!
Working example:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.mobile.changePage($('#page2'), {
transition : 'slideup',
reverse : false,
changeHash : true
});
});
</script>
</head>
<body>
<div data-role="page" id="page1" data-theme="a">
<div data-role="content">
Page1
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="content">
Page2
</div>
</div>
</body>
</html>
Now, after adding something as simple as a closed div tag behind Page1
Page1 -> Page1<div />
$.mobile.changePage still fires - one can see the page2 content for a second - but then shows a blank screen.
This happens in desktop browsers as well as in a smartphone (using Phonegap and adjusting the code).
I really appreciate any kind of idea or hint. Narrowing down this problem and making it reproducible alone cost me hours a valuable livetime because it seemed to unlikely....
Change
Page1<div />
to
Page1</div>
...
Page1<div>test</div>
works too.
Not sure why jqm is having a problem with the trailing / on the empty div.
I think it's there in jQTouch but how do I add a full screen welcome image for my iPhone web app developed using jQueryMobile?
The app is a full screen web app and it is already added in the iPhone Homescreen.
This is just a concept but you could try something like this:
Live Example: http://jsfiddle.net/yzvWy/14/
JS
$(function() {
setTimeout(hideSplash, 2000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
HTML
<div data-role="page" data-theme="b" id="splash" style="background-color: #fff;">
<div class="splash">
<img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="splash" />
</div>
</div>
<div data-role="page" data-theme="b" id="home">
<div data-role="content">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Overview</li>
<li>Intro to jQuery Mobile</li>
<li>Features</li>
<li>Accessibility</li>
<li>Supported platforms</li>
</ul>
</div>
</div>
</div>
iOS has its propertiary stuff for displaying a splash while app loads. I didn't use it yet (I didn't need that) but here's how they say it can be done:
<link rel="apple-touch-startup-image" href="img/splash.png" />
You might want this too:
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
See here for more:
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Thanks for the help. This didn't work with the current stable release of Jquery Mobile, since it doesn't yet support 1.7. I managed to combine it another solution on the matter and came up with:
$ (function(){
setTimeout(function(){
$.mobile.changePage("#home", "fade");
}, 3000);
});
Thanks!