I'm working on an Android App that is ported to an app using phonegap.
It's coded in HTML, CSS, Javascript/JQuery.
There is a button a user can click. If a user taps the button it should change the buttons text color to black, when the user removes his finger from the screen the button text should turn white.
How can I accomplish this?
Try this, your HTML will be like this:
<a class="ui-btn ui-btn-b btn ui-btn-inline">button</a>
And then your CSS:
.btn{ color:#fff !important;}
.btn:active{ color:#000 !important;}
A working fiddle
Related
<input type="text" class="numberonly">
I want to change the type of this html input from text to number on focus.
$(".numberonly").focus(function(){
$(this).attr("type","number");
});
this jquery works fine but when the webpage is embedded inside the android webview, the android keyboard wont show up on focus. Does jquery .focus prevents default behavior or what? Should I trigger the focus programmaticaly?
e.g.
The second click in the input, brings up the keyboard.
The android default browser has no problem. But the webview inside the android app fails to load keyboard.
I have a search box inside a hidden div that slides open when a button is clicked on mobile devices. It works great except for on Android devices. On android when the search input field is touched to bring up the keyboard the div slides closed making it impossible to search.
How can I keep the div open to enable the search box to be used?
Thanks
Here's the jQuery:
$(document).ready(function() {
$('.search_btn').click(function() {
$('.search-box').slideToggle('fast');
});
});
HTML Markup:
<div class="search_btn">Search</div>
<div class="search-box">
<?php get_search_form(); ?>
</div>
I am developing a FM Radio streaming app. When user presses in toggle button the streaming should stop when clicked again it should start.
streaming works fine but the portion where user needs to touch is not exactly coming on top of that toggle icon. Its coming slightly some where on the top portion of the icon. The portion I have circled and shown in picture.
How to create Image button with simple css and html for this case
<a href="#" style="position:fixed;top: 1%;left: 5%;" onclick="toggleAudio('http://kantipur-stream.softnep.com:7248');">
<img src="images/toggle.png">
</a>
I'd recommend using a touchststart, or touchend, event instead of click events, as they normally (except in VERY recent mobile Chrome browsers) have a delay. Also, I'd get rid of the link. Just add the event handler to the image itself.
When I tap on input[type=number] element in HTML page (Note: html page has only one input element), the keyboard appear with "NEXT" button.
How can I change this NEXT button to DONE/OK or hide it in android 2.3, is it possible to change/hide it?
you can change the ime options by using below code:
input type="text" style="-ms-image-mode: active; ime-mode: active;
Hope it will help. Thanks
I am using android phonegap cordova1.8.0 and jquery1.7.1. My phonegap application having header and footer with text-field and drop down contents. In header, having one back button it should navigate to home page, footer having one home button its also navigate to home page. In content view, it has 4 text-field, and 2 drop-downs. while selecting home button in footer page, the back-side content's text-field only firing and android keyboard only open, footer home button is not firing, its same in header back- button click event also.
here my screen shots
any one can help me?
I think the problem with the placement of your controls.
Try to set this css property for your footer div :
z-index: 1000;
Hope it helps you.
Thanks.