CODEWITHSUNDEEP
androidcssjquery-mobilecordovaphonegap-build
dev_marshell08
dev_marshell08

Reputation: 1099

Jquery-Mobile And Css does not work/load for android using PhoneGap Cordova?

I am trying to build a mobile app for Android using PhoneGap. The below index.html code works fine if I use PhoneGap build to build the android .apk file. It also works fine if I just run it in the browser.

However, when I tried to do the same using Eclipse (Android plugin/PhoneGap installation) rather than using the PhoneGap build, for some reason css/jquerymobile would not work causing the page to look ugly.

1) Using PhoneGap Build/Browser

enter image description here

2) Using the Eclipse Android Project

enter image description here

index.html

<!DOCTYPE html>
<html>
   <head>
      <script src="cordova.js"></script>   
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
      <script src="js_server/registerme.js"> </script>
      <script src="js_server/openPages.js"> </script>
      <style type="text/css">
         .bgimg {
         background-image: url("img/dealpouch_bg.jpg");
         width:100%;
         height:100%;
         }       
      </style>
   </head>
   <body>
      <div data-role="page" id="home"  class="bgimg" data-theme="a">
         <div data-role="header"  data-theme="b">
            <a href="index.html" data-role="button" data-icon="delete" data-inline="true"  onclick="exittheSystem();">Exit</a>
            <h4><font color="#33CCFF">Deal</font><font color="#00FF00">Pouch</font></h4>
         </div>
         <div data-role="main" class="ui-content">
            <div data-role="controlgroup" data-type= "vertical">
               <a href="#signuppage"  class="ui-btn  ui-corner-all  " >Sign up for free</a>
               <a href="#" class="ui-btn  ui-corner-all " onclick="alert('Work in Progress to link facebook');"><font color="">Sign up using Facebook</font></a>
               <a href="#loginpage"  class="ui-btn ui-corner-all ">log In</a> 
               <br>
            </div>
         </div>
      </div>
   </body>
</html>

.

package com.cfvbustransit;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.os.Build;

import org.apache.cordova.*;


public class MainActivity extends DroidGap 
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by <content src="index.html" /> in config.xml
        //super.loadUrl(Config.getStartUrl());
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

config.xml

<?xml version="1.0" encoding="UTF-8"?>

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.dealpouch"
        version   = "2.0.0">

    <preference name="permissions"  value="none"/>
    <preference name="splashscreen" value="splash" />

    <!-- Customize your app and platform with the preference element. -->
    <preference name="phonegap-version"           value="3.4.0" />          <!-- all: current version of PhoneGap -->
    <preference name="orientation"                value="default" />        <!-- all: default means both landscape and portrait are enabled -->
    <preference name="target-device"              value="universal" />      <!-- all: possible values handset, tablet, or universal -->
    <preference name="fullscreen"                 value="true" />           <!-- all: hides the status bar at the top of the screen -->
    <preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
    <preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
    <preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
    <preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->
    <preference name="auto-hide-splash-screen"    value="false" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
    <preference name="disable-cursor"             value="false" />          <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
    <preference name="android-targetSdkVersion" value="19" /> 
    <preference name="android-minSdkVersion"      value="11" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
    <preference name="android-installLocation"    value="auto" />           <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->


    <gap:plugin name="org.apache.cordova.geolocation" />
    <gap:plugin name="org.apache.cordova.splashscreen" />
    <gap:plugin name="com.dawsonloudon.videoplayer"  />
<plugin name="File" value="org.apache.cordova.FileUtils" />
<plugin name="FileTransfer" value="org.apache.cordova.FileTransfer" />


    <icon src="appicon.png" />

    <gap:splash src="splash.png" />

    <access origin="*"/> <!-- allow local pages -->


</widget>

Upvotes: 1

Views: 1684

Answers (1)

Karioki
Karioki

Reputation: 664

You are loading css from the internet, And not giving permission for the same.

Upvotes: 1

Related Questions