jquerymobile loading message theme

Question

I have a question about the loading message on jQuery Mobile.

By default, the loading message theme is a, according to jQuery Mobile code:

<div class="ui-loader ui-body-a ui-corner-all" style="top: 204.5px; ">...</div>

I would like to know how I can change the default theme of this div, I can't figure it out.

Thanks in advance.

This has been updated as of jQuery Mobile 1.1.0. There are a few defaults you can set to alter the appearance of the loader: jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html (also see my answer for and update) — Jasper
– Jasper, Commented Apr 19, 2012 at 20:42

Jasper · Accepted Answer · 2012-04-19 20:55:09Z

6

Answer for old version, see below for jQuery Mobile 1.1.0+

~~I'm not aware of a variable you can set in the mobileinit event handler but you can change the theme'd class when the document is ready:~~

~~//run the code on `document.ready` jQuery(function ($) { //find the loader div and change its theme from `a` to `e` $('.ui-loader').removeClass('ui-body-a').addClass('ui-body-e'); });~~

~~Here is a jsfiddle of the above solution (you can change the theme for the loading dialog from a list of buttons): http://jsfiddle.net/jasper/eqxN9/1/~~

Update

jQuery Mobile 1.1.0 adds some support for this, you can set some defaults:

loadingMessage string, default: "loading" Set the text that appears when a page is loading. If set to false, the message will not appear at all.

loadingMessageTextVisible boolean, default: false Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.

loadingMessageTheme string, default: "a" The theme that the loading message box uses when text is visible.

Source: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Note that you must set loadingMessageTextVisible to true for the loader theme override to work because of the new loader design. If you don't set a message then there is no background to change the color-of...

Here is a demonstration: http://jsfiddle.net/vHJnd/

A quick peruse through the documentation shows that you can do this on the fly as well now:

$.mobile.showPageLoadingMsg("a", 'loading message');

You can add these arguments to the showPageLoadingMsg() function to force a theme and message to display. This is an alternative to setting a default value.

Here is a demonstration: http://jsfiddle.net/vHJnd/1/

edited Apr 19, 2012 at 20:55

answered Nov 23, 2011 at 17:19

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jinglesthula Over a year ago

well... the best solution next to making the framework flexible/configurable ;)

Jasper Over a year ago

@jinglesthula I updated my question because as of the latest stable version of jQuery Mobile, there are some options you can set for the loader.

GerjanOnline · Accepted Answer · 2011-11-23 17:28:05Z

1

It looks the loading message isn't themable.

When you look in the source code you will see:

// loading div which appears during Ajax requests
// will not appear if $.mobile.loadingMessage is false
var $loader = $( "<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>" );

This means that it picks always ui-body-a

Probably the safest way is to override div.ui-loader.ui-body-a, see http://jsfiddle.net/N7Z9e/95/

edited Nov 23, 2011 at 17:28

answered Nov 23, 2011 at 17:09

GerjanOnline

1,88116 silver badges18 bronze badges

1 Comment

jinglesthula Over a year ago

The issue is really a framework one, not a CSS or a here's-my-js-workaround one. Typically I'd prefer a CSS solution to a js one, but with a CSS solution like this, if you were ever to theme roll a different 'e' swatch you'd have to remember to manually update the e-ish override of your 'a' swatch; easy to forget. And while the js solution from Jasper works around this issue, a configurable loader in the first place would be much much better.

Jake Boone · Accepted Answer · 2012-03-06 17:17:17Z

1

In jQuery Mobile 1.1, the loader is now themeable. A demo/test page is here: http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html

answered Mar 6, 2012 at 17:17

Jake Boone

1,5002 gold badges14 silver badges29 bronze badges

1 Comment

jinglesthula Over a year ago

the old 'right' answer is now obsolete. No need to hack around things :)

Phill Pafford · Accepted Answer · 2011-11-23 17:26:03Z

Well I would suggest the jQM ThemeRoller Tool they released:

http://jquerymobile.com/themeroller/

but if you wanted to play around with it, here you go:

http://jsfiddle.net/yLyFs/5/

JS

$('.changeLoadingBackgroundColor').click(function() {
    $.mobile.showPageLoadingMsg();
    var bgColor = $(this).attr('id');
    var loader  = $('div.ui-loader');

    loader.removeAttr('class');
    loader.attr('class','ui-loader ui-body-'+bgColor+' ui-corner-all');
    $(this).trigger('create');
});

HTML

<div id="test" data-role="page">
    <div data-role="content">
        Change the Background Color of the Loading Message, Choose a <b>Theme</b>
        <div data-role="controlgroup" data-type="horizontal">
            <input type="button" id="a" class="changeLoadingBackgroundColor" value="A"/>
            <input type="button" id="b" class="changeLoadingBackgroundColor" value="B"/>
            <input type="button" id="c" class="changeLoadingBackgroundColor" value="C"/>
            <input type="button" id="d" class="changeLoadingBackgroundColor" value="D"/>
            <input type="button" id="e" class="changeLoadingBackgroundColor" value="E"/>
            <input type="button" id="custom-color" class="changeLoadingBackgroundColor" value="Custom Color"/>
        </div>
    </div>
</div>

CSS

.ui-body-custom-color,
.ui-dialog.ui-overlay-b {
    border: 1px solid         #7FFF00 /*{b-body-border}*/;
    background:             #cccccc /*{b-body-background-color}*/;
    color:                     #8A2BE2 /*{b-body-color}*/;
    text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/;
    font-weight: normal;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #e6e6e6 /*{b-body-background-start}*/), to( #ADFF2F /*{b-body-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/);
}
.ui-body-custom-color,
.ui-body-custom-color input,
.ui-body-custom-color select,
.ui-body-custom-color textarea,
.ui-body-custom-color button {
    font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-body-custom-color .ui-link-inherit {
    color:     #8A2BE2 /*{b-body-color}*/;
}

.ui-body-custom-color .ui-link {
    color: #00FFFF /*{b-body-link-color}*/;
    font-weight: bold;
}

.ui-body-custom-color .ui-link:hover {
    color: #00FFFF /*{b-body-link-hover}*/;
}

.ui-body-custom-color .ui-link:active {
    color: #00FFFF /*{b-body-link-active}*/;
}

.ui-body-custom-color .ui-link:visited {
    color: #00FFFF /*{b-body-link-visited}*/;
}

imaginethepoet · Accepted Answer · 2012-02-01 19:56:49Z

The js fiddle listed (http://jsfiddle.net/N7Z9e/95/) is a good starting point. I'm building on to this a little bit. I find you sometimes have to use !important to override the base styles. I hate using it but no other good way to get around it at times.

    /* override loader */
    div.ui-loader.ui-body-a {
    border: 3px solid #104070  /*{a-body-border}*/;
    background-color: rgba(0, 62, 87, .9); color: rgba(0, 62, 87, .9);
    background-image: none;
    font-weight: normal;
    }

/* Control the text placement, font size, etc..*/    
    div.ui-loader h1 { margin-top:10px; margin-bottom:4px; color:#fff !important;}


    /* Change The Spinner Image And Styles *
    .spinner{

    }

Important Note: In a future version of JQM the loader will be easier to control the message in the loader. You can see some improvements by via the git hub.

Taqi Raza Khan · Accepted Answer · 2015-09-21 13:06:09Z

0

I have very successful solution for this ...

you just go to your jquery-mobile.js. you have to take these steps here

find " defaultHtml:"< div class='"+b+"' >< span class='ui-icon-loading' >< /span >< h1 >< /h1 >< /div >"
replace it with
"defaultHtml:"//< div class='"+b+"' >//< span class='ui-icon-loading' >//< /span >< h1 >< /h1 >< /div >"

Best of Luck

please remove all spaces ...

edited Sep 21, 2015 at 13:06

answered Sep 21, 2015 at 12:48

Taqi Raza Khan

11 bronze badge

Collectives™ on Stack Overflow

jquerymobile loading message theme

6 Answers 6

Update

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Update

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related