Forum : Connaitre hauteur d'un bloc PhoneGap

Bonjour,

Je suis en train de développer une application PhoneGap, pour tester j'utilise Ripple qui me permet de "simuler" une tablette ou un mobile. Quand je teste, je n'ai aucun soucis.

Par contre, lorsque j'upload l'appli et que je teste sur ma tablette, j'ai l'impression que la détection en jQuery de la hauteur de mes blocs ne se fait pas. Je n'ai aucun style sur les div "classement"

Voilàa ce que je fais :

<body>
        <div class="app" id="deviceready">
            <div id="" class="blink">
                <p class="event listening"><img src="img/loader.gif" /></p>
            </div>
            <div class="contenuaffiche">
                <header><a href="#" class="lien_menu"><img src="img/menu.png" /></a><h1>Classement</h1></header>
                <div class="contenu">
                    <div class="menu_principal">
                        <ul class="ul_menu_principal">
                            <li><a href="#" class="fermer_menu"><img src="img/croix_menu.png" /></a></li>
                            <li><a href="calendrier.html">calendrier</a></li>
                            <li><a href="classement.html" class="select">classement</a></li>
                            <li><a href="equipe.html">équipe</a></li>
                            <li><a href="live.html">live</a></li>
                            <li><a href="actualite.html">actualité</a></li>
                            <li><a href="http://boutique.usdk.fr/" target="_blank">boutique</a></li>
                            <li><a href="http://billetterie.usdk.dspsport.com/" target="_blank">billetterie</a></li>
                            <li><a href="contact.html">contact</a></li>
                            <li><a href="rs.html">réseaux sociaux</a></li>
                        </ul>
                    </div>
                    <div class="bloc_classement">
                    </div>
                </div>
                <footer class="footer_interne">
                    <a href="index.html" class="#"><img src="img/btn_fermer.png" /></a>
                </footer>
            </div>
        </div>
</body>

jQuery :

$( document ).ready(function() {
                var hauteur_app=$('.app').outerHeight();
                var hauteur_header=$('header').outerHeight();
                var hauteur_footer=$('footer').outerHeight();
                var hauteur_contenu=parseInt(hauteur_app)-(parseInt(hauteur_header)+parseInt(hauteur_footer));

                $('.contenu').height(hauteur_contenu);

                $.ajax({
                    url: 'http://www.xxxxxxxxxxxxxx.fr/liens.php', // Le nom du fichier indiqué dans le formulaire
                    dataType: 'json',
                    success: function(json) { // Je récupère la réponse du fichier PHP
                        var lurl=json.classement;

                        //on va chercher les informations de classement
                        $.ajax({
                            type:'GET',
                            url: lurl, 
                            dataType: "xml", 
                            success: function(xml) { 
                                var i=0;
                                $(xml).find('equipe').each( 
                                    function(){
                                        $('<div class="classement" id="class'+i+'"></div>').html('').appendTo('.bloc_classement');
                                        var position = $(this).find('position').text();
                                        var equipeNom = $(this).find('equipeNom').text();
                                        var equipeLogo = $(this).find('equipeLogo').text();
                                        var totalPoint = $(this).find('totalPoint').text();
                                        var diff = parseInt($(this).find('totalButPour').text())-parseInt($(this).find('totalButContre').text());
                                        $('<div class="classement_texte classement_position"></div>').html('<p>'+position+'</p>').appendTo('#class'+i);
                                        $('<div class="classement_texte classement_equipe"></div>').html('<img src="'+equipeLogo+'" /><p><strong>'+equipeNom+'</strong></p>').appendTo('#class'+i);
                                        $('<div class="classement_texte classement_points"></div>').html('<p>'+totalPoint+'</p>').appendTo('#class'+i);
                                        $('<div class="classement_texte classement_diff"></div>').html('<p>'+diff+'</p>').appendTo('#class'+i);
                                        i++;
                                    });
                            }
                        });
                    }
                });
 });

CSS :


.bloc_classement{
     height:100%;
     overflow:auto;
}

.classement{
     width:100%;
     height:calc(100%/8);
}

.classement:nth-child(odd){
     background:rgba(255,255,255,0.06);
}

.classement:nth-child(even){
     background:rgba(255,255,255,0.04);
}

Connaitre hauteur d'un bloc PhoneGap

1 réponse