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>
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.
Please find 2 set of code blocks below and let me know which one is to follow and why?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set 1</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/customStyle.css" />
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed"></div>
<div data-role="content"></div>
<div data-role="footer" data-position="fixed"></div>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/customScript.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</body>
</html>
and set 2 is....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Set 1</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/customStyle.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/customScript.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
(ie) which one is right, putting all the scripts at the top or at bottom?
Both of them are correct, only difference is how are you going to bind events.
In the first case, because HTML is already loaded into the DOM events can be bound directly like this:
$('#buttonID').on('click', function(){
});
Because button is already into the DOM, click event can be bound directly to it.
In the second case, because jQuery Mobile is loaded before page content all event binding must be done like delegation:
$(document).on('click', '#buttonID',function(){
});
This is a safer but slower solution. It don't require for object to exist to bind an event to it.
To make a story short, solution 1 is slightly faster.
First case to improve performance .... this is said to be general practise to keep javascript down the page ...so that content is loaded faster .... though no facts or analysis personally I have on same. Check this nice post sameelegantcode.com/2010/03/30/your-javascript-goes-where/
It will good to place all javascript at the bottom of the page. Never forget that page rendering can be delayed by javascript parsing/execution. Well, I believe you love to read http://developer.yahoo.com/performance/rules.html#js_bottom
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.
I have a phone gap application with jquery mobile and I can get external links to work and single page navigation working but I cannot open another file in my application. All the files are located in the www folder. The error message is "Failed to load webpage with error: The requested URL was not found on this server. If i comment out the jquery-1.6.4.min.js file it will work but that's not a good solution. I've tried rel="external" and several other things I've seen by googling but nothing seems to work
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="include/jquery.mobile-1.0.min.css" />
<script src="include/jquery-1.6.4.min.js"></script>
<script src="include/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
//do something
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="manage">
<div data-role="content" id="inputs">
About
</div>
</div>
</body>
</html>
Make sure that you update your PhoneGap manifest. Look for PhoneGap.plist, open it and look for ExternalHosts. You need to add the urls one by one, or you can simply add "*". This will allow the use of all urls within the application. PhoneGap blocks all urls by default.