I have html content and images to load in webview in jelly bean OS. images are taken from sd card.
Here are the content:
<html>
<head>
<title>Test Name</title>
</head>
<body>
<p><font color="#003399" size="2">
<center>
<a href="file://storage/sdcard0/images/img.jpg" target="_blank" >
<img src="file://storage/sdcard0/images/img.jpg" />
</a>
</center>
</p>
</font> Contetnt Goes Here
</body>
</html>
myWebView.loadDataWithBaseURL("",webcontent, "text/html", "UTF-8", null);
Its working in ICS OS but does not load into jelly bean OS web view.
Thanks in advance
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 using HTML5 video tag to play video in phonegap app.In my app I have one listing page with multiple videos. I want to play them simultaneously.
PROBLEM
-------
To play video in phonegap android i used
$("#id").get(0).play();
$("#id1").get(0).play();
$("#id2").get(0).play();
With this only last one video plays and if click on other video it starts but pauses other videos.
I have no idea about problem.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>I Am Now A Mobile Developer!!</p>
<video class='androidVid' id='video1' style='width:100%;height:240px' muted>
<source type='application/x-mpegURL' src='http://xx.xx.xx.xx/HLS/clawview.m3u8?t=Math.random()'>
Your browser does not support the video tag.
</video>
<video class='androidVid' id='video2' style='width:100%;height:240px' muted>
<source type='application/x-mpegURL' src='http://xx.xx.xx.xx/HLS/clawview.m3u8?t=Math.random()'>
Your browser does not support the video tag.
</video>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<script>
$(function(){
$("#video1").get(0).play();
$("#video2").get(0).play();
});
</script>
</body>
</html>
thanks
I am developing android application using eclipse ADT phonegap, when i select date ,no calender popup. thank you in advance.........
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
Your code is correct but basically is not working in Internet explorer and Mozilla . i try with chrome and it will work perfectly.and phone gap basically depend on browser.And I don't know about it so much. so sorry for that.
Phone Gap (Cordova) currently uses the standard Android WebView which is a stripped down version of a browser (based on a particular version of WebKit).
It can't really be the Chromium-based WebView yet, that was just made available as a component to third party developers only recently in Android 4.4.
And as of April 1st 2014, Android 4.4 (KitKat) constitutes only about 5.3% of all the Android versions (not to mention, this new Chromium-based WebView still seems to be a work in progress, so it will take a while for most third party developers to feel completely comfortable with it).
jsfiddle.net/4r9mopwr/embedded/result/
Open it with chrome
http://www.w3schools.com/jsref/dom_obj_date.asp
First of all, jQuery UI Datepicker widget combined with a 3rd party wrapper to make this work with jQuery Mobile, so you need to combine jquery-mobile-datepicker-wrapper js and css in your page from here https://github.com/arschmitz/jquery-mobile-datepicker-wrapper, then in html
<input type="text" class="date-input">
<script>
$(function(){
$( ".date-input" ).datepicker();
})
</script>
I am working on an application with many html pages. I have created these in the raw folder on Eclipse.
I'm going to be making many html files and I want to have only one location for the css file which I want to call in each of the html files. This application works in such a way that the
loadData method displays the html page as shown below:
webview.loadData(readTextFromResource(R.raw.gen1), "text/html", "utf-8");
Id appreciate any ideas.
you can copy html and css files in your project assets and load html file from asset to webview like below code:
WebView wv;
wv = (WebView) findViewById(R.id.webView1);
wv.setBackgroundColor(0);
wv.setBackgroundResource(android.R.color.black);
wv.setWebChromeClient(new WebChromeClient());
wv.setWebViewClient(new WebViewClient());
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setPluginsEnabled(true);
wv.loadUrl("file:///android_asset/Index_Animation/test.html");
like below screen shot:
and refer css in html file below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="./style.css" type="text/css" media="screen"><!--This line refer the css file-->
</head>
<body bgcolor="#000000">
<div class="col_left">
<div class="logo">
<div class="circles">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<center>
<img src="./Untitled.png" />
</center>
</div>
</div>
</body></html>
HTML5 supports a seamless IFRAME, which is a way to do an include of headers and footers of HTML now. I tried this on the Android (2.2) browser, which I thought was supposedly HTML5-based, but it didn't work. Is there a way to do HTML file includes on Android?
My sample that I tried was composed of an index.html, header.html, and footer.html. In index.html, it had:
<!DOCTYPE HTML>
<iframe seamless="seamless" src="header.html" sandbox="allow-top-navigation allow-scripts allow-forms allow-same-origin"></iframe>
My content goes here
<iframe seamless="seamless" src="footer.html" sandbox="allow-top-navigation allow-scripts allow-forms allow-same-origin"></iframe>
In header.html, it had:
<html>
<head>
<link rel="stylesheet" href="android.css" type="text/css" />
<title>Test App</title>
</head>
<body>
<div class="home page">
<h1>Test App</h1>
<div class="home content">
In footer.html, it had:
</div><!-- .home .content -->
<div class="home footer">
</div><!-- .home .footer -->
</div><!-- .home .page -->
</body>
</html>
But when I ran the code on a Samsung Galaxy Tab running Android 2.2, I had two IFRAMES that were not seamless, and the page rendered as if it was in HTML4.01.
The Android web browser isn't fully HTML5 compliant yet.
http://www.techradar.com/news/phone-and-communications/mobile-phones/android-2-2-features-more-html5-fastest-mobile-browser-691051
Notice the quote from the Google executive, Froyo has "more HTML5 features", he doesn't say the web browser is HTML5-compliant yet.