I'm working on mobile site. I've found that regular a:active styling works for iOS if I include ontouchstart="" in the link code.
For some reason Android devices do nothing when links are clicked.
My goal is to change the background-image position on press, is there a simple/effective cross platform solution?
You can add "click" event listener to the element, and change the background-image position with a new css class.
Related
I have the following image:
I need to change the color of the circles once it is clicked.
The image is a SVG
Should work on Android API 17+ and if possible for tablets as well
What is a smart/effective way to achieve that?
The possible solution I have until now are:
Break it in small clickable parts(Not good, there will be lots of images, other body parts will be required to do the same)
Use a Webview with Javascript to change the colors.
Any other suggestions?
One option is to use WebView and handle with these click events you need using javascript or even JQuery. You just need to put ID or classes.
$("#cicleButton1").click(function() {
});
Im using Ratchet Framework for andriod app development.
I have some scrolling problems in some android phones and also in bluestack.
when scrolled, a toomany blank spaces occurs and it affects the smooth scrolling. also affects the forms in the page. attached the image related
scrolling on some other devices is good , No extra space.
1) make sure you are using the meta tags provided by ratchet.
2) make sure you are inserting the bar-tab navigation at the top right after the body
From the ratchet getting started guide:
1. Fixed bars come first
All fixed bars (.bar) should always be the first thing in the of the page. This is really important!
2. Everything else goes in .content
Anything that's not a .bar should be put in a div with the class .content. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.
3. Don't forget your meta tags
They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.
If that doesn't help post some code and let us take a look at it
i developed an android app by using html5 and phonegap (cordova 2.7.0); it's an application for image search, use the google API.
Returns a list of images that start with a tap.
It works perfectly on almost all devices, but on small screens with Android 2.3.x, scrolling (or click on image) does not work.
Any suggestions?
Thanks in advance.
You have run into an android bug. Overflowing DIVs inside BODY tag wont allow you to scroll. Same bug was there in iPhone (iOS < 5), but there atleast you could use two fingers and scroll.
However there are workarounds for it. You can use third party libraries such as iScroll, touchScroll ...
iScroll will disable your inputs for the div which you have applied scroll to. If its a simple paragraph use iScroll.
Reference
While 2-Stroker's answer is the correct one here is a quick and dirty solution, add a few <br> tags at the end. Worked for me ;)
If you don't want to go through the trouble of adding iScroll you can also use:
// Workaround for problematic scrolling behaviour on Android
// we can't fix this in css directly as it breaks iOS and the
// platform selector in css is unreliable
if ( device.platform === 'Android' ) {
$('.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active ').css("position", "initial");
}
I am building a phonegap app for android and have a vertical scroll issue. It is similar to Phonegap vertical scroll. I use and fix on android 2.3 but it happen on another phone using android 4.0. You can see video http://www.youtube.com/watch?v=SADCFRoxj4s at 00:10. How can i do to removing it and highlight when pull the scroll?
p/s : it still happen on the build for IOS. I use phonegap build online to build it
You want to remove highlight?
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
You want to remove scrollbar? Adjust you container to fit webview size. If you have no luck with this you can still try to hack into the android webview and disable scrolling
webView.setVerticalScrollBarEnabled(false);
Read:
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-animations-the-hiccups-and-bugs-youll-want-to-avoid/
http://daneden.me/2011/12/putting-up-with-androids-bullshit/
I have a very simple Android app that's just a WebView. Everything works fine (complex Javascript etc.). However, all of the HTML select controls seem to be disabled. They display with default values, but nothing happens when I click on them, and they don't get the orange highlight when I arrow through the controls.
Other inputs (text, radios, submit) work fine, so I don't think it's a focus issue.
Configuration:
Eclipse IDE
SDK Version 8 (2.2)
Testing in the Emulator
I had the same problem. My problem was fixed by changing overflow:hidden to overflow:visible on a containing element.
I had the same problem.
In my case I had elements on the page that had the style position:fixed;
Although the bounding boxes of the select element and the fixed positioned elements did NOT overlap, I wasn't able to open the select dialog.
By removing a couple of fixed positioned elements I got it to work. Seems to be a bug in webview.
Same Problem, fixed it by setting position:relative on the li's containing the select fields
2 years after the fact, but in case someone pulls this up again:
If it's android 2.3, put in every empty child element of a fixed position parent. I found that this fixed the problem for me.