CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
MarkZ
MarkZ

Reputation: 280

jQM Footer Disappear and Appear Before and After Transition

I have problem with jQM's footer. This is the demo jsfiddle: http://jsfiddle.net/lesliez/SenTt/1/

Look closely the footer went missing and appear again before and after page transition. It's not as obvious on desktop browser but it's very obvious on mobile device (delay is longer).

Someone please help telling me what have I done wrong. Thank you.

My HTML:

    <!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <style type="text/css">
        /* Prevent copy paste for all elements except text fields */
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
        input, textarea  { -webkit-user-select:text; }
        body { background-color:white; color:black }
    </style>
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <script src='intelxdk.js'></script>
    <script type="text/javascript">
        /* Intel native bridge is available */
        var onDeviceReady=function(){
        //hide splash screen
        intel.xdk.device.hideSplashScreen();
        };
        document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
    </script>
</head>
<body>
    <!-- content goes here-->
    <!-- Start of first page -->
    <div data-role="page" id="foo">

        <div data-role="header" data-position="fixed">
            <h1>Foo</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <p>I'm first in the source order so I'm shown as the page.</p>
            <p>View internal page called <a href="#bar" data-transition="slide">bar</a></p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->

    </div><!-- /page -->

    <!-- Start of second page -->
    <div data-role="page" id="bar">

        <div data-role="header" data-position="fixed">
            <h1>Bar</h1>
        </div><!-- /header -->

        <div role="main" class="ui-content">
            <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
            <p><a href="#foo" data-transition="slide" data-direction="reverse">Back to foo</a></p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
</div><!-- /page -->

<script src='js/jquery-1.11.1.min.js'></script>    
<script src='js/jquery.mobile-1.4.2.min.js'></script>  
</body>
</html>

My CSS:

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;  
    background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
    background-size:cover;
    background-repeat:no-repeat;    
}

Upvotes: 0

Views: 708

Answers (1)

Kaloyan Stamatov
Kaloyan Stamatov

Reputation: 4024

I have similar problem with 1.4.2 and it took me few ours to found a good solution. While working I've noticed that JQM add some min-height and height inline style to the pages containers, so that appear to be the problem. Ok first of all I wrap my JQM html into a div element and set it as JQM page container:

JS CODE:

<script type="text/javascript">
    $(document).one("mobileinit", function () {
        // Setting #container div as a jqm pageContainer
        $.mobile.pageContainer = $('#main');

        // Setting default page transition to slide
        $.mobile.defaultPageTransition = 'slide';
    });
</script>

The HTML looks like this:

            <div data-role="page" class="pageFix" id="pageOne">
                <div data-role="header">
                    <h1>Insert Page Title Here</h1>
                </div>

                <div data-role="main" class="ui-content">
                    <p>Insert Content Here</p>
                    <a href="#pageTwo" class="ui-btn">Link 1</a>
                </div>

                <div data-role="footer" data-position="fixed">
                    <h1>Insert Footer Text Here</h1>
                </div>
            </div>  


            <div data-role="page" class="pageFix" id="pageTwo">
                <div data-role="header">
                    <h1>Insert Page 222</h1>
                </div>

                <div data-role="main" class="ui-content">
                    <p>Insert 222</p>
                    <a href="#pageOne" class="ui-btn">Link 2</a>
                </div>

                <div data-role="footer" data-position="fixed">
                    <h1>Insert Footer Text Here</h1>
                </div>
            </div>  

        </div>

And the last, which is most important, under the JQM css file I added the following styles:

CSS UPDATED!!!

body{margin:0;padding:0;outline:none;border:0;word-wrap:break-word;}
#main{position:absolute;width:100%;height:100%;max-height:100%;padding:0!important;-webkit-overflow-scrolling: touch;}
.ui-page {-webkit-backface-visibility:hidden;}
.ui-mobile-viewport-transitioning .pagesi,
.ui-mobile-viewport-transitioning .ui-page .pagesi{
height:100%!important;padding-bottom:0!important
 }

It looks something happens on transition so what I do is set 100% height of the page during transition and that do the Job. Still testing and if I found some better solutions will share it! Hope that helps!

Cheers!

Upvotes: 1

Related Questions