Develop Reference

Local images are fine in 4.4.2 but not being shown on WebView in Android 4.2.2

I have some images in my opening screen, some are on the page, some are not when I install the apk into the phone. I tried to find a solution but none worked for me.
Any idea why the following scenario exists at all ?
<link rel="stylesheet" href="file:///android_asset/www/css/jquery.mobile-1.4.2.css">
<link rel="stylesheet" type="text/css" href="file:///android_asset/www/css/main.css" />
<link rel="stylesheet" href="file:///android_asset/www/css/jqm-icon-pack-fa.css" />
<script src="file:///android_asset/www/js/jquery-1.11.2.js"></script>
<script src="file:///android_asset/www/js/jquery.mobile-1.4.5.js"></script>
The weird things;
It works in my LG G2 (4.4.2)
It DOES not work in Samsung S2 (4.2.2) even though the images are in the same folder and they are all in .jpg format, the images in the first div work, the ones in the second div not working.
The working piece in the same html;
<div data-role="header" style="padding-top:20px;">
<center><img style="padding-bottom:10px;" src="file:///android_asset/www/images/openingPage/logo.png" />
</center>
<center><img style="max-width:100%;" src="file:///android_asset/www/images/openingPage/header_image.jpg" />
</center>
</div>
The piece that is not working at all ; (I do not see the images in the table inside the div, works in the browser, emulator, LG G2 with Android version 4.4.2 !)
<div data-role="main" class="ui-content">
<table style="width:100%; margin-top:3%;">
<tr>
<td>
<a href="./19.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/1.jpg" />
</center>
</a>
</td>
<td>
<a href="./27.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/2.jpg" />
</center>
</a>
</td>
</tr>
<tr>
<td style="padding-top:5%;">
<a href="./116.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/3.jpg" />
</center>
</a>
</td>
<td style="padding-top:5%;">
<a href="./132.html" data-transition="fade">
<center><img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/4.jpg" />
</center>
</a>
</td>
</tr>
</table>
</div>
MainActivity;
public class MainActivity extends Activity {
private WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView1);
// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
//mWebView.setWebContentsDebuggingEnabled(true);
mWebView.getSettings().setPluginState(PluginState.ON);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setAllowContentAccess(true);
mWebView.getSettings().setAllowFileAccessFromFileURLs(true);
mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
mWebView.loadUrl("file:///android_asset/www/18.html");
}

Well, I am pretty surprised that "center" tag is the one causing to the problem.
When I removed it from the surrounding of "img" tags, the problem disappeared for S2 with 4.2.2.
<div data-role="main" class="ui-content">
<table style="width:100%; margin-top:3%;">
<tr>
<td>
<a href="./19.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/1.jpg" />
</a>
</td>
<td>
<a href="./27.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/2.jpg" />
</a>
</td>
</tr>
<tr>
<td style="padding-top:5%;">
<a href="./116.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/3.jpg" />
</a>
</td>
<td style="padding-top:5%;">
<a href="./132.html" data-transition="fade">
<img style="max-height:58%; max-width:95%;" src="file:///android_asset/www/images/openingPage/4.jpg" />
</a>
</td>
</tr>
</table>
</div>

Autoplay Youtube video - iframe

As you could make a Youtube video it will automatically run ?
I used autoplay = 1 and does not work
The video is for Android app
The code from the video is:
<div class="demo-wrapper" data-role="page" id="tutoPage" style="margin-top: 0px;">
<div class="header" data-role="header">
<span class="title">Tutorial</span>
</div>
<div class="content" data-role="content">
<iframe id="bgvid" src="https://www.youtube.com/embed/*****?rel=0&autoplay=1" ></iframe>
<div id="tutorial" >
<a id='tuto' href='#initPage' >continuar</a>
</div>
</div>
</div>

Replace the ; before autoplay=1 with &.
EDIT: autoplay doesn't work on webviews. You have to use youtube api to achieve that.

Use the url like this:
https://www.youtube.com/embed/*******?rel=0&autoplay=1

Show input elements hidden under keyboard Android PhoneGap

I have a form in which one input element gets hidden under keyboard after focusing on it. I don't want my page to get resized.
Can this be handled using scroll, so that only the form div gets scrolled to that particular element?
Or any other approach to this?
I'm not using jquery-mobile and I have tried scrollToElement of iScroll 5, but to no use.
<body onload="initialize()">
<div id="header">
<img alt="" class="header_logo" src="" />
</div>
<div id="main">
<div id="map-canvas"><input id="pac-input" class="controls" type="text" placeholder="Search Area" /></div>
<form id="booking_form" action="#" >
<input type="tel" id="contact_no" placeholder="Contact Number*" maxlength="10"/>
<div class="group">
<span id="get_pick_location" class="gps_icon" title="Press to get current location address/ Select a point on map to get address"></span><textarea cols="10" id="pick_up_location" placeholder="Pickup Location*" ></textarea>
</div>
<div class="group">
<span id="get_drop_location" class="gps_icon" title="Press to get current location address/ Select a point on map to get address"></span><textarea cols="10" id="drop_off_location" placeholder="Drop off Location*" ></textarea>
</div>
<input type="text" id="pick_up_time" placeholder="Pickup time*" />
<input type="text" id="car_model" placeholder="Car*" />
<input type="submit" id="confirm_booking" class="custom_button" value="Confirm Booking" />
</form>
</div>
<div id="footer">
<button id="create_booking" class="custom_button">Book Now</button>
</div>
</body>
The input field car_model gets hidden under keyboard. I have android:windowSoftInputMode="adjustPan" in my manifest file.
theScroll = new IScroll('form');
$('#car_model').focus(function(){
theScroll.scrollTo($('#car_model'));
});

Html onclick firing twice in Android

Code:
function hello(){alert("Hi");};
<center>
<table border="0" height="100%">
<tbody>
<tr>
<td align="center" width="100%">
<img src="cover.png"
width="300" height="300" id="image"></img></td>
</tr>
<tr>
<td height="100%"> </td>
</tr>
<tr>
<td align="center">
<form onsubmit="go();return false">
<input class="answer" id="answer" name="answer"
onclick="hello();"/>
</form>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</center>
I have been trying to capture when the answer text box is clicked in HTML. It works perfectly in Firefox and Chrome (I only get one Hi alert), but the onclick method fires twice when I try to run the code in a web-view in android (I get two Hi alerts). However, when I call the same function later it works properly, firing only one Hi alert.
<div style="bottom: 0; right: 0; position:absolute; margin-right:5%">
<a><img alt="" src="start.png" id="submit" onclick="go();hello();"></a>
</div>
I'm guessing it has something to do with the fact that I'm calling the function from inside the form and it's somehow firing the event twice but I have no idea how to fix it. Any help?

You could try using one() as follows.
$('#answer').one('click', function() {
alert("Hi");
});
<form onsubmit="go();return false">
<input class="answer" id="answer" name="answer"/>
</form>

where put html form in Res folder and how to show this html form in webview

I have html form.but i dont understand where is put this html form. how to display form in web view.Thanks in advance
<Html>
<Head>
<Title>
<Title>
</head>
<body>
<table width="60%" align="center">
<TR><TD colspan="2"><span class="style1">Post comments</span></TD>
</TR>
<form action="http://www.indianexpress.com/ajax/saveComment.php" id="frmcommentmain" name="frmcommentmain" method="post">
<input type="hidden" value="918703" name="storyId">
<input type="hidden" value="172.16.24.10" name="ip_addr">
<input type="hidden" value="0" name="parentcmtId">
<TR><TD height="35">Name:</TD><TD><input type="text" name="name" tiptitle="Please enter your name">
*</TD>
</TR>
<TR><TD>Email:</TD><TD><input type="text" name="email" tiptitle="Please enter your email">
*</TD>
</TR>
<TR><TD>Title:</TD><TD><input type="text" name="subject" tiptitle="Please enter subject">
*</TD>
</TR>
<TR><TD>Comment:</TD><TD><textarea title="Please enter your comments" rows="6" name="comment"></textarea>
*</TD>
</TR>
<TR><TD colspan="2"><input type="checkbox" value="checkbox" name="checkbox">I agree to the terms of use.</TD></TR>
<TR>
<TD colspan="2"> </TD>
</TR>
<TR>
<TD colspan="2"> </TD>
</TR>
<TR><TD colspan="2"><input type="Submit" name="submit" value="submit"></TD></TR>
</form>
</table>
</body>
</html>
I have read many articles but I did not get answer for putting html form.Many articles described load data from url in webview but i want to load form in webview.

Indeed place your html page in the assets folder.
For showing the webpage use a WebView
WebView wv = (WebView)findViewById(R.id.webview);
wv.loadUrl("file:///android_asset/index.html");

I would store the HTML content in a file in the assets folder in your Android project. You should then be able to read the file from your code and load it into a Webview.