CODEWITHSUNDEEP
jquery-mobile
user2805663
user2805663

Reputation:

jquery mobile footer missing

im new it jquery mobile so i went to look for tutorials and found some and made my own golf scoring UI it work well until the last part i want to put a footer with home button and about button that show on all pages but apparently it is not showing here is my code

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Golf Score</title> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.2.min.css">
  <script src="jq/jquery.js"></script>
  <script src="jq/jquery.mobile-1.3.2.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">  
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  <style type="text/css"></style>
    <script type="text/javascript">//<![CDATA[ 
        $(window).load(function(){
        $('#newgame').live('pageshow',function(event, ui) {
            // refresh specific element
            $('#refresh').val('');
        });

        $('#viewscore').live('pageshow',function(event, ui) {
            // refresh all elements
            var allInputs = $(':input');
            allInputs.val('');
        });
        $('#currentscore').live('pageshow',function(event, ui) {
            // refresh all elements
            var allInputs = $(':input');
            allInputs.val('');
        });
        $('#previousscore').live('pageshow',function(event, ui) {
            // refresh all elements
            var allInputs = $(':input');
            allInputs.val('');
        });
        $('#about').live('pageshow',function(event, ui) {
            // refresh all elements
            var allInputs = $(':input');
            allInputs.val('');
        });
        });//]]>  
    </script>
</head> 
<body>
    <div data-role="page" id="home" >    
        <div data-role="content" name="contentlogin">
        <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
            <h1 class="ui-title" role="heading" aria-level="1">Home</h1>
        </div>         
            <a href="#newgame" data-role="button" id="login">New Game</a>   
            <a href="#viewscore" data-role="button">View Score</a>            
        </div>             
    </div> 

    <div data-role="page" id="newgame" >

            <div data-role="content">
                <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                    <h1 class="ui-title" role="heading" aria-level="1">New Game</h1>
                </div> 
                <div data-role="fieldcontain">
                    <label for="textarea2">
                        Golf Club
                    </label>
                    <textarea name="" id="textarea2" placeholder="Golf Club"></textarea>
                </div>
                <div data-role="fieldcontain">
                    <label for="textarea1">
                        Golf Course
                    </label>
                    <textarea name="" id="textarea1" placeholder="Golf Course"></textarea>
                </div>
                <div data-role="fieldcontain">
                    <label for="selectmenu1">
                        Number of Players
                    </label>
                    <select id="selectmenu1" name="">
                        <option value="1">
                            1
                        </option>
                        <option value="2">
                            2
                        </option>
                        <option value="3">
                            3
                        </option>
                        <option value="4">
                            4
                        </option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="selectmenu2">
                        Number of Holes
                    </label>
                    <select id="selectmenu2" name="">
                        <option value="9">
                            9
                        </option>
                        <option value="18">
                            18
                        </option>
                        <option value="27">
                            27
                        </option>
                        <option value="36">
                            36
                        </option>
                        <option value="45">
                            45
                        </option>
                        <option value="54">
                            54
                        </option>
                    </select>
                </div>
            </div>
        </div>            


    <div data-role="page" id="viewscore" >
        <div data-role="content" name="contentlogin">
            <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">View Score</h1>
            </div> 
            <a href="#currentscore" data-role="button">Current</a>
            <a href="#previousscore" data-role="button">Previous</a>
        </div>             
    </div>
    <div data-role="page" id="currentscore" >
        <div data-role="content" name="contentlogin">
            <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">Current Score</h1>
            </div>


        </div>             
    </div>
    <div data-role="page" id="previousscore" >
        <div data-role="content" name="contentlogin">
            <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">Previous Score</h1>
            </div>

        </div>             
    </div>
    <div data-role="page" id="about" >
        <div data-role="content" name="contentlogin">
            <div data-role="header" data-icon="bars" data-theme="b" class="ui-header ui-bar-b" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">About</h1>
            </div>

        </div>             
    </div>
        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                Footer
            </h3>
            <a data-role="button" href="#about" class="ui-btn-left">
                About
            </a>
            <a data-role="button" href="#home" class="ui-btn-right">
            Home
            </a>
        </div>
</body>
</html>

Upvotes: 2

Views: 743

Answers (1)

Omar
Omar

Reputation: 31732

You have placed data-role=footer outside data-role=page. Hence, it won't be shown, in other words, neglected when page is rendered. The correct syntax is as follows.

<div data-role="page">
  <!-- panel -->
  <div data-role="panel">...</div>

  <!-- popup -->
  <div data-role="popup">...</div>

  <!-- header -->
  <div data-role="header">...</div>

  <!-- content -->
  <div data-role="content">...</div>

  <!-- footer -->
  <div data-role="footer">...</div>
</div>

All major divs should be wrapped inside data-role=page.

Notes:

  1. Use .on instead of .live as the latter is deprecated as of jQuery v1.7.
  2. remove $(window).load(function () { and listen to jQM events.
  3. instead of the multi-bindings to pageshow, you can do it in one step:
    $(document).on('pageshow', '[data-role=page]', function() {
      var allInputs = $(':input');
      allInputs.val('');
    });

Upvotes: 1

Related Questions