Learn how to customize jQuery Mobile application

Before I show you how to customize jQuery Mobile pages and widgets let us first discuss what is jQuery Mobile and how it works. The standard jQuery Mobile application is built from at least one page up to any number you can think of.

The page is the primary unit of interaction in jQuery Mobile and is used to group content into logical views that can be animated in and out of view with page transitions. An HTML document may start with a single “page” and the AJAX navigation system will load additional pages on demand into the DOM as users navigate around. Alternatively, an HTML document can be built with multiple “pages” inside it and the framework will transition between these local views with no need to request content from the server.

Read moreLearn how to customize jQuery Mobile application

Switching from jQuery Mobile to AppFramework

App Framework is not a new name on a current HTML5 mobile framework market. Now owned by Inter its used to be called jqMoby. Like Sencha Touch, it was used to make more native-like hybrid mobile applications and at the same time this is the biggest difference between it and jQuery Mobile.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

jQuery Mobile was never intended to be used only as a HTML5/CSS3 hybrid mobile app framework. On a similar track like its older brothers jQuery and jQuery UI it was intended to be used as a robust responsive solution in ever growing mobile web application market. What it took from its older brother was a all around browser support. It can be executed in every possible and available HTML5 browser and it will work just the same.

Read moreSwitching from jQuery Mobile to AppFramework

How to prevent jQuery Mobile page navigation

Let’s say we have a jQuery Mobile that requires a user to authorize itself and let’s say that a user had done that successfully. But here comes a problem. When working with jQuery Mobile, if Ajax is turned on, every page loaded into the DOM is a part of a single page. jQuery Mobile acts as a router that display correct content depending on our needs. If we press back button after successful authorization process, we will end up at a login page again.

This process must be done during a pagebeforechange page event (for those of you who are new to jQuery Mobile take a look here to find out more about page events). Mentioned page event will provide us with two keys called ‘toPage‘ and ‘fromPage‘. The first key will tell us destination page while the second one will tell us origin page.

Read moreHow to prevent jQuery Mobile page navigation

Creating Phonegap project on MacOS from Command Line

After a rather long hiatus and public demand here’s another Phonegap article. My last one was about building a native mobile app with PhoneGap and jQuery Mobile 1.4, most important part talked about creating the PhoneGap project from a command line. I’ve covered only Windows point of view, and an article grew too large to include MacOS, so I’m writing this article to rectify this problem. I will try not to stray too far from the main point, if you need a better understatement read my previous article.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Preparations

Download the listed software:

  • XCode
  • XCode Command Line Tool
  • Apache Cordova

Read moreCreating Phonegap project on MacOS from Command Line

Prevent scroll to the top before page transition in jQuery Mobile

During the page transition, if we scroll down the first page it will jump to the top before transitioning to the another page. This action is not an error nor is there a perfect solution for it. The issue is this, to animate the transition to the another page the viewport has to be at the top of the page. This way a current page and the page we are transitioning to are vertically lined up.

If you were half-way down a long list on one page and the page you are transferring to is only a few hundred pixels tall, a current page would animate off the screen properly. But the new page would not be visible as it would be above the viewport.

Two viable solutions exist, we’ll discuss both of them.

Read morePrevent scroll to the top before page transition in jQuery Mobile

jQuery Mobile and Leaflet integration

Henry A. Kissinger once told:

[quote]The absence of alternatives clears the mind marvelously.[/quote]

So why are we always looking for the opposite? Last few years Google maps became a standard in an online map industry. Unfortunately, bigger user base don’t always translate to a better service; precisely that happened to Google maps. Personally, this is not a problem for desktop computers, but a situation is not that good when viewed from the mobile perspective.

Read morejQuery Mobile and Leaflet integration

HTML5 Frameworks – Kendo UI from jQuery Mobile perspective

It is about time for me to write something about Kendo UI. At first I was very skeptical about this framework. I am not trying to state that Kendo UI is not good; the truth is far from it. It was a fear that people don’t want to read a review of a commercially available framework when there are numerous free of charge. If this is a deterrent in any way, then skip this article. Kendo UI may be the best HTML5 framework in existence, but it will not be useful unless there is a willingness to pay few hundred dollars (per developer / per server-side technology).

Read moreHTML5 Frameworks – Kendo UI from jQuery Mobile perspective