3

The footer tabs work great and the footer change without blinking, but the headers keep blinking when you click the tabs. How can I stop the blinking?

I've tried a few solutions I have found online which have helped others but did not work for me, I must be doing something wrong.

Below is my HTML. Thanks in advance!

Edit : I figured it out.. I needed datatransition="none"

<a href="#Page2" data-role="tab" data-transition="none" >

Now it works

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>NavBar Test</title>
        <link rel="stylesheet" href="themes/mytheme.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script src="phonegap.js"></script>

    </head>
    <body>
<!--                            Page 1                             -->

<div data-role="page" id="Page1" >
    <div data-role="header" >
        <h1>Navbar Test</h1>
    </div>

    <div data-role="content" data-theme="a">
           <h2>Here is the first tab</h2>
    </div>

    <div data-role="footer" data-id="foo1" data-position="fixed" >
        <div data-role="navbar">
        <ul>
            <li><a href="#Page1" data-role="tab" class="ui-btn-active ui-state-persist">Info</a></li>
            <li><a href="#Page2" data-role="tab">Friends</a></li>
            <li><a href="#Page3" data-role="tab">Albums</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page-->
<!--                        End Page 1                             -->

<!--                            Page 2                             -->
<div data-role="page" id="Page2" >
    <div data-role="header" >
        <h1>Navbar Test</h1>
    </div>

    <div data-role="content" data-theme="a">
           <h2>Here is the second tab</h2>
    </div>

    <div data-role="footer" data-id="foo1" data-position="fixed" >
        <div data-role="navbar">
        <ul>
            <li><a href="#Page1" data-role="tab">Info</a></li>
            <li><a href="#Page2" data-role="tab" class="ui-btn-active ui-state-persist">Friends</a></li>
            <li><a href="#Page3" data-role="tab">Albums</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page-->
<!--                        End Page 2                             -->

<!--                            Page 3                             -->
<div data-role="page" id="Page3" >
    <div data-role="header">
        <h1>Navbar Test</h1>
    </div>

    <div data-role="content" data-theme="a">
           <h2>Here is the third tab</h2>
    </div>

    <div data-role="footer" data-id="foo1" data-position="fixed" >
        <div data-role="navbar">
        <ul>
            <li><a href="#Page1" data-role="tab">Info</a></li>
            <li><a href="#Page2" data-role="tab">Friends</a></li>
            <li><a href="#Page3" data-role="tab" class="ui-btn-active ui-state-persist">Albums</a></li>
        </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page-->
<!--                        End Page 3                             -->

    </body>
</html>
Bozmo
  • 31
  • 4

0 Answers0