jQueryMobile and Themeroller - do you need to re-roll themes when updating jQueryMobile?

Question

I am using jQueryMobile 1.1-rc1 and my pageloading indicator is not displaying correctly.

I originally made my theme when the themeroller first came out, and everything has been fine through the last few updates of jQM until the most recent.

Now the loading icon doesn't spin and is no longer centered in the bubble.

Do you need to re-roll themes in themeroller when updating? I don't see the option of selecting the target version in themeroller.

Astto

Answer 1

I took another look at this and the answer is that ThemeRoller for jQueryMobile is only compatible with 1.0.x release of jQM.

Todd Parker Answered the question here in the jQueryMobile issue tracker.

Tyler Benzinger Answered the question here in the Theme Roller issue tracker.

It seems we will have to wait for Theme Roller to support version 1.1 themes.

Update: Solution

In your theme.css comment out or delete the .ui-icon-loading section and insert the following (from the 1.1-rc1 css)

/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radiu$
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px;  }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }

/* loading icon */
.ui-icon-loading {
  background: url(images/ajax-loader.gif);
  background-size: 46px 46px;
}

Make sure you have the new ajax-loader.gif file in the theme images folder.

Astto

Answer 2

I noticed that the old file name was ajax-loader.png. I think it is now ajax-loader.gif, so you might want to double check that.

Grisham

Answer 3

The last few updates to the framework have changed the CSS quite a lot, and that will continue for the 1.1 release. When you change to a newer version of the JS file then you should also re-package your theme from the Themeroller.

In the last update they changed the CSS framework quite a bit for fixed headers/footers, transitions, and some other things (like the loading message has been revamped). The last update also gave the loading message more options so the structure of the HTML probably changed and the old CSS isn't quite right compared to the new JS.

To test this you can link to a standard current version of the CSS and see if the loading message appears correctly.

Beaverette

I found this bug report which seems related github.com/jquery/jquery-mobile/issues/3822 – Astto