I've recently set up PhoneGap to start learning app development, I heard jQuery Mobile was the best way to go as far as a framework goes so I'm looking to use that. I've found the CDN for jQuery but it seems at the moment it's conflicting with the PhoneGap stylesheet and javascript, should I prioritise one of these over the other? Or is there a a way to do it so both are used?
I know this sounds like a stupid question but I'm still learning. Thanks for any help.
What I chose to do with jquery is call it locally from my phonegap app and not use the cdn.... one big thing to note in phonegap is that you call resources without the leading "/"
IE.
Also, what I did was this:
<link rel="stylesheet" href="jquery/jquery.mobile-1.4.0.css" />
<script src="jquery/jquery-ui-1.10.4.custom.min.js"></script>
<script src="jquery/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript">
$.mobile.autoInitializePage = false;
$.mobile.touchOverflowEnabled = true;
</script>
Then in your onDeviceReady function, call this:
$.mobile.initializePage();
Especially if your jquery page handlers are calling specific phonegap plugins for things like location or such then deferring the page initialization until the ondeviceready fires can be good.
So in short:
1) I'd rccommend calling your resources locally from your app since its a mobile app
2) Make sure you are calling your resources in the way cordova / phonegap would like
3) You might try deferring your jquery mobile intialization until after your ondeviceready has fired.
I just recently built an app in jquery mobile / cordova and i'd say it went pretty well.
A typical JQuery Mobile Page with PhoneGap page is the one below
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" href="css/mytheme.min.css"/>
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
</head>
<body>
<!--Page-->
<div data-role="page" data-theme="a" id="searchpage">
<div data-role="header">
<h4>First Page</h4>
</div><!-- /header -->
<div role="main" class="ui-content">
Hello World!
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady() {}
</script>
</body>
</html>
Note:
I used JQuery Mobile 1.4.0 in this example
I used a custom theme mytheme.min.css
Your page should be arrange like this and you are good to go
Related
I came across the following index.html page in which i didn't find any custom assets, such as js and css files. The assets path is as follows
I am not able to find where we have included assets/css/custom/.css assets/js/custom/.js files.
Is there a way to hide these css and js file from html code?
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Where passion meets potential</title>
</head>
<body>
<!-- start of loading jquery -->
<script src="assets/js/vendor/jquery/jquery.min.js"></script>
<script src="assets/js/vendor/lazyload/lazyload.js"></script>
<!-- Loading angular and angular route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<!-- Loading Angular Controller -->
<script src="controller.js"></script>
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
<!-- Main Content -->
<div id="main">
<!-- angular template injection-->
<div ng-view></div>
</div>
<!-- END Content -->
</body>
</html>
Just read the comments. A library called lazyload is used to load all dependencies, probably from the folders you named.
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
I don't know how it works exactly but I assume it will add the lazily loaded files somewhere to the DOM. The client will always be able to find those resources somehow (e.g. the network tab of chrome devtools).
The files in the code above will probably contain information about how it works for your project.
I have stuck a bit with what to choose .So i have a few questions .
1) If i want to create website which will work well on mobile and desktop without loosing any performance on mobile (like do not work buttons or effects) so what should i use Jquery mobile or Bootstrap and Jquery?
2) Why when we include Jquery mobile we also have to import just Jquery ?
<!DOCTYPE html>
<html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
3) Is Jquery(not mobile) stucking on mobiles ?
Thank you every one for your time )).
I have a problem on the initial load of my angular APP on mobile safari, it hangs with blank page for nearly 2 minutes, while on other browsers,it works perfect, even on MAC safari and IPAD safari.
At a first guess, maybe my app has too many js files. So I concat
them(11 files) into 3 files, and the issue was resolved. Seems mobile safari has some limitation of the number of js files on the first page. So I tried 4 files, and 5, and it seems 4 is the max number accepted by mobile safari.
My question is: Is there really any limitation for mobile safari on the first page's number of js files? Or did I misuse angularJS or HTML5,or anything else. Because I think if safari really does, it seems awkward, and it should be carefully documented which I never searched on google.
The original code of my first page looks like:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<base href="/"/>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Custom styles for this page -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
</head>
<body class="blog-body" ng-app="blog" ng-controller="blogCtrl">
<div ng-include src="'modules/blogPublish/blogNavBar.html'"></div>
<div ui-view autoscroll='true' class="anchor"></div>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/underscore/underscore-min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../modules/blogPublish/blog.js"></script>
<script src="../modules/blogPublish/ui_effect.js"></script>
<script src="../modules/appError/appError.js"></script>
<script src="../modules/common/underscore.js"></script>
<script src="../modules/common/alert.js"></script>
</body>
</html>
Mobile Safari uses an interesting feature called HTTP Pipelining, which may not be supported by your web server software. See Safari Sends Two HTTP Req. Same Time/Socket
i am trying to implement the push.js engine from ratchet:
http://maker.github.com/ratchet/#push
i downloaded the ratchet files from here:
http://maker.github.com/ratchet/ratchet.zip
and am using apache to serve all js, css and html. all files are in the same directory.
here is my one.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">one.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="two.html">
<strong>two</strong>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
and here is my two.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">two.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="one.html">
<strong>one</strong>
</a>
</li>
</ul>
</div>
</body>
</html>
how do i link these two files together?
it looks like push.js is included but when i clicking on the a href's does nothing.
i feel like i am missing something glaringly obvious about this implementation.
thanks for the help.
Ratchet works off of touch events, which are not available in your browser. In Chrome go to chrome://flags/ and enable "Force enable touch events". That should do the trick for browser development. If you want to make this work on desktops without the flag you are going to need a js framework to convert touch events to pointer events. Something like https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.js should do the trick.
Ratchet uses touch events on mobile devices that are different than the pointer events used in a desktop browser.
You can use the Chrome flags as mentioned in earlier answers or your can use #fat's fingerblast.js that converts touch events to pointer events.
The fingerblaster.js file can be found here:
https://github.com/stephanebachelier/fingerblast.js
IMPORTANT: In order to enable fingerblaster.js you need to include a script such as the following at the end of your body element (once your html content has loaded):
<script type='text/javascript'>
var fb = new FingerBlast ('body');
</script>
This will create a new FingerBlast object and set the listener on body of the html document (you can put any css selector string in place of 'body').
I asked the same question. Seems like it only works on ios / phones, not on the web browser.
See: https://github.com/maker/ratchet/issues/148
I found that Ripple Emulator works great with this "issue" (I think only is available on Chrome)
It's nice because you don't need to add another js library
Modern Firefox browsers have a web developer feature called "Responsive Design View". It allows you to view a web page in a smaller viewport to simulate use on a phone/tablet. It also allows you to simulate touch events. I found it particularly useful when working with Ratchet on a web app.
In Firefox, you can enable the Responsive Design View by going to Tools -> Web Developer -> Responsive Design View or using the hotkeys "option + command + m".
More information on the Responsive Design View can be found here.
You can download Chrome Canary and with Developer Tools click over Phone icon ( first one ) then select which mobile phone you want to emulate, you can even use Responsinator.com.
PushJS is embedded into ratchet.js.
Use FingerBlast. Tried Chrome, Safari and it worked.
https://github.com/stephanebachelier/fingerblast.js/blob/master/lib/fingerblast.js
On Google Chrome you can use the developer console and emulate a mobile device with touch events
https://developer.chrome.com/devtools/docs/device-mode#emulate-touch-events
I'm writing a mobile web app with jQueryMobile and I put in AngularJS to handle data binding. But this introduces routing problems on mobile devices. Below is the minimal code I could write to reproduce the problem. Everything works OK on Chrome on desktop, but when I try the same page from my android device I get the nasty "Error loading page". Problem can be fixed by using data-url for navigation but there's catch. I also need to package it up with phone gap. This means html is loaded by file:// and direct navigation(data-url) doesn't work(I tried)
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<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.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://raw.github.com/tigbro/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter-1.2.0.js"></script>
</head>
<body>
<div data-role="page" id="main">
<a data-role="button" href="#sub">sub</a>
</div>
<div data-role="page" id="sub">
<p>sub page</p>
</div>
</body>
</html>
Upon clicking the "sub" button user should be directed to hostname/#sub and it is on Chrome but weird things happen on android and browser is routed to hostname/#!/%23sub
I guess this is URL encoded?
Also I should point out that by removing just the two script refenrences for angular and for JQM-angular adapter everything works(and no databinding of course).
i tried removing angular-jquery adapter and everything works as if by magic.
also no issues with angular and jquery clashing.