Tip #2: Boosting Cordova’s jQuery Mobile Apps Performance

One of the common issues when you use jQuery Mobile with Apache Cordova in many of the platforms especially in the old versions Android platform is that you feel that the transitions between the app pages are slow.

The solution for this problem is to disable jQuery mobile transition effects as follows when the jQuery mobile is loaded as follows.

    $.mobile.defaultPageTransition   = 'none';
    $.mobile.defaultDialogTransition = 'none';

Disabling transition effects will dramatically boost your Cordova’s jQuery mobile app’s transition performance.

Do not believe people who say jQuery Mobile is slow with Apache Cordova.

Reference:

“JavaScript Mobile Application Development” Book:

Back from JMaghreb 2014

JMaghreb 2014
I just get back from JMaghreb 2014 that was held in Casablanca, Morocco 05-06 November 2014. The conference organization was fantastic and there were a lot of attendees in the conference sessions.
Picture1
I had the chance to present “Developing JavaScript Mobile Apps Using Apache Cordova” in 06 November, the session had many attendees and I was really amazed by the energy, enthusiasm, and responsiveness of the attendees during the session.
Picture2
Picture3
Picture3

The session went great and I was glad to give a copy of my “JavaScript Mobile Application Development” book to one of the attendees who answered a JavaScript quiz at the end of my session.
Books

I uploaded my session below:

Tip #1: Cordova Integration with jQuery Mobile in Windows Phone 8

One of the common issues when you use jQuery Mobile with Apache Cordova in Windows Phone 8 is the following:

  • Trimmed header title.
  • Footer is not aligned to bottom.

The following figure shows this problem in details:

Windows Phone 8 Bug

Windows Phone 8 Bug

In order to fix the “Trimmed header title” problem, you need to override ui-header and ui-title css classes as shown in the following code snippet:

.ui-header .ui-title {
    overflow: visible !important; 
}

In order to fix the “Footer is not aligned to bottom” problem, you need to hide the System Tray by editing MainPage.xaml file as shown in the following code snippet:

<phone:PhoneApplicationPage 
    ...
    shell:SystemTray.IsVisible="False">
    ...
</phone:PhoneApplicationPage>

After applying these two fixes, you will find your Cordova app properly displayed in your Windows Phone 8 device.

Reference:

“JavaScript Mobile Application Development” Book: