CODEWITHSUNDEEP
jquery-mobilecordova
nnikolay
nnikolay

Reputation: 1751

jQuery mobile 1.3 left slide panel - phonegap and fixed header

I am using jQuery mobile 1.3 for my app in phonegap. I would like to implement the left slide menu like facebooks's app. I have fixed header with data-position="fixed". When I open the app in chrome it works. When I open the App in phonegap it doesn't works, because the fixed header is not moving to the right.

Some solutions to fix this?

EDIT:

Here is very simple example code:

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-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>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
    height: 435px;
}
.ui-mobile, .ui-mobile .ui-page {
    min-height: 435px;
}
.ui-content{
    padding:10px 15px 0px 15px;
}
.panel-content { padding:15px; }

#myhdr.ui-panel-content-fixed-toolbar-position-left {
    border:1px solid red;
}
</style>
</head> 
<body>  
<div data-role="page" style="max-height:440px; min-height:440px;">
    <!-- defaultpanel  -->
    <div data-role="panel" id="defaultpanel" data-theme="b">    
        <div class="panel-content">
            <ul data-theme="d" data-icon="false" data-divider-theme="d" data-inset="false" data-filter="true" data-filter-placeholder="keywords" data-role="listview" style="overflow:auto; height:200px;">
            <li><a data-rel="close"><img src="images/icon.png" class="ui-li-icon" />close</a></li>
            </ul>
        </div><!-- /content wrapper for padding -->         
    </div><!-- /defaultpanel -->
    <div data-role="header" data-position="fixed" id="myhdr">
        <h1>Panel Demo</h1>
    </div>
    <div data-role="content"> 
        <a href="#defaultpanel" data-role="button" data-inline="true" data-icon="bars">Default panel</a>
    </div>
</div>
</body>
</html>

I am working with Cordova 2.2.0, but I have tested it now with Cordova 2.9.0 and it is the same situation. Somehow the browser in Phonegap doesn't apply some style to the fixed header.

Thanks Nik

Upvotes: 1

Views: 5762

Answers (3)

Rafael M.
Rafael M.

Reputation: 221

I'm experiencing the same issue in Android 4.1.2 and here's what I did to resolve the issue.

I added this code in my stylesheet

.ui-header.ui-panel-open {
    top:-1px; 
    position:absolute; 
    bottom: auto; 
}

and this script on my app.js 

$( '.ui-panel' ).on( "panelbeforeopen", function( ) {

    $('.ui-header.ui-header-fixed').addClass('ui-panel-open');

} );

$( '.ui-panel' ).on( "panelclose", function( ) {

    $('.ui-header.ui-header-fixed').removeClass('ui-panel-open');

} );

and set data display of my panel to push ( data-display="push" )

Upvotes: 0

TWilly
TWilly

Reputation: 4933

You either need to turn on hardware acceleration in the android manifest.xml file, or you need to turn transforms off.

I was able to do this with the following..

$(document).bind("pagebeforeshow", function(event, data) {
    // this doesn't seem to turn off animations
    //$(".ui-panel-menu").panel("option", "animate", false);
    // this does turn off animation
    $(".ui-panel-animate").removeClass('ui-panel-animate');
});

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

This solution is working for me, I am talking about Android hybrid app made in Phonegap.

Working jsFiddle example: http://jsfiddle.net/Gajotres/PMrDn/56/

    <div data-role="page" id="index">
        <div data-role="panel" id="mypanel" data-position="left" data-display="push">
            <a data-role="button">Some button</a>
        </div>            

        <div data-theme="b" data-role="header">
            <a href="#mypanel">Open panel</a>
            <h1>Index page</h1>
        </div>

        <div data-role="content">

        </div>
    </div>

What you require is data-display="push" attribute inside your panel. It will successfully push fixed header to the right. This works on Android 3+ and it will not work on Android 2.X, but this is not jQuery Mobile fault.

Upvotes: 2

Related Questions