I have a simple application, sort of like a warm-up starter to jquery on phonegap.
I run it on my emulator and it runs just fine. The layout looks, good, like its supposed to.
But when i install the .apk on my device (which happens to be a GALAXY S), the html that i expect to see is ... off. What i mean to say is, on my device it has no colours, no transitions, just plain blue links in a white background.
Are my javascript files or css files not included properly? Im totally a newbie on this, please help me out.
I just followed http://jquerymobile.com/ where one is supposed to drag and drop a layout and download the html,css, js files for it and include in your project. I also followed http://docs.phonegap.com/en/1.8.1/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android to get started with PhoneGap.
My app name is 'Settling' and the java file looks like this:
package maddy.application;
import android.app.Activity;
import org.apache.cordova.*;
import android.os.Bundle;
public class SettlingActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/app.html");
}
}
My android manifest file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="maddy.application"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="8" />
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name" >
<activity
android:name=".SettlingActivity"
android:label="#string/app_name" android:configChanges="orientation|keyboardHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
And my 'app.html' looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="maddytheme.css" />
<style>
/* App custom styles */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<script src="my.js">
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h5>
Settlement
</h5>
</div>
<div data-theme="a" data-role="header">
</div>
<div data-role="content" style="padding: 15px">
<div data-role="navbar" data-iconpos="left">
<ul>
<li>
<a href="#page1" data-theme="" data-icon="">
Users
</a>
</li>
<li>
<a href="#page1" data-theme="" data-icon="">
Money
</a>
</li>
<li>
<a href="#page1" data-theme="" data-icon="">
My name
</a>
</li>
</ul>
</div>
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Divider
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
List here
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
List 1
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
List 2
</a>
</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<script>
//App custom javascript
</script>
</body>
I think you might forget to switch on your wifi internet connection or mobile network connection. I faced the same problem because of this only. Otherwise you just put js file locally into your application.
Did you whitelist the remote sites that you are loading your CSS and JS from? Looks like you'll need to add:
http://code.jquery.com
http://ajax.googleapis.com
Related
So, I am facing this issue in which my react website performs differently on Android and iOS device.
while on home page, **sometime **main content has large padding and on reload it works fine. Tho I'm not facing any issue on Android and windows device.
Also, the work page doesn't load images properly.
Commercial/ Home Page Code: (I'm using tailwind CSS)
import React from "react";
import { Link } from "react-router-dom";
import Vimeo from "#u-wave/react-vimeo";
const Commercial = () => {
return (
<div className="md:px-36 lg:px-52 xl:px-72">
<Vimeo
className="my-5"
video="https://vimeo.com/770677194"
responsive
></Vimeo>
<div className="hidden md:block text-xl font-bold">
<h3 className="mx-auto text-black font-bristone">Quick Links</h3>
<div className="conntainer grid gap-x-2 mx-auto md:my-5 grid-cols-3 bg-auto">
<Link to="/work">
<img src="/img/quicklinks/PC_WORK.jpg" alt="" />
</Link>
<Link to="/axiompost">
<img src="/img/quicklinks/PC_AXIOM POST.jpg" alt="" />
</Link>
<Link to="/aboutme">
<img className="img1" src="\img\quicklinks\PC_ABOUTME.jpg" alt="" />
</Link>
</div>
</div>
<div className="container block md:hidden text-lg font-bold px-5 py-0">
<h5 className="mt-6 text-black font-bristone">Quick Links</h5>
<div className="conntainer grid gap-x-2 my-5 grid-cols-3 bg-auto">
<Link to="/work">
<img src="/img/quicklinks/MOBILE_WORK.jpg" alt="" />
</Link>
<Link to="/axiompost">
<img src="/img/quicklinks/MOBILE_AXIOM_POST.jpg" alt="" />
</Link>
<Link to="/aboutme">
<img
className="img1"
src="\img\quicklinks\MOBILE_ABOUTME.jpg"
alt=""
/>
</Link>
</div>
</div>
</div>
);
};
export default Commercial;
**Work Page Code: **
<Link
to={`/work/${id}`}
className="relative flex justify-center cursor-pointer items-center group"
>
<div class="relative">
{/* src={require("../Data/img/axiompost/AXIOM-POST_BLOCK_01.jpg")} */}
<img src={mimg} class="aspect-video object-cover" alt="..." />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 group-hover:opacity-70 transition duration-300 ease-in-out group-hover:bg-teal-700"></div>
</div>
<div className="absolute opacity-0 group-hover:opacity-100 z-10 text-white text-center">
<div className="hidden md:block text-xs tracking-wide translate-y-11 duration-100 group-hover:translate-y-0 font-bristone">
{title.slice(0, 20).toUpperCase()}
</div>
<div className="hidden md:block text-xs tracking-wide translate-y-11 duration-100 group-hover:translate-y-0 font-">
{category.toUpperCase()}
</div>
</div>
</Link>
I tried searching for the solution but couldn't find one so had to post this.
Screenshots: Homepage issue
Workpage issue
It should look like the one in Android version as it was showing same when I checked responsiveness on desktop.
i am trying to use accordion future in my android app . but that future is not working.Please
assist me
Below are my source code
activity_main
Below are my source code
Below are my source code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.muslim.bootstrap.MainActivity">
<WebView
android:id="#+id/mybrowser"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</WebView>
</RelativeLayout>
my java file
Below are my source code
Below are my source code
public class MainActivity extends AppCompatActivity {
WebView MyBrowser;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView MyBrowser = (WebView) findViewById(R.id.mybrowser);
MyBrowser.loadUrl("file:///android_asset/index.html");
}
}
html file
Below are my source code
Below are my source code
Below are my source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
<p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>
</body>
</html>
Below are my source code
Below are my source code
Below are my source code
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.muslim.bootstrap">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
i am trying to use accordion future in my android app . but that future is not working
please help
Modification in your Mainactivity
public class MainActivity extends AppCompatActivity {
WebView MyBrowser;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView MyBrowser = (WebView) findViewById(R.id.mybrowser);
// For allowing Javascript
WebSettings settings = MyBrowser.getSettings();
settings.setDomStorageEnabled(true);
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
MyBrowser.loadUrl("file:///android_asset/index.html");
}
}
and also make sure in XML. your web view's height and width should be match_parent
WebView MyBrowser = (WebView) findViewById(R.id.mybrowser);
WebSettings webSettings = MyBrowser.getSettings();
webSettings.setJavaScriptEnabled(true);
MyBrowser.loadUrl("file:///android_asset/index.html");
Try this ,you have to enable javascript
I have been going around and around and around, trying to apply as many different solutions as possible, trying to solve this problem by myself. The fact is that I cannot!
I am developing a very simple app in HTML5 on Adobe PhoneGap. The app is only a list of links that the user should click and access to the respective websites. Problem? The problem is that the websites are opening on the app and not on the browser. I already tryed everything I knew... Set target _blank, applied this solution, this one, this one and this one. I've been googling also, but the results are exactly the same: no solution for my problem.
There must be something that I am doing wrong, and right now I don't think I have the discernment to see what it is! And it is driving me crazy... Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Northern Landscape APP</title>
<meta name="description" content="Northern Landscape APP - With this APP you can keep up with the latest news of our group: Features, Group Messages, new magazine issues and more!" />
<meta name="author" content="LFS" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
$('.link').live('tap', function() {
url = $(this).attr("rel");
loadURL(url);
});
function loadURL(url){
navigator.app.loadUrl(url, { openExternal:true });
return false;
}
</script>
</head>
<body>
<div id="contentor">
<header>
</header>
<nav>
<div id="cabeca">
<img src="imgs/cabecalho.png">
</div>
<br>
<br>
<br>
<div id="botoeswraper">
<div id="linha1">
<div id="b1">
<div id="icone"><img src="imgs/logo_compus.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org'>Official Website</a> </div>
</div>
</div>
<div id="linha2">
<div id="b2">
<div id="icone"><img src="imgs/rblogo.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape'>Redbubble group</a> </div>
</div>
</div>
<div id="linha3">
<div id="b3">
<div id="icone"><img src="imgs/groupmsg.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.redbubble.com/groups/northern-landscape/forums/7330'>Group messages</a> </div>
</div>
</div>
<div id="linha4">
<div id="b4">
<div id="icone"><img src="imgs/issues.png"></div>
<div id="texto">
<a href="#" class='link' rel='http://www.northernlandscape.org/alli.php'>All NL magazine issues</a> </div>
</div>
</div>
<div id="linha5">
<div id="b5">
<div id="icone"><img src="imgs/tweeter.png"></div>
<div id="texto">
<a href="#" class='link' rel='https://twitter.com/NL_host'>Check us on Tweeter</a> </div>
</div>
</div>
</div>
</nav>
<p> </p>
<p> </p>
<footer>
<p>
NL APP version 1.0 - Developed by LFS©
</p>
</footer>
</div>
</body>
</html>
I am most appreciated for any help that I can get...
I have done the changes below and each one works for me.
<!-- Opens in new tab -->
Official Website
<!-- Opens in new window -->
Redbubble group
I am trying to make a JSONP call in my PhoneGap application. It works fine in my desktop browser, but not in the device. I thought it might be an issue with the jQuery Mobile, so I even tried disabling it, but doesn't help.
Android version: 3.0
This is my code:
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.0.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script src="cordova-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function cancelclicked() {
window.location.href="index.html";
}
function jsonp_call()
{
// The call request here
}
function parseRequest(response)
{
// Parse the response here
}
</script>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="b">
<h1>Login</h1>
</div>
<div data-role="content">
<div class="content-primary">
<div data-role="fieldcontain">
<label for="name">Username:</label>
<input type="text" id="uname" />
</div>
<div data-role="fieldcontain">
<label for="name">Password:</label>
<input type="password" name="name" id="pass" />
</div>
<div data-role="fieldcontain">
<label for="name" id="invalidlogin"></label>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<button type="submit" onclick="return jsonp_call()" data-theme="e" rel="external">Login</button>
<!--</form>-->
<button type="submit" onclick="cancelclicked()" data-theme="d">Cancel</button>
</fieldset>
</div>
</div>
</div>
What am I missing here? It works fine on a browser, so I'm quite sure that the JSONP code is correct. It fails on the emulator and the device as well.
Did you add the domain name into the Cordova config file? It is under res/xml/config.xml
<access origin="bla.bla.domain.com" />
For me the access origin setting was already set.
But still i got the problem.
It turns out to be a couple of missing closing HTML tags.
(in my case closing A HREF tags )
When i only changed this, it was working again on Android.
Chome automatically fixed the missing closing tags.
Quite a headache, because i had no problems during testing in my webbrowser, and i thought it had to do with the jsonp implementation, or security/signing issues.
Phonegap 1.8.1 -- Android API for 2.2 -- jQuery 1.7.1 -- jQueryMobile 1.0
I've made a very simple app to test this out and I just can't get it to work. Here it is.
INDEX.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TestApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
function onDeviceReady() {
document.addEventListener("backbutton", onBackButton);
}
function onBackButton(e){
console.log("C'mon guv! Gimme a chance!");
}
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script type="test/javascript" src='cordova-1.8.1.js'></script>
</head>
<body>
<div id="homepage" data-role="page" data-theme="a">
<div data-role="header">
<h1>Work with me here</h1>
</div>
<div data-role="content">
I am page 1.
Next
</div>
</div>
<div id="char-1" data-role="page" data-theme="a">
<div data-role="content">HAHAHA!</div>
</div>
</body>
</html>
AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="2" android:targetSdkVersion="14"/>
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<application android:label="#string/app_name">
<activity android:name="MyActivity"
android:label="#string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
ADDENDUM - I think the problem is that the 'deviceready' event either does not fire or fires before the code binds to the event. Not sure how to fix it.
Let me know if there's more information I need to provide.. I'm stumped.
As far as i know, back button press event is not working inside onDeviceReady. You have to trigger the event in the every page show. In my case, it works like this,
function onDeviceReady(){
/*Back event handler for all pages navigation*/
$(document).bind ('pageshow', function (e, data) {
if ($.mobile.activePage.attr('id') == 'index') {
document.addEventListener("backbutton", function () {
setTimeout( function() {navigator.app.exitApp();}, 100 );
}, true);
}
else{
document.addEventListener("backbutton", function () {
setTimeout( function() {$.mobile.changePage("#index");}, 100 );
}, true);
}
});
}
In my application, when you presses back button from first screen, it exits the application and if you presses inside any pages, it automatically comes to the first page.
I'm ashamed to admit this.
<script type="test/javascript" src='cordova-1.8.1.js'></script>
It's not test/javascript ... It's text/javascript.
:(