Probleme de scroll

Fermé
Trebeb Messages postés 2 Date d'inscription lundi 18 février 2013 Statut Membre Dernière intervention 19 février 2013 - 19 févr. 2013 à 07:58
Bonjour,

Je viens d'être embauché en tant qu'apprenti, et j'ai comme mission la maintenance d'une WebApplication Android/Iphone avec le framework PhoneGap, donc je travaille sous environnement Mac avec Eclipse et Xcode

Concernant l'application je rencontre un problème concernant la version Android. ( OS android supporté 2.2, 2.3, 3.2, 4.0.3)

Sur une page je récupere une image appartir d'un serveur interne que j'affiche en image de fond (une carte), j'ai un menu de navigation

le problème vient du fait que j'ai un bloc crée pour faire la légende de la carte sauf que je ne peux pas utilisé le scrolling vertical. Sur la version Iphone tout marche parfaitement

Ps : Je ne peux en aucun cas changer de framework. Ensuite désolé pour les liens interne mais je ne peux les fournir sur internet question de confidentialité.

Cela concerne les div legendeVh et pagecontent
J'espere qu'une âme charitable pourra m'aidé, pas besoin d'être agressif ni virulent, le code ce n'est pas moi qui l'ai crée, merci

Merci d'avance

<!DOCTYPE html> 
<html> 
  <head> 
  <title></title> 
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
 <meta charset="utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     
    <style> 
            c App custom styles */ 
    </style> 
        <!-- 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 
    </script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"> 
    </script> 
         --> 

 <!-- iPad/iPhone specific css below, add after your main css > 
 <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />    
     --> 
       
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../css/iphone.css" type="text/css" /> 
         
        <style type="text/css"> 
            .listevh img, .listevh span 
             { 
                vertical-align:middle; 
                display:inline-block; 
                overflow:auto; 
                
            } 
             
             #legendevh { 
                position:fixed; 
                top:335px; 
                height:112px; 
                width:320px; 
                overflow:inherit; 
                background-color:white; 
                z-index:6; 
            } 
            
             
            
            
 #pagecontent { 
    position:fixe; 
    top:69px; 
    width:640px; 
    height:auto; 
    overflow:fixe; 
    background-color:white; 
    z-index:3; 
    padding-left:5px;  
    padding-right:5px; 
     padding-bottom:200px; 
      
} 

#navbar { 
    position:fixed; 
    bottom:-10px; 
    width:320px; 
    background:url('Image') repeat-x; 
    z-index:6; 
} 
        
#navbar ul { 
    display:inline; 
    font-size:9pt; 
    /*background-color:black;*/ 
} 

#navbar li { 
    display:inline; 
    float:left; 
    width:64px; 
    height:64px; 
    padding:5px 0px 0px 0px; 
    text-align:center; 
    color:white; 
    font-size:8pt; 
} 

#navbar li.selected { 
    background:url('Image') no-repeat; 
    padding:5px 0px 0px 0px; 
}   
            </style> 
       
         
 <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> 
 <script type="text/javascript" charset="utf-8" src="../phonegap.js"></script> 
    <script type="text/javascript"> 

     
 // If you want to prevent dragging, uncomment this section  
 /* 
 function preventBehavior(e)  
 {  
      e.preventDefault();  
    }; 
 document.addEventListener("touchmove", preventBehavior, false); 
 */ 
  
 /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. 
 see https://www.coffeetablepros.com/ 
 for more details -jm */ 
 /* 
 function handleOpenURL(url) 
 { 
  // TODO: do something with the url passed in. 
 } 
 */ 
  
 function onBodyLoad() 
 {   
  document.addEventListener("deviceready", onDeviceReady, false); 
         
        document.getElementById('pagecontent').innerHTML = "<iframe id=\"ifr\" src=\"Lien\" onload=\"getIframeContent();\" ></iframe>"; 
 } 
  
 /* When this function is called, PhoneGap has been initialized and is ready to roll */ 
 /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. 
 see https://www.coffeetablepros.com/ 
 for more details -jm */ 
         
         
    function getIframeContent(){ 
        var maIframe = document.getElementById('ifr'); 
        var iframeContent = maIframe.contentWindow.document.body.innerHTML; 
        //alert(iframeContent); 
             
        var encore = 1; 
        var memoirePos = 0; 
        var res = ""; 
        var avalContent = ""; 
         
        while (encore == 1){ 
             
            var idxdebutImg = iframeContent.indexOf('<img', memoirePos); 
            //alert("idxDebutImg = "+idxdebutImg); 
            if(idxdebutImg >= 0){ 
                //alert("Je rentre dans le if"); 
                var debutImg = iframeContent.substring(idxdebutImg); 
                 
                var idxfinImg = debutImg.indexOf('>', 0); 
                idxfinImg += (idxdebutImg+1); 
                //alert(iframeContent.substring(idxdebutImg, idxfinImg)); 
                var amontContent = iframeContent.substring(memoirePos, idxdebutImg); 
                avalContent = iframeContent.substring(idxfinImg); 
                memoirePos = idxfinImg; 
                //alert("memoirePos = "+memoirePos); 
                if(idxdebutImg == idxfinImg){ 
                    //alert('idxdebutImg == idxfinImg'); 
                    encore = 0; 
                } 
                 
                var imageTag = iframeContent.substring(idxdebutImg, idxfinImg); 
                 
                var idxdebutLink = imageTag.indexOf('"', 0); 
                idxdebutLink += 1; 
                var debutLink = imageTag.substring(idxdebutLink); 
                var idxfinLink = debutLink.indexOf('"', 1); 
                idxfinLink += (idxdebutLink); 
                var amontImg = imageTag.substring(0, idxdebutLink); 
                var avalImg = imageTag.substring(idxfinLink); 
                 
                var linkTag = imageTag.substring(idxdebutLink, idxfinLink); 
                var baseLink = "Lien"; 
                var finalLink = baseLink.concat(linkTag); 
                 
                //alert(imageTag); 
                //alert(linkTag); 
                 
                res = res.concat(amontContent); 
                res = res.concat(amontImg); 
                res = res.concat(finalLink); 
                res = res.concat(avalImg); 
            }else{ 
                //alert('idxdebutImg < 0'); 
                encore = 0; 
            } 
        } 
         
        res = res.concat(avalContent); 
         
        //alert(res); 
        document.getElementById('pagecontent').innerHTML = res;  
        document.getElementById('loading').style.display = 'none'; 
    } 
         
         
 function onDeviceReady() 
 { 
  // do your thing! 
  //navigator.notification.alert("PhoneGap is working") 
 } 
         
    function retourInfoRoutesHome(){ 
        //history.back(); 
        document.location.href = "inforouteshome.html"; 
    } 
     
    </script> 
  </head> 
  <body onload="onBodyLoad()"> 
      <div id="page1"> 
          <div id="content"> 
              <div id="header"> 
                  <img src="Image" width="50px" height="30px" onClick="retourInfoRoutesHome();" /> 
              </div> 
              <div id="pageheader"> 
                  <img src="Image" width="320px" height="25px" /> 
              </div> 
              <div id="loading"> 
                  <img id="loadingImg" src="Image" height="24px" width="24px" /> 
              </div> 
              <div id="pagecontainer"> 
                  <div id="pagecontent"  zoom:100%;> 
                       
                  </div> 
                   
                  
                  <div id="legendevh" style="border-top:1px solid black;"> 
                      <table> 
                          <tr style="background:url('Image') repeat-x;"><td colspan="2">Etat des principaux itinéraires</td></tr> 
                          <tr><td><img src="Image" /></td><td>Conduite délicate - neige</td></tr> 
                          <tr><td><img src="Image" /></td><td>Conduite délicate - verglas</td></tr> 
                          <tr><td><img src="Image" /></td><td>Conduite difficile - neige</td></tr> 
                          <tr><td><img src="Image" /></td><td>Conduite difficile - verglas</td></tr> 
                          <tr><td><img src="Image" /></td><td>Conduite impossible - neige</td></tr> 
                          <tr><td><img src="Image" /></td><td>Conduite impossible - verglas</td></tr> 
                          <tr style="background:url('Image') repeat-x;"><td colspan="2">Conditions générales de circulation</td></tr> 
                          <tr><td><img src="Image" /></td><td>Normales</td></tr> 
                          <tr><td><img src="Image" /></td><td>Délicates</td></tr> 
                          <tr><td><img src="Image" /></td><td>Difficiles</td></tr> 
                          <tr><td><img src="Image" /></td><td>Impossibles</td></tr> 
                          <tr style="background:url('Image') repeat-x;"><td colspan="2">Trame routière</td></tr> 
                          <tr><td><img src="Image" /></td><td>Autoroute et routes nationales</td></tr> 
                          <tr><td><img src="Image" /></td><td>Routes départementales structurantes</td></tr> 
                      </table> 
                  </div> 
              </div>   
               
              <div data-role="navbar" id="navbar"> 
                  <ul> 
                      <a href="Image"> 
                          <li> 
                              <img src="Image" /> 
                              <br />Actualités 
                          </li> 
                      </a> 
                      <a href="#"> 
                          <li class="selected"> 
                              <img src="Image" /> 
                              <br />Info Routes 
                          </li> 
                      </a> 
                      <a href="Image"> 
                          <li> 
                              <img src="Image" /> 
                              <br />Découverte 
                          </li> 
                      </a> 
                      <a href="Image"> 
                          <li> 
                              <img src="Image" /> 
                              <br />Département 
                          </li> 
                      </a> 
                      <a href="Image"> 
                          <li> 
                              <img src="../images/testicocontact.png" /> 
                              <br />Contacts 
                          </li> 
                      </a> 
                  </ul> 
              </div> 
          </div> 
      </div> 
      <script> 
          //App custom javascript 
          </script> 
  </body> 
</html>