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
Related
Is it a good way to use card in Materialize CSS as on click card popups it used for values to edit and save and it pops back i'm using it for android application using a Phonegap.
The real problem is i was not able to use modal in Materialize CSS as this is not responding well in my emulator.modal is pop up's without clicking.
Thanks in advance.
Sometime this will be happened when you use <a> tag. Instead of using<a> tag use <button> tag. I have added sample html code snippet. Try this.
HTML
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
Full Code in single html page.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" >
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
I am loading a html from the assets folder. It is positioned below an image-view. The code works, however it takes a second for the html file to appear on the device.
here is the code:
public class FgmIsChildAbuse extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
WebView mWebView;
mWebView = (WebView) findViewById(R.id.webviewm1);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.loadUrl("file:///android_asset/m1_section1_read.html");
ImageView ImageView1 = (ImageView) findViewById(R.id.ImageView1);
Resources res = getResources(); /** from an Activity */
ImageView1.setImageDrawable(res.getDrawable(R.drawable.images_eyes));
mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);
mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
}
}
Below is an example of one of the html files
<html>
<head>
<title>CFAB</title>
<meta name="viewport" content="width=300, initial-scale=1" />
<link rel="stylesheet" media="all" href="master.css" type="text/css" />
</head>
<body bgcolor=transparent>
<FONT COLOR="#000000" size = 3>
<div class="outer" data-role="page" data-theme="a">
<div class="main" data-role="content">
<div class="tab-content">
<div class="tab1 readtab">
<h3>Female Genital Mutilation (FGM) is Child Abuse</h3>
<p>Over <strong>100,000</strong> women in the UK have been <strong>victims</strong> of Female Genital Mutilation (FGM). The vast majority of these victims will have been subjected to this horrific form of abuse either <strong>before they came to the UK</strong> or they will have been taken, as children, to their parents' <strong>country of origin</strong> to undergo this abuse.</p>
<p>This awareness course is designed to help <strong>practitioners</strong> understand what FGM is as well as the context within which it takes place and the relevant legislation to combat it. Critically, it is to build <strong>confidence</strong> so that professionals are better prepared to identify those children most at risk of FGM and those who may have been victims of this type of abuse.</p>
</div>
</div>
</div>
</div>
</body>
</html>
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
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.
:(
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