I have built a project using phonegap and jquery mobile, and have iscroll working perfectly on the first page. However on my second page iscroll isn't running. Can someone tell me how you initialize a jquery script on the page in JQM? I am new to both platforms and think it may be a simple mistake! Thanks
I never used phonegap, but im building a JQM-webapp as well, so i hope this works for you.
iScroll seems to cause several problems trying to implement it in JQM. This is why they came up with jquery.mobile.iscrollview which bascically adapts the iScroll javascript to the jQuery Mobile environment.
Just include the script and add data-iscroll="" to your div. And include all of your scripts in the given order.
checkDOMChanges: set to false to prevent auto refresh on DOM changes. If you switch off this feature you have to call iScroll.refresh() function programmatically every time the DOM gets modified. If your code makes many subsequent DOM modifications it is suggested to set checkDOMChanges to false and to refresh the iScroll only once (ie: when all changes have been done). Default true.
see more on there page:http://cubiq.org/iscroll
Related
NOTE: The following issue only occurs on Android versions above 4.4.2 (as far as I know)
TL;DR buttons with click/tap/vclick/touchstart attached to them, seem to work only partly (10-30% of the time) in my cordova app (Android only).
I'm trying to develop a hybrid app for ios/android/windows. In the app, I'll have the occasional button that needs to trigger some actions.
Generally I'd use .on('click', function() { ... });, but I've learned that click doesn't really cooperate with mobile devices.
I tried changing click with vclick, tap and touchstart. But nothing seems to trigger my click events.
Next I tried to see if there was perhaps any css blocking my triggers, but nothing consistent.
The issue with this is, when I apply the following piece of code in my console, it would work sometimes (not always):
$('.anyElement').on('tap', function(){
console.log("tapped");
});
I also tried the following, because I thought the binding was messed up somehow:
$('.anyElement').off().on('tap', function(){
console.log("tapped");
});
So currently I'm kind of not sure where to look anymore. If there perhaps are ways for me to figure out why my stuff doesn't get triggered, that'd be great!
was having the same issue on a cordova jquery app on intel xdk, what solved it for me, at least for now is commenting "fastclick.min.js" in my index.html. seems fastclick.min.js was the causing the issue on android, as it was working on IOS, check out http://community.phonegap.com/nitobi/topics/simple-js-events-like-onclick-are-not-working-on-devices he also soved it by removing some conflicted js, "smoothstate.js" in his case. am still tryin to figure out a better fix though if it exists
I am using Ionic first time for Android App and also post a question(Ionic: Unable to stack li vertically).
Thing is, Ionic's CSS is bothering and not giving desired result. As suggested in link posted above.
Will it be OK if I discard Ionic's CSS and implement bootstrap's CSS only? technically it is possible. Has anyone do it? What issues could be if I don't call ionic.css file?
If you discard ionic's css most of it's niceties(widgets etc) will break. You want to override it as needed. I have had success using parts of angular-ui-bootstrap and other libraries that depend on bootstrap in Ionic apps. Have a look at this discussion: https://forum.ionicframework.com/t/ionic-twitters-bootstrap-css-framework-again/8269
Recently I just started to build my app by using phonegap/cordova. At the beginning, I downloaded the Phonegap Desktop and carry out the testing on Phonegap Desktop during development phrase. It is powerful and flexible for testing purpose.
When I am going to complete app, I build the app by using cordova CLI, then install the apk file on my actual device. I found that by using same coding and device, the app is significantly slower than Phonegap Desktop, especially on jquery animate and toggle modal active:
// Simple code for toggle dialog modal to active
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content").css('top', Math.round( $(document).height() - ($("body").innerHeight() / 1.65 ))+'px');
$("#modal-content,#modal-background").toggleClass("active");
});
//Simple code for animate list item
$( '.Class' ).animate({ right:'0px' }, 250);
The speed is same when I just open the app. After I perform some actions to trigger events, I observed the performance is slowing down. For instance I need to wait for few seconds to let dialog prompt out, and the animate become slower as usual. If i restart the app, the performance is become normal again until I repeat same process.
The performance degradation is not just few milliseconds, it is a very significant difference that up to 4 - 6 seconds delay. This would not happen if I switch to Phonegap Desktop, by using same coding and device. This make me have no idea about what is going on, as I thought they share the same framework. I also tried build the app by using phonegap build android and ionic build android, but I get same result as well. Does anyone has similar experience and has any solution for this issue ?
The speed of the device and the version of webview is the important point. On the desktop you have a lot of power and it is okay to make the first steps there, but then switch to slow devices for testing and test the app also with older android versions. The reason is not the compatibility, the reason is, that older androids are slower.
If the app is running well on slower devices, it will work great on new devices.
Cordova itself and javascript are very fast. There are some mistakes which people make, when they start with cordova development and using jQuery/jQuerymobile:
Write clean HTML with a clean structure, try to make the dom simple.
Don't query the dom with jquery over and over again. Instead put your selector in a variable, if you use it several times:
var $selector = $("#myselector);
if ($selector.height() > 100){
// do something
}
Concatenate jQuery operations:
$("#myselector).css("active").text("my new text");
Use find(), next(), parent(), …. If you need to have multiple operations on multiple elements, and the elements are not fare away in the dom, then use find(), next(), parent(), … it is much faster then querying the whole dom.
Don't use jQuery for everything. jQuery is great, but a lot of operations can be done with simple javascript.
Don't use jQuery-plugins for things that can be done easily with javascript.
Make a single-page-html-app and avoid to use multiple html-pages. This is the best way to slow down the speed of your app and to make the development complicate.
Use a custom jQuery download and don't include things you don't need.
Use tap instead of click.
I have an Android cordova app, and I use jQuery Mobile for the interface. Basically I am trying to get certian links to open in a browser window instead of cordovas childbrowser.
I have some code here, that I think should work, but i can't seem to debug. Could someone take a look?
http://t.co/kAJ7mrj5
Although I'm not certain if this is the problem, I see this attribute:
onclick="navigator.app.loadUrl(http://forum.xda-developers.com/showthread.php?t=1703488", {openExternal: true});
I think that should be:
onclick="navigator.app.loadUrl('http://forum.xda-developers.com/showthread.php?t=1703488', {openExternal: true});"
Notice the quotes.
I am developing multi-page Cordova Phone application fo Android. I am using cordova.2.1 .
Seems like I need to include callback function -onDeviceReady() in all the pages of my application
Two questions
What would be the performance impact if I need to initialize cordova in all the pages
Is there a workaround, so I need to have callback only on my first page and in subsequent pages I can call cordova.exec directly
Thanks for suggestions
The performance impact will be definitely slower, as your pages every time will try to check your Cordova is ready to use or not. (had own experience with this phenomenon).
If you are going to use cordova on all pages then you need to include ondeviceready callback on those pages.
additional info: http://comments.gmane.org/gmane.comp.handhelds.phonegap/8460