How to change the background color of jquery mobile footer?

jquery ios css cordova jquery-mobile

10,196

Solution 1

Thank to my co-worker, I finally found the root cause. When I test this html file with PC browsers, I double click on it. So it runs as a normal html file, which will load all declared resources inside <header> tag. But when I test on iPhone, I navigate to this html file from another page by using $.mobile.changePage(), which will load the content of <body> tag only. At this situation, my css file wasn't loaded. That's the reason why my page doesn't work on iPhone.

So, to fix this problem, I just need to move all resources declarations (inside <head>) to the bottom of <body> tag. By this way, the resource files will be always loaded.

Hope this helps.

Solution 2

You need to use the actual jQuery footer mobile selectors. You can use Safari web inspector on an with an iPhone to find the exact selectors for anything and change it accordingly in your own stylesheet.

Here are some selectors I think would do the job:

.ui-bar-a.ui-footer {

/*Change background here */

}

P.S In your stylesheet, if you want to overide jQuery mobile, make your selectors more specific. So instead of...

.ui-bar-a.ui-footer {

/*Change background here */

}

Use....

.my-footer.ui-bar-a.ui-footer {

/*Change background here */

}

Or....

.home-page .ui-bar-a.ui-footer {

/*Change background here */

}

10,196

Author by

Nguyen Minh Binh

I have been developing many mobile applications for more than 8 years with love, passion and enthusiasm for each and all of my apps. Being a developer, to me, is not only a career, it is also an opportunity to challenge myself and acquire more knowledge with each new project. I recognize myself as a friendly, skilled and disciplined developer, and I can adapt well both individually and collaboratively. Outside of work, I love playing around with my two sons as seeing their innocent smiles gives me more energy and motivation to work harder.

Updated on June 04, 2022

Comments

Nguyen Minh Binh almost 2 years

I am using jquerymobile to build an PhoneGap app for iOS,I try to change the background of jquerymobile but I can't. Here is my html source:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />

        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
        <script type="text/javascript" src="../../js/cordova-2.5.0.js"></script>
            <link rel="stylesheet" href="mainUI.css"/>


    </head>
    <body>

        <div data-role="page" id='mypage'>
            <div data-role="header" data-position="fixed">
                <h1>Page Title</h1>
                <a data-role="button" data-rel="back">back</a>
            </div><!-- /header -->

            <div data-role="content">
                content
            </div><!-- /content -->
            <div class="my-footer" style="background-color: #00FF00;" data-role="footer" data-position="fixed">
                <div class="my-tabbar">
                    MYTEST div
                </div>
            </div>
        </div><!-- /page -->
    </body>
</html>

and here is my custom CSS file:

.my-footer {
    background-color:   #ff0000;    
}
.my-footer .my-tabbar{
    background-color:   #ff0000;
}
.my-tabbar{
    background-color: #ff00ff;
}

When I ran this html on Chrome browser, I worked. But When I ran on iPhone5 device, it didn't. Please helps.