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.
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/
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
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 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 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