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'));
});
Related
I'm getting black "bars" on I open modal's on android's chrome, as show on my attachments, well, this is my code, and I'm using bootstrap 4.1. Anyone can help me?.
<div class="modal fade" id="modalCombos" tabindex="-100" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Combos</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#foreach (var item in combosList)
{
<div class="row" style="margin-bottom:5px">
<div class="btn btn-danger col-12" onclick="addItem('#item.Nome', '#item.Valor.ToString("F")')">
#item.Nome - R$ #item.Valor.ToString("F")
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
Change .fade.in opacity property on bootstrap.min.css from 1 to 0.99:
.fade.in{opacity:0.99}
Also try this on bootstrap.min.css:
.fade.in{opacity:1;-webkit-backface-visibility: hidden;}
I have started work on Phonegap and it is very hard for Native App developer to go for Hybrid.
Just want to know that how I can show configuration screen only once in Phonegap. Below is the screenshot. I just want to show it only when user runs an app first time, and not again and again whenever user launches an app and saves IP address.
The problem here is that, whenever I press back button of device, this screen gets display.
Here is my HTML:
<body>
<div data-role="page" id="pageConfig"> // This Div needs to show only first time
<div class="ui-content" data-role="main">
<h3>Configurations</h3>
<label for="ipText">IP Address:</label>
<input type="url" id="ipText" name="ipText" />
Save
</div>
</div>
<div data-role="page" id="pgLgn">
<div data-role="main" class="ui-content">
<form id="form1" class="validate">
<div class="ui-field-contain">
<label for="usrNme">Username:</label>
<input type="text" name="usrNme" id="usrNme" placeholder="Username" data-clear-btn="true" data-theme="d" class="required" />
</div>
<div class="ui-field-contain">
<label for="pswrd">Password:</label>
<input type="password" name="pswrd" id="pswrd" placeholder="Password" data-clear-btn="true" data-theme="d" class="required" />
</div>
<div class="ui-field-contain">
<input type="checkbox" id="chbx-0" class="custom" data-inline="true" />
<label for="chbx-0">Remember me</label>
</div>
<input type="submit" data-inline="true" value="Login" id="btnLogin" data-shadow="false" data-theme="a" onclick="OnLoginClick()"/>
<input type="reset" data-inline="true" value="Reset" data-shadow="false" />
</form>
</div>
</div>
</body>
What Cordova Plugin I need?
NOTE: I am using Jquery Mobile and Cordova SQLite Plugin for data storage. And my app is Single Page Architecture.
Thanks in Advance!
Please let me know if not clear.
You have to write this line in device ready function.
document.addEventListener("backbutton",onBackKeyDown,false);
function onBackKeyDown(){
if($.mobile.activePage.attr("id") == "pgLgn"){
navigator.app.exitApp();
}
else{
navigator.app.backHistory();
}
}
Use localStorage. Save a simple string with key and check whether there is a particular value against key or not in deviceready function.
I have a jquery-mobile (1.3.1) + phonegap app in which I am using a pop-up widget (This app is for Android-any vresion). This popup is for sign-in (it has Username, Password and a "Sign-in" button. Whenever I click on a text-field (either Username or Password) the device keyboard comes-up but it overlaps with the popup. Because of this overlap, users cannot see what they are typing, and cannot click on Sign-In unless the keyboard is minimized. Here is the code what I have now - I've already used "data-position-to="window"
Done
<div data-role="popup" id="popupMenu" data-theme="a" >
<div data-role="popup" id="popupLogin" data-overlay-theme="e" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;" data-overlay-theme="b">
<h3>Please sign in</h3>
<label for="ppcOpremarks" class="ui-hidden-accessible">Remarks</label>
<textarea name="ppcOpremarks" id="ppcOpremarks" value="" placeholder="Remarks (if any)" data-theme="a" ></textarea>
<label for="un" class="ui-hidden-accessible">Username</label>
<input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
<label for="pw" class="ui-hidden-accessible">Password</label>
<input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
<a href="#menuPage">
<button type="submit" data-theme="a" data-icon="check" id="ppCheckDone" onClick="updateppc()">Sign-In</button>
</a> </div>
</form>
</div>
</div>
How to make my popup move towards upward direction instead of overlapping with the device keyboard?
You can reposition a popup once an input field is focused within it.
$("#popupLogin input, #popupLogin textarea").on("focus", function () {
$("#popupLogin").popup("reposition", {
y: 0 /* move it to top */
});
});
Demo
I'm building an Android app, and using library jsoup, I'm parsing the html but don't know how to get items from my html
the html:
<div id="polls-687" class="wp-polls">
<form id="polls_form_687" class="wp-polls-form" action="/myurl" method="post">
<p style="display: none;">
<input type="hidden" id="poll_687_nonce" name="wp-polls-nonce" value="6490c2e4b0" />
</p>
<p style="display: none;">
<input type="hidden" name="poll_id" value="687" />
</p>
<h4>What do you want to hear?</h4>
<div id="polls-687-ans" class="wp-polls-ans">
<ul class="wp-polls-ul" style="padding-left:0px;">
<li>
<input type="radio" id="poll-answer-2605" name="poll_687" value="2605" />
<label for="poll-answer-2605">Cappella - U & Me</label>
</li>
<li>
<input type="radio" id="poll-answer-2607" name="poll_687" value="2607" />
<label for="poll-answer-2607">Deepest Blue - Deepest Blue</label>
</li>
<li>
<input type="radio" id="poll-answer-2609" name="poll_687" value="2609" />
<label for="poll-answer-2609">Britney Spears - (Hit Me Baby) One More Time</label>
</li>
<li>
<input type="radio" id="poll-answer-2611" name="poll_687" value="2611" />
<label for="poll-answer-2611">Drukwerk - Marianneke</label>
</li>
</ul>
<p style="text-align: left;">
<input type="button" name="vote" value=" Stem op deze plaat " class="Buttons" onclick="poll_vote(687);" />
</p>
<p style="text-align: left;">
</p>
</div>
</form>
</div>
I need to get the labels between the li tags. Also the values from the input tags. I've used this link http://jsoup.org/cookbook/extracting-data/attributes-text-html but I don't know how you can get the specific items I require. Does someone have experience with Jsoup and give me some advice or examples ?
Try this
Elements inputElements = document.select("ul li input");
for (Iterator<Element> iterator = inputElements.iterator(); iterator.hasNext();)
{
Element inputElement = iterator.next();
Element labelElement = inputElement.nextElementSibling();
System.out.println(inputElement.attr("value"));
System.out.println(labelElement.ownText());
}
I'm working on phonegapp application. My application has a form which user should fill.I have used inline validation using Jquery. when user clicked some required field & didn't fill the field it will prompt the error or if he try to submit the form all the required fields will be given errors. It works as i want. My problem is when user clicked back-button without submitting the form, all the prompted errors are in the new page.How can i hide those prompted errors when user clicked back-button.
please help me.
I have attached screen shots to picasa-album. check it in here
https://picasaweb.google.com/103544813681982438507/PhonegapApp
Here goes my code..
<html>
<form id="formID" method="post" action="submit.action">
<ul data-role="listview" data-inset="true" data-theme="a">
<li ><div data-role="fieldcontain">
<label for="address">Address</label>
<input type="hidden" name="address" /></div>
<label for="street">Street:</label>
<input type="text" name="street" id="street" value="" class="validate[required] text-input" data-prompt-position="topLeft:50" data-prompt-position="top:60"/>
<label for="suburb">Suburb</label>
<input type="text" name="suburb" id="suburb" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
<label for="town">Town</label>
<input type="text" name="town" id="town" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
<label for="district">District</label>
<input type="text" name="district" id="district" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></li>
<li>
<div data-role="fieldcontain">
<label for="date">Date</label>
<input value="" class="validate[required] text-input datepicker" type="text" name="date" id="date" data-prompt-position="topLeft:50" /></div></li>
<li>
<div data-role="fieldcontain">
<label for="owner_name">xxxxxxxx</label>
<input type="text" name="xxxxx" id="xxxxx" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></div></li>
<li>
<div data-role="fieldcontain">
<label for="xxxxxx">xxxxxxxxxxxx</label>
<input type="text" name="xxxxxxxxxx" id="xxxxxxxxxxx" value=""/></div>
</li>
</ul>
<div data-role="fieldcontain">
<button type="submit" name="save" id="save" data-theme="a" value="Save" class="submit"/></div>
</form>
</div></div>
<script type="text/javascript">
//Form Validating.................................................
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine({autoHidePrompt:true});
$( ".datepicker" ).datepicker();
});
</script>
</html>
You can hide the form validation elements when a user navigates away from the current page:
$(document).on('pagehide', function () {
$('#formID').validationEngine('hideAll');
});
Source: https://github.com/posabsolute/jQuery-Validation-Engine
It doesn't look like you're quite following the jQuery Mobile page convention: http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html
Quick Example:
<body>
<div data-role="page">
<div data-role="header>...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</body>
Note that .on() is new as of jQuery 1.7 so if you're using 1.6.4 or older, change .on() to .bind().