Posts Tagged ‘jQuery Mobile’

jQuery Mobile ajax loading spinner animation

Saturday, June 11th, 2011

Some people seem to be a little bit unhappy with the way the default jQuery Mobile loading ajax spinner rotates. Luckily, this can be changed easily by contorlling the css animation settings. Here are three simple variations.

Works only in Safari and Chrome:

variation 1 (jQuery Mobile standard):

variation 2 (ease-in-out spun over multiple rotations):

variation 3 (linear):

CSS for variations 2 and 3:

.jqm-spin-demo .spin.var2 {
  -webkit-animation-name: spin_var2;
	-webkit-animation-duration: 12s;
}

@-webkit-keyframes spin_var2 {
	from {-webkit-transform: rotate(0deg);}
  	to {-webkit-transform: rotate(3600deg);}
}

.jqm-spin-demo .spin.var3 {
  -webkit-animation-timing-function: linear;
}

Phonegap 0.9.5 orientationchange javascript event

Wednesday, June 1st, 2011

Since Phonegap version 0.9.5 the orientationchange event is triggered on the document object instead of the window object. This might be a problem as most libraries (amongst jQueryMobile) expect the event to occur on the window object.

However, there is an easy solution (this one requires jQuery but can be easily adapted):

$(document).bind("orientationchange", function(event){
  $(window).trigger(event);
});

jfPortableDevicePlugin: Symfony to go

Sunday, February 27th, 2011

I wrote a symfony plugin that allows you to easily optimize your existing symfony application for mobile devices using jQuery Mobile.
And if you want to distribute your application in Android Market or Apple App Store it is possible using e.g. Phonegap.

If you wish to see the plugin in action you can visit the mobile version of my web page http://www.jonasfischer.net/m.

If you are visiting my website using one of the supported operating systems (e.g. iOs or Android) then you will be prompted if you wish to view the mobile-enhanced version or the regular version: http://www.jonasfischer.net/.

(more…)