CODEWITHSUNDEEP
jqueryandroidscrollcordovajquery-mobile
voxcomm
voxcomm

Reputation: 71

Scrolling custom div doesn't work in jQuery Mobile on Android

In my app I have a search engine that returns list of results. The page of single results is filled with data each time the user clicks the link leading there. On this page there are also buttons for switching content visible at the moment. Problem is that this part of the application lost the ability to scroll. I've checked calling of 'scrollstart' events but none was called. I'm using the latest Phonegap and jQuery Mobile. Testing on Android 2.1 in emulator and on ZTE Blade.

The code :

<!DOCTYPE html> 
<html> 
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />       
        <title>Search</title> 
        <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css"/>
        <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
        <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="jquery.mobile.min.js"></script>
        <style type="text/css">            
            p {
                font-size: 11px;
            }

            .centered {
                text-align:center;
            }

            .search-detail {        
            }

            .header {
                height:42px;
            }

            .ui-li-thumb {
                height: 92px;
                max-height: 92px;
                max-width: 90px;
            }

            #single-top h4 {
                margin-top:5px;
                margin-bottom:5px;
            }

            .guziki .ui-btn {
                margin-left:0;
            }

            #single-data {
                margin-top:10px;
            }
                #single-data h4 {
                    margin-top:5px;
                    margin-bottom:5px;
                }
                #single-data h6 {
                    margin: 0;
                }        
        </style>       
    </head> 
<body> 

<!-- Start of first page -->
<div data-role="page" id="menu">
    <div data-role="header" data-position="fixed" class="header" id="my-header">        
    </div>
    <div data-role="content">   
        <ul data-role="listview" role=listbox"" data-theme="c">
            <li><a href="#page-5" class="single" data-transition="pop" name="0">Go !</a></li>
        </ul>
    </div>
    <div data-role="footer">
        footer
    </div>
</div>

<!-- Start of fifth page -->
<div data-role="page" id="page-5" data-theme="a">
    <div data-role="header" data-position="fixed" class="header" data-id="myheader">
        <h1></h1>
    </div>
    <div data-role="content" class="single-content">
    </div>
    <div data-role="footer">
        footer
    </div>
</div>

<script type="text/javascript">
    var searchObjects = [],
    id;

    var fixgeometry = function(){
        scroll(0, 0);

        var header = $("div[data-role='header']:visible");
        var footer = $("div[data-role='footer']:visible");
        var content = $("div[data-role='content']:visible:visible");
        var viewport_height = $(window).height();
        var content_height = viewport_height - header.outerHeight() - footer.outerHeight();

        if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
            content.height(content_height);
        }
    }    

    obj = {'image': 'http://www.prologis.com/images/uploads/japanese-flag-640.jpg', 'name': 'ProLogis Park', 'developer': 'ProLogis',
    'location': 'Suburbs', 'exact_location': 'New York',
    'total_area': 71115, 'free_area': 3465, 'id': 2033, 'about': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non dui mollis libero dictum eleifend.'+
    'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas' +
    'Cras quam sem, pulvinar et luctus eu, tempor non metus. Cras mollis lacinia massa sed sagittis.'};

    searchObjects.push(obj);


        $("#page-5").live('pagebeforehide', function(){
            var content = $(".single-content");
            $('.container').remove();
        });

        $("#page-5").live('pageshow', function(){
            fixgeometry();
        });

        $('.single').live('click', function(){
            id = $(this).attr('name'),
            content = $(".single-content");
            var object = searchObjects[id];

            var html = '<div class="container">'+
                            '<div id="single-top">'+
                                '<h4></h4>'+
                                '<div data-inline="true" class="guziki" data-theme="c">'+
                                    '<a data-role="button" href="#" class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-up-a ui-shadow" data-theme="a" data-inline="true" name="main_data"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">About</span></span></a>'+
                                    '<a data-role="button" href="#" class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-up-a ui-shadow" data-theme="a" data-inline="true" name="localization_data"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Localization</span></span></a>'+
                                    '<a data-role="button" href="#" class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-up-a ui-shadow" data-theme="a" data-inline="true" name="gallery_data"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Gallery</span></span></a>'+        
                                '</div>'+
                            '</div>'+
                            '<div id="single-data"></div>'+
                        '</div>';                      
            content.append(html);

            $('a[name|="main_data"]').live('click', load_main_data);
            $("a[name|='localization_data']").live('click', load_localization_data);
            $("a[name|='gallery_data']").live('click', load_gallery_data);        

            $('#single-top h4').html(object.name);
            load_main_data();
            fixgeometry();
        });

        var load_main_data = function(){
            $('#single-data').empty();
            var object = searchObjects[id];

            $('#single-data').append('<img src="'+ object.image +'" alt="'+ object.name +'" />');
            $('#single-data').append('<h4>Developer:</h4>');
            $('#single-data').append('<h6>'+ object.developer +'</h6>');            
            $('#single-data').append('<h4>About:</h4>');
            $('#single-data').append('<p>'+ object.about +'< br/><br /></p>');
            $('#single-data').append('<img src="'+ object.image +'" alt="'+ object.name +'" />');
            $('#single-data').append('<img src="'+ object.image +'" alt="'+ object.name +'" />');                                 
        }

        var load_localization_data = function(id){
            $('#single-data').empty();
            var object = searchObjects[id];

            $('#single-data').append('<h4>Localization:</h4>');
        }

        var load_gallery_data = function(id){
            $('#single-data').empty();
            var object = searchObjects[id];

            $('#single-data').append('<h4>Gallery:</h4>');
        }
</script>
</body>
</html>

By the way does anyone know why this app is so slow? Am I doing something wrong during the compilation (I'm using tutorial from phonegap site, not all used features were removed from manifest)?

Upvotes: 1

Views: 3430

Answers (1)

sasklacz
sasklacz

Reputation: 3638

I see that you're manually adding classes for buttons, so probably jqm is not processing your page properly. Maybe try blocking the automatic redirection to page by setting href of your link to '#' (which returns false) and show the page manually by calling $.mobile.changePage('yourpage'); .I'm pretty sure you can remove this overflow setting then.

Upvotes: 1

Related Questions