Home/ Questions/Q 6124887
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T16:11:04+00:00

I am trying to create a html page with persistent footers using jquery mobile.This

  • 0

I am trying to create a html page with persistent footers using jquery mobile.This is the code I am using:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                Home Page
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="custom" class="ui-btn-active">Home</a></li>
                        <li><a href="#page2" data-icon="grid">Second page</a></li>
                        <li><a href="#page3" data-icon="star">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
        <div data-role="page" id="page2">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                Second page
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="custom">Home</a></li>
                        <li><a href="#page2" data-icon="grid"  class="ui-btn-active">Second page</a></li>
                        <li><a href="#page3" data-icon="star">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
        <div data-role="page" id="page3">
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <div data-role="content" data-theme="b">
                Third page
            </div>
            <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#home" data-icon="custom">Home</a></li>
                        <li><a href="#page2" data-icon="grid">Second page</a></li>
                        <li><a href="#page3" data-icon="star" class="ui-btn-active">Third page</a></li>
                    </ul>
                </div>
            </div>    
        </div>
    </body>
</html>

The following use case illustrates the problem I am facing

1) Click second button in the navbar.

2) Second page content comes properly and the second button stays selected.

3) Click first button in the navbar.

4) Home page content comes properly,but first button is not in selected state

5) Again click first button.

6) Now first button is in selected state.

You can see this in action here – http://jsfiddle.net/tKMgd/

Thanks in advance for the help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have had this issue, I know this is not the most beautiful solution but you can bind to the pageshow (or pagebeforeshow) event for each page and have the button’s state changed on pageshow:

    $(document).delegate('div[id*="events"]', 'pagebeforeshow',function(event){
    $('#' + $(this).attr('id') + '_link').attr('class','ui-btn-active ui-btn ui-btn-up-a');
});

    In this example any page that has “events” in the id will make the link with the id of the page plus “_link” (e.g. “events_link”) active. You can use code similar to this to make each page add the active class to the proper link in your footer:

    $(document).delegate('#home, #page2, #page3', 'pagebeforeshow',function(event){
    $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active');
});

    NOTE: The above sample of code requires that the links in your footers have the ids: home_link, page2_link, page3_link. Here is an updated version of your jsfiddle: http://jsfiddle.net/tKMgd/5/

    • 0