CODEWITHSUNDEEP
jqueryjquery-mobile
user700284
user700284

Reputation: 13620

jQuery Mobile styles are not getting applied in elements outside data-role="page"

In my jQM application I have a header navbar which I want to keep fixed. Because of the issue with fixed headers in jQM, I decided to have a structure like this:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body style="overflow:hidden;"> 
<div data-role="navbar">
    <ul>
        <li><a href="#page1" class="ui-btn-active">One</a></li>
        <li><a href="#page2">Two</a></li>
    </ul>
</div>
<div id="page1" data-role="page" style="top:80px">
    <div data-role="content">
        Page1
        <input type="button" value="Click"/>
    </div>
</div>

<div id="page2" data-role="page" style="top:80px">
    <div data-role="content">
        Page2
        <input type="button" value="Click2"/>
    </div>
</div>
</body>
</html>

The intention is to keep the navbar fixed at the top. When you click on the respective tab it should load the page. Since I have given a padding-top for the data-role="page" div it will appeard as if the header stays fixed on the top. But it is not working as intended in the sense that data-role="navbar" styles are not getting applied to the navbar in header.

Any solution to make it work?. Thanks in advance.

Demo here - http://jsfiddle.net/UPZrs/

Upvotes: 4

Views: 2571

Answers (3)

Jasper
Jasper

Reputation: 75993

I had this exact same issue. I ended up just grabbing the HTML from my navbar after jQuery Mobile had stylized it (via FireBug) and I used that code which looks something like this:

<div id="edge_menu">
    <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-c">
            <div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true">
                <div class="ui-btn-text">
                    <a href="/m/default.html" class="ui-link-inherit">Home</a>
                </div>
                <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
            </div>
        </li>
    </ul>
</div>

If you examine the classes that jQuery Mobile adds it's actually pretty easy to alter the classes to change theme or rounding/shadow options.

The other work-around I found to work is to have your menu inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move the menu div out of the data-role="page" div to be a child of the body tag.

Upvotes: 2

Phill Pafford
Phill Pafford

Reputation: 85308

Interesting problem. I like the navigation stays but the content changes. This might be something jQM could offer in the future. Here is my attempt using @GerjanOnline's method but the problem is jQM is repositioning the page every time so it kinda looks jerky. Here is a attempted solution but as you can see jQM still only uses what' sin the page tag. I'm just showing the elements behind the page by pushing them down:

Maybe this will give you an idea on how to restyle them with jQM's controls.

Added the Feature Request: https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

Upvotes: 1

GerjanOnline
GerjanOnline

Reputation: 1881

You can use the "navbar" plugin: $("div:jqmData(role='navbar')").navbar();

http://jsfiddle.net/UPZrs/1/ You still need to do some layout fixing

Mind that position:fixed isn't very well supported in all kind of mobile browsers

Upvotes: 1

Related Questions