Partage
  • Partager sur Facebook
  • Partager sur Twitter

WebApplication Android

    31 janvier 2013 à 10:19:20

    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é.

    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

    <!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 http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
    	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 http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
    	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>
    



    • Partager sur Facebook
    • Partager sur Twitter
      18 février 2013 à 10:35:20

      Aucune Ame Charitable ne pouvant répondre à ma question ?
      • Partager sur Facebook
      • Partager sur Twitter

      WebApplication Android

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown