Home/ Questions/Q 8703307
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T02:50:45+00:00

Is there working jQuery Mobile sample code for iPhone/Mobile Safari bottom navigation bar? I

  • 0

Is there working jQuery Mobile sample code for iPhone/Mobile Safari bottom navigation bar?

I have tried to google and code myself but I never really got it working for iPhone/Mobile Safari. The other browsers seem to be fine e.g. Desktop Safari, Desktop Chrome, Android browser.

The code that I tried (and it works just not for Mobile Safari .. doh)

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-icon="custom">Entry</a></li>
      <li><a href="#two" data-icon="custom">Winner</a></li>
      <li><a href="#three" data-icon="custom">Gallery</a></li>
    </ul>
  </div><!-- /navbar -->
</div>

Any help is appreciated 🙂

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try the following working example, using custom icons (using jQuery Mobile 1.2.0):

    Create a css file mycss.css and include the following in it:

    .ui-icon-custom {
    background: url("../img/run.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

    where run.png is the name of your custom icon.

    Then, in your html file, include the following:

    <!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <!-- LOAD YOUR CSS FILE WHILE PAYING ATTENTION TO ITS PATH! -->
    <link rel="stylesheet" type="text/css" href="./css/mycss.css"/>

</head>    

<body>

    <div data-role="page">      

        <div data-role="content">
            <h1>This is my content</h1>
        </div>

        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" data-icon="custom">Entry</a></li>
                    <li><a href="#two" data-icon="custom">Winner</a></li>
                    <li><a href="#three" data-icon="custom">Gallery</a></li>
                </ul>
            </div><!-- /navbar -->                             
        </div> 

    </div>

</body>
</html>

    Screenshot (iPhone 5):

    screenshot

    PS: Pay attention to the paths of your css / png files!

    Let me know if this works for you.

    • 0