Saturday, March 25, 2017
Saturday, February 25, 2017
Wednesday, February 1, 2017
Wednesday, May 28, 2014
Solution to the Page Blinking/Flickering Issue in jQuery Mobile (PhoneGap App)
I've been struggling a lot with the issue of page blinking/flickering issue which constantly happened in my PhoneGap app. The issue does not lie in the PhoneGap SDK but the UI framework I used which is the jQuery Mobile (jQM). I'm using jQuery Mobile version 1.3.2 and PhoneGap 3.3.0.
This is how the issue happened. Whenever I moved from one page to another page (I'm using the multi-page template structure of jQM), the latter page would shift abruptly after the page transition had completed. What I mean by "shirt abruptly" is every element on the 2nd page is moved towards the top left corner of the screen around 10 to 30 pixels right after the whole page has been rendered completely. This issue is most noticeable in the iOS version of my PhoneGap app and less significant in the Android version. It does not affect the Web App version at all.
After days of fruitless research, I finally found a working solution to get rid of this annoying issue. Kudos to the user Jeff who posted the solution in the forum. Here's the link: http://stackoverflow.com/questions/10453368/why-do-the-pages-blink-flicker-after-transitions-in-my-jquery-mobile-phonegap-ap
Here's what you need to do. Add the following CSS and JavaScript lines to your files.
CSS
body {
/* Setting body margins to 0 to have proper positioning of #container div */
margin: 0;
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
JavaScript
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
And then you need to wrap all your jQM pages (single or multi-pages) within a div with the id="container".
HTML
<body>
<div id="container">
<div data-role="page">
...
</div>
</div>
</body>
That's it! You don't need to disable all your fancy page transition effects, or changing your tag attributes or even hacking some of the jQM stylesheets (e.g. -webkit-backface-visibility).
This is how the issue happened. Whenever I moved from one page to another page (I'm using the multi-page template structure of jQM), the latter page would shift abruptly after the page transition had completed. What I mean by "shirt abruptly" is every element on the 2nd page is moved towards the top left corner of the screen around 10 to 30 pixels right after the whole page has been rendered completely. This issue is most noticeable in the iOS version of my PhoneGap app and less significant in the Android version. It does not affect the Web App version at all.
After days of fruitless research, I finally found a working solution to get rid of this annoying issue. Kudos to the user Jeff who posted the solution in the forum. Here's the link: http://stackoverflow.com/questions/10453368/why-do-the-pages-blink-flicker-after-transitions-in-my-jquery-mobile-phonegap-ap
Here's what you need to do. Add the following CSS and JavaScript lines to your files.
CSS
body {
/* Setting body margins to 0 to have proper positioning of #container div */
margin: 0;
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
#container {
position: absolute;
width: 100%;
height: 100%;
}
JavaScript
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
And then you need to wrap all your jQM pages (single or multi-pages) within a div with the id="container".
HTML
<body>
<div id="container">
<div data-role="page">
...
</div>
</div>
</body>
That's it! You don't need to disable all your fancy page transition effects, or changing your tag attributes or even hacking some of the jQM stylesheets (e.g. -webkit-backface-visibility).
Tuesday, May 20, 2014
Unlocking the Developer Options and USB Debugging features in CyanogenMod ROM
Recently I just successfully installed the popular CyanogenMod custom ROM on my Samsung Galaxy SII phone.
I used my phone to do a lot of development and testing works with PhoneGap. I used to connect my phone via USB cable to my development laptop and deploy my PhoneGap apps directly into it to test run the functionality of PhoneGap APIs on my phone's hardware.
After I had installed the custom ROM on my phone, the PhoneGap SDK on my development laptop could not detect my phone any more and thus I couldn't deploy my apps into it. I had enabled the 'Allow installation of apps from unknown sources' security setting in my phone but it didn't do the trick.
Finally I managed to find the answer on the Internet that the CyanogenMod has hidden the Developer Options which provides the facility to do USB debugging. I have to admit that I had forgotten totally about it since it was hidden away from view. Once I followed the steps to 'unlock' it, the PhoneGap SDK is once again able to communicate with my phone.
Credits to the link below which has provided me with the guidance to solve the issue:
http://en.code-bude.net/2013/03/05/how-to-activate-usb-mass-storage-and-developer-options-on-cyanogenmod-10-1/
Here are the quick steps:
One thing noteworthy is that the existing Samsung USB driver installed on my development laptop is still working fine with the phone even though it has been replaced with the CyanogenMod ROM. Before I found the solution I was actually looking for something like 'Cyanogen USB driver for Windows' but it turns out that it is not necessary at all.
I used my phone to do a lot of development and testing works with PhoneGap. I used to connect my phone via USB cable to my development laptop and deploy my PhoneGap apps directly into it to test run the functionality of PhoneGap APIs on my phone's hardware.
After I had installed the custom ROM on my phone, the PhoneGap SDK on my development laptop could not detect my phone any more and thus I couldn't deploy my apps into it. I had enabled the 'Allow installation of apps from unknown sources' security setting in my phone but it didn't do the trick.
Finally I managed to find the answer on the Internet that the CyanogenMod has hidden the Developer Options which provides the facility to do USB debugging. I have to admit that I had forgotten totally about it since it was hidden away from view. Once I followed the steps to 'unlock' it, the PhoneGap SDK is once again able to communicate with my phone.
Credits to the link below which has provided me with the guidance to solve the issue:
http://en.code-bude.net/2013/03/05/how-to-activate-usb-mass-storage-and-developer-options-on-cyanogenmod-10-1/
Here are the quick steps:
- Go to the 'About Phone' settings page.
- Look for an item called "build number" and tap it seven (7) times to unlock the Developer Options.
- Now look for the "Developer Options" settings page and enable the USB debugging option.
One thing noteworthy is that the existing Samsung USB driver installed on my development laptop is still working fine with the phone even though it has been replaced with the CyanogenMod ROM. Before I found the solution I was actually looking for something like 'Cyanogen USB driver for Windows' but it turns out that it is not necessary at all.
Sunday, May 18, 2014
Achievement Unlocked: Installed CyanogenMod on my Samsung Galaxy SII phone
Two days ago I finally installed the popular CyanogenMod custom ROM on my Samsung Galaxy SII phone, effectively replacing the Samsung's aged stock ROM which was running Android 4.1.2. With this installation, now my old phone is running Android 4.3.1.
What I did was an entry-level approach, by simply following the steps given on the Cyanogen's website: http://beta.download.cyanogenmod.org/install
There are basically two ways:
The result? I got a (almost) brand new phone again! The CyanogenMod custom ROM gave me back plenty of free Internal Storage space at my disposal. This was one of the most annoying things I experienced with the Samsung's stock ROM as it was loaded with a lot of "bloatware" that came from the factory. I have now (after installed a few essentials apps of my choice) 1.33GB free space out of the 1.97GB total space while previously I only got around 400MB! Now my phone works smoother and faster and I'm loving my phone again!
What I did was an entry-level approach, by simply following the steps given on the Cyanogen's website: http://beta.download.cyanogenmod.org/install
There are basically two ways:
- You can either install the CyanogenMod Installer App on your Android-based phone; or
- You can install CyanogenMod Windows Installer on your PC running Windows Vista/7/8.
The result? I got a (almost) brand new phone again! The CyanogenMod custom ROM gave me back plenty of free Internal Storage space at my disposal. This was one of the most annoying things I experienced with the Samsung's stock ROM as it was loaded with a lot of "bloatware" that came from the factory. I have now (after installed a few essentials apps of my choice) 1.33GB free space out of the 1.97GB total space while previously I only got around 400MB! Now my phone works smoother and faster and I'm loving my phone again!
Tuesday, November 12, 2013
Solution to free up storage space on Samsung Galaxy SII
After months of struggling with running out of storage space for apps on my Samsung Galaxy SII and ending up in dead end every time when I looked for a solution on the Internet, I finally managed to find a quick and effective way to free up the limited storage space of this phone. The thing about this phone model and its biggest problem is, it has an internal USB storage of around 12GB which couldn't possibly be used to install apps. Instead, all the apps by default are installed in the 2GB device memory which is shared with the OS. So, one can imagine how frustrated the user will become and eventually forced to consider replacing it with a newer model.
The solution I found was posted in the AndroidCentral forum by a dude alias Stu40 which can be found at this link: http://forums.androidcentral.com/samsung-galaxy-s-ii/272384-galaxy-s2-cannot-download-updates-new-apps.html
This is his suggested method (copied from his post):
A simple way to free up storage space is by deleting all the log files in the device memory. Just dial *#9900# on your phone and select option 2 “Delete dumpstate/logcat” in the prompted menu. It's not necessary to root your phone either. That’s it!
It works like a charm! Thanks dude!
The solution I found was posted in the AndroidCentral forum by a dude alias Stu40 which can be found at this link: http://forums.androidcentral.com/samsung-galaxy-s-ii/272384-galaxy-s2-cannot-download-updates-new-apps.html
This is his suggested method (copied from his post):
A simple way to free up storage space is by deleting all the log files in the device memory. Just dial *#9900# on your phone and select option 2 “Delete dumpstate/logcat” in the prompted menu. It's not necessary to root your phone either. That’s it!
It works like a charm! Thanks dude!
Thursday, September 12, 2013
Finally beaten D3 Hardcore mode
Tuesday, September 10, 2013
Monday, September 9, 2013
Getting started with the jQuery-File-Upload plugin and cutomizing the upload directory from client-side script
Last week I just got started to explore the elegant and powerful jQuery plugin built by Sebastian Tschan which is hosted here: https://github.com/blueimp/jQuery-File-Upload
It had been very easy and straightforward to deploy it onto my PHP server based on the helpful guide provided. After that I wanted to modify the plugin to be able to upload files and store them in custom sub-directories at server side. This has to be specified by my client-side Javascript and each time the client might point to the same directory or a different one depending on the client operations.
Luckily it has been figured out by a kind person who has generously shared the steps here: https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-%24_GET-dynamic-Directories
Hope my post might help someone to find the link to there too. :)
It had been very easy and straightforward to deploy it onto my PHP server based on the helpful guide provided. After that I wanted to modify the plugin to be able to upload files and store them in custom sub-directories at server side. This has to be specified by my client-side Javascript and each time the client might point to the same directory or a different one depending on the client operations.
Luckily it has been figured out by a kind person who has generously shared the steps here: https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-%24_GET-dynamic-Directories
Hope my post might help someone to find the link to there too. :)
Subscribe to:
Posts (Atom)