Remember, that every HTML 5 tag can have id and can be used as reference. Every one!
So, if you want to display some bolded value, then instead of writing:
<span>Cars: <span id="carsValue" style="font-weight: bold"></span></span>
you can use much simpler approach of:
<span>Cars: <strong id="carsValue"></strong></span>
Zepto.js is great alternative to jQuery. With greatly reduced (in compare it jQuery) source code base, it still offers about 80-90% of key jQuery functionalities. Unfortunately to me, among these missing 10-20% there were some animations and some nifty fadeIn and fadeOut effects. Had to find some solution to this problem.
Read More “Extend Zepto with fadeIn and fadeOut effects”If your PhoneGap application loads some external content (either local files or any server-side data) using AJAX, keep an eye on the fact, that on very slow mobile devices, it may end up with error message saying, that connection to given URL failed. Which means a typical timeout.
You may experience the very same issue, if you’re building apps in debug mode and debug server (either yours or default weinre one) is down or responds to slowly.
Read More “Increasing `loadUrlTimeoutValue` to avoid `Connection to server was unsuccessful` error”
There is a bug in HTML 5 Canvas object exposed on Android platforms, in versions 4.1.1 till 4.3 (newest, as of writing it, though not yet fixed). It causes that, when hardware acceleration is turned on, any drawings on canvas will be doubled at top of the page.
At first, I thought, that this is caused only in Segment Display — a fabulous JS library, that I use. This is why, you’ll find a lot of references to it in this article. But then it turned out to be general Android problem, that appears not only in PhoneGap applications (which uses webview), but also in all pages served on Android 4.1.x+ platform.
So, you’ll also find some ideas, how to work around this problem, if you’re not using Segment Display.
Read More “Doubled canvas drawings on Android with hardware acceleration enabled”If your PhoneGap application loads some external content via AJAX, keep in mind that you have to include domain whitelisting in your config.xml.
PhoneGap is very strange about this, from version to version and from platform to platform, and sometimes allows you to access external resources without domain whitelisting (I had that issue, that this worked on Android 2.x, but failed on 4.x). So, to be sure, add it to every new project.
Read More “PhoneGap apps must use domain whitelisting to access external resources”
If you’ll ever get some cheap Chinese crap, called tablet, you may face up a strange issue. Though device is most likely equipped with Android 4.0 or newer, it still has old Android Market (not Google Play) installed. Opening Android Market does not perform automatic update to Google Play. And attempt to install any application ends with hang-up. If you’re experiencing this or similar problems, you may find solution here.
As of writing this, Ripple Emulator itself is old, long-time not updated. But, what is much more wrong, it has very, very old version of PhoneGap behind. Currently it is based on version 2.0.0, while we already have version 3.0.0 in local PhoneGap building and 2.9.0 in PhoneGap Build. If you compare PhoneGap API reference from version 2.9.0 with the one inside Ripple Emulator, you’ll see that changes are dramatic. That’s why being able to detect, when your application is running in debug mode (i.e. under Ripple Emulator) is essential.
Read More “Detecting if PhoneGap application is run under Ripple Emulator”For one of my PhoneGap project’s I needed a function that will convert local (native) language name into international (English) language name. And another one that will return correct two-letter language code (ISO 639-1), again, based on native language name. This was required because PhoneGap applications are returning local name for currently selected language (so, you’ll get polski instead of Polish, Tiếng Việt instead of Vietnamese and so on).
Here are these functions for future reference and for others, who could possible find them useful.
Read More “Get language name and ISO code based on native language name”I wrote as simple PhoneGap multi-language demo, which:
You can get sources of this demo application from GitHub.
Both mysysgit and TortoiseGit are password-less in the meaning, that they don’t store any passwords. If you want to avoid typing your GitHub login password and over and over again, the only option is to setup password-less login using SSH keys. This article is my personal check-list on how to configure each computer as painlessly as possible.
Read More “Setting up password-less connection in TortoiseGit”
There are several ways to get rid of Shared Folders Synchronization item from context menu (right-click menu) in Windows. They all depends on version of your Windows or Microsoft Office (responsible for adding this) and level of your computers skills. This post started as a quick example of removing this nasty context menu item, but ended up as a list of solutions, that you can use to remove many things that may slow down your computer. Consider reading this, even if you don’t have Microsoft Office, but your computer seems to be too slow.
Read More “Remove Shared Folders Synchronization from context menu item”
You won’t find proper option (in Microsoft Security Essentials configuration) for removing Scan with Microsoft Security Essentials... menu item, that is added after each Microsoft Security Essentials installation. So, you have to help yourself.
According to PHP team, common hashing functions such as md5() and sha1() are unsuitable for passwords. Why? They’re to fast and by this, not so secure and open to brute-force decrypt. No matter, what you think about this, we must admit, that md5() function is listed among “Text Functions” in PHP’s docs, so it doesn’t even touch “Encryption” or “Security” parts in documentation.
Mcrypt seems to be good alternative to those. And mcrypt-module-open function contains good example on both crypting and decrypting with mcrypt. See mentioned article for more details and other alternatives.
As you search the Internet, you’ll find many sources (like BinaryTides blog) with many useful (or not) tips on how to serialize or encode variables and data in PHP.
The problem is, that not all of these methods are useful, when we’re dealing with URLs.
Read More “Serialize or encode data in PHP to be used in URLs”Netbeans’ Git client is a bit different that others (like TortoiseSVN) and offers additional option for push/pull commands (starting from version 7.3). It is Push to Upstream and Pull from Upstream. What is the difference from regular “non-upstream” versions. Not to big. Second (“upstream”) ones offer dirrect execution of command, without displaying any dialog (if properly configured). While regular (“non-upstream”) always opens Push to Remote Repository dialog.
So, after initial configuration, it is more convinient to use Push to Upstream instead of Push.
It is always a few clicks less, right? :]
Twitter Bootstrap is my main framework for creating websites and mobile PhoneGap application and it actually has anything I need, except a good slider.
Note, that I’m talking about a bar and a knob on it, which you can drag to set the value. I’m not talking about any kind of image slider, gallery or presentation. As most people know, Bootstrap has such thing, which is called Bootstrap Carousel.
I tired to use jQuery UI’s slider, as it is quite small (39,4 kB of minified JS and CSS code). This is not very much, when compared to whole jQuery UI library size. But it is way too much, when we thing that this 40 kB of code does nothing that building a simple slider (I’m not using jQuery UI at all). Plus: it works more than poorly on mobile devices with Android 2.x.x (a bit better on Android 4.1.x).
So, I was urgent need for an alternative. Thanks to Stack Overflow, I came across noUiSlider — jQuery Range Slider. And immediately felt in love with it.
In most more complex PhoneGap applications developers split app contents into several files. When these are truly separate “screen” of application, and are accessible via normal <a href=""> links, everything is fine.
Problems arise, when you want to split contents of one “screen” into several files. For example to have tabs, where each tab content is stored in external separate file. In this case, content is loaded on tab’s tab (or preloaded during application init) using AJAX (which can be used to request local files as well).
If you rely on jQuery and want to use .load() or .ajax() function, read this post to avoid common pitfalls.
If you use pause and resume events in your PhoneGap application, keep in mind, that these are fired for every situation, when your application goes to background.
Not only, when user presses Home button, but also when for example a calendar notice popus up.
Turning device screen off and on again also counts as loosing your app to background, so it will also cause PhoneGap to fire pair of pause and resume events.
Though Ripple Emulator is mainly produced for testing Blackberry applications, you can easily use it for testing PhoneGap apps, build for any platform supported by PhoneGap. But, it is still Blackberry-oriented tool and so it is its documentation, so you may face some missing parts and blackholes, when reading it. Especially, when you’re building your apps in the cloud, using PhoneGap Build.
The aim of this post is to fix as many of these as possible and save you some time.
Read More “Using Ripple Emulator for Windows to test PhoneGap applications”
Using device accelerometer in PhoneGap is quite easy. PhoneGap API gives you example on how to:
Answering the question, “What does the accelerometer actually measuers” could be a little bit harder.
Javascript can be challenging and is full of traps for the beginners. Today I was caught into one of such traps and I was struggling with Uncaught ReferenceError, functionName() is not defined error, for way to long. Solution seems easier than I was thinking, so I wrote this short memo to future myself to avoid falling into the same trap again.
Read More “Function is not defined, when using setInterval or setTimeout”
It is uncommon and not to often to place external links (leading to an external pages) inside application built with PhoneGap. However, if you decide to do so, read this article to get knowledge about issues you may run into. If you target Android 2.x as well, you’ll also find some interesting information here.
There are generally two things, you should consider about links in PhoneGap applications. One about external links and second about links under overlay.
Links to external pages replaces (covers) entire are of your application and thus made it nearly completely unusable to the user.
If you use direct link (<a href="http://www.acrid.pl/">acrid.pl</a>) and user taps it, contents of destination page (or eventually an error message) will cover entire application area, completely replacing contents of your mobile application. What is more important, device’s back button won’t work in this case, meaning that your application is actually dead upon user taps such link.
There is no going back and leaving app, going to home screen to restart your application again, will restore it from memory in previous state — that is, with external webpage open, not with contents of your application. The only option user have to get back to your application is to force to close it from task manager and hard-restart it. This is not wanted behavior in most situations.
To avoid these problems, always open links to external webpages using specific Javascript code. For example:
window.open(url, '_system', 'location=yes');Part location=yes is important. Leaving third parameter empty will result in above mentioned behavior.
This code is tested to work in Android. According to PhoneGap documentation and blog, it should work in other platforms as well.
For your own convinience and purity of your code, you should consider enclosing this in a handy function:
function openUrl(url)
{
window.open(url, '_system', 'location=yes');
}and call it using either jQuery binding:
$('#btnAcrid').click(function()
{
openUrl('http://acrid.pl/');
});or direct linking:
Visit <a href="#" onclick="openUrl('http://acrid.pl/');">this page</a> for more information.Either way is good and prevents your application from falling into above mentioned problems.
PhoneGap app under Android 2.x ignores full-page overlays and allows tapping links below it.
If you’re using any Javascript library to replace dully Javascript alert(), confirm() and prompt() functions with cool looking modal dialog boxes — like Twitter Bootstrap, Apprise and many more — keep your eye on some trobules you may run into under Android 2.x.
I tested this issue on two different versions of Android and on two separate mobile devices:
Under first one, user were able to tap links below full-page overlay, but nothing happened as a result of this.
Under LG GT540 with Android 2.3.3 and CyanogenMod, tapping links below overlay sometimes resulted in opening target link. If such link wasn’t “secured” using method described above, again entire content of mobile application was replaced by external webpage content, making application unusable.
Android 4.x is free of this problem (tested under Samsung Galaxy Nexus with Android 4.2.2). You can’t tap at all anything below full-page overlay.
I wasn’t able to further investigate, whether this problem is caused by PhoneGap, used Javascript library (Bootstrap, Apprise, etc.), Android system or CyanogenMod mode.
Adding a mobile ads to monetize your mobile applications is a quite easy task, when you’re compiling your applications locally. And there were many articles written about this (like the one at PhoneGap Wiki).
But, when you compile in-the-cloud, using PhoneGap Build only, things are getting much more complicated.
Read More “Mobile ads in PhoneGap applications build with PhoneGap Build [updated]”
This is just as quick as possible example on getting you to the subject, without unnecessary blah, blah. Only pure detail on how to sent AJAX / JSON calls (cross-domain!) from your PhoneGap application. With references to other intresting and more comprehensive sources in the end.
BTW: You don’t even need a response server ready to get started! Example is based on JSON Test — Simple testing for JSON-based applications service.
This article assumes that you’re using jQuery in PhoneGap application.
Read More “AJAX and JSON cross-domain calls from PhoneGap application”
This example shows how to implement client-side stylesheet changer, based on Twitter Bootstrap framework, Bootswatch styles for Bootstrap and jQuery. I used cssnewbie.com tutorial, with some own modifications.
This example is my modified answer to my own question at StackOverflow.
Read More “Simple Bootstrap Bootswatch style changer based on jQuery”