I am new to ios phonegap . I started to cordova based application.My code does not show header and footer in emulator but works fine in browser. My index.html code is something like this.
<!doctype html>
<html>
<head>
<title>JQM Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
</head>
<body >
<div data-role="page">
<div data-role="header" data-position="fixed" >
<h1>Header</h1>
</div>
<div data-role="content">
<p>Welcome</p>
...
</div>
<div data-role="footer" data-position="fixed" >
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Am i missing something?
My ios version is 5.1.I have also added URL in Cordova.plist,still not working.
You need to add the remote URL code.jquery.com to the whitelist. If you expect your app to be used offline it is best to include the JS files as part of your app and use the local copy.
To add the URL to the whitelist edit the Cordova.plist file in your project and add code.jquery.com under ExternalHosts.
What's the version of IOS did you try on?
It's well known and documented by JQM team, that old platforms like IOS 4.3 do not support fixed toolbars positioning out of the box. You'll need to polyfill.
Just look at their docs: http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed.html
Also don't forget to update *.plist as already mentioned in this topic.
Related
I am having trouble getting flipbox to work. It displays, but I can't get the day/month/year to roll or move at all. It's frozen.
Same if I change the mode to timeflipbox, or durationflipbox -- they display when I click them but don't respond to any mouse or keyboard activity.
code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Single page template</title>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'>
<link rel='stylesheet' type='text/css' href='http://cdn.jtsage.com/datebox/latest/jqm-datebox.min.css'>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'></script>
<script src='jqm-datebox.core.min.js'></script>
<script src='jqm-datebox.mode.flipbox.min.js'></script>
</head>
<body>
<div data-role='page'>
<div data-role='content'>
<input type="text" data-role="datebox" data-options='{"mode":"flipbox"}'>
</div>
</div><!-- /page -->
</body>
</html>
What's wrong with this code for the flipbox to be frozen? The only thing I can think of is that the js references are off, but I just downloaded them and I'm pretty sure they are current.
Any ideas?
figured it out... I just copied/pasted the css/js references from JT Sage's Datebox page source: http://dev.jtsage.com/jQM-DateBox/
I decided that I wanted to learn Jquery Mobile so I set up a test site and instantly came across a weird bug, from what I've read and seen data-theme="a" should be the white theme and data-theme="b" should be the black/grey one. However, for me it's the other way around.. Have I perhaps done something wrong when downloading the library onto my site? And does this matter or should I just ignore it?
The markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div data-role="page" data-theme="a">
<h1>Testing</h1>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
This is what I get with data-theme="a":
I think it might be because your using a pretty old version of jquery mobile, I see you're referencing version 1.2.1, try version 1.4.5.
I have a header, in that i am trying to user a icon on the left side corner. I have used jquerymobile icons in that page. But i cant able to see the icon symbol, only empty icon i displayed. Find the attached screenshot for reference. below is the code from html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"> </script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header" data-theme="a">
<h1>Home</h1>
</div>
</div>
</body>
</html>
Just tried it in a fiddle and it seems to work OK for me. http://jsfiddle.net/LYCjv/
Might be worth downloading jQueryMobile hosting the files on your own server and referencing the css/js files locally, might be some issue with the CDN?
so basically I've been making a jQuery Mobile site, I've hit a lot of speed bumps but as soon as I start making progress, this happens!
The culprit: http://www.ehustudent.co.uk/cis21318140/cis3104/cw2/find-your-nearest-jospice.html
Whenever you click on a link, it just keeps spinning forever. It started happening when I actually got the map to work! The map was inline, so I put it in its own file and it's still happening.
IT STOPS HAPPENING WHEN I REMOVE THIS LINE OF CODE
<script src="map-kensington.js"></script>
Please help me :(. I need to put that line of code in the body or the map won't load, but when I do put it in there the page won't load!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Find Your Nearest Jospice | Jospice Charity Shops</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=yes">
<!-- Start of jQuery External Links -->
<link rel="stylesheet" href="CSS/jospice2.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-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>
<!-- End of jQuery External Links -->
<link rel="stylesheet" href="CSS/custom.css" />
</head>
<body>
<div data-role="page" id="homePage" data-theme="b">
<div data-role="header" data-theme="b">
Menu
<h1>Jospice</h1>
Contact
</div>
<div data-role="content" data-theme="b">
<h2>Find Your Nearest...</h2>
<p>Use the list below to find your Jospice Store of choice! Click on the button to be provided with information and directions to the store.</p>
Furniture Store (Kensington)
Allerton
Crosby
Kensington
Maghull
Netherton
Old Swan
Southport
Walton Vale
</div>
</body>
</html>
It's the same for every page, 7 hours left to finish the site, please help :(
Your script is failing with a 'google is not defined' error.
You need to add google script references to the individual map pages
Something like this:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
I don't see what I'm doing wrong here - I'm trying to create a baseline jQuery mobile template. Looking at the css panel in Firefox, there's no css being rendered.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Phillip Senn">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile template</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script>
$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="header">
<h1>jQuery Mobile Template</h1>
</div>
<div data-role="content" id="myContent">
My Content
</div>
<div data-role="footer">
<h4>Copyright © 2012 Your name here</h4>
</div>
</div>
</body>
</html>
It's just not rendering as a jQuery mobile page.
You code looks fine, I think it's a problem with the latest jQM builds
http://jsfiddle.net/ArGXg/1 (using latest linked libraries)
http://jsfiddle.net/ArGXg/4 (using 1.0 released linked libraries)
Latest Linked Libraries
http://code.jquery.com/mobile/latest/jquery.mobile.min.css
http://code.jquery.com/mobile/latest/jquery.mobile.min.js
1.0 Release Linked Libraries
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js
Note:
Also jQM does not support jQuery verison 1.7.1 yet
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
used 1.6.4
http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
http://code.jquery.com/jquery-1.6.4.min.js