I am developing an application using PhoneGap and JQuery Mobile for Android.
I have 2 inputs on the main page, all is working perfectly, but when I focus an input, it looks like JQuery duplicates it, with another one, over the original one, that does not have border radius, and if I scroll the content, I can see the original one underneath when it tries to reposition itself over the original.
Have you seen this behavior before? What to do to get rid of it.
Thank you
Related
Im trying to build an app that can copy and save all text that user selected in any othe apps such as chrome, adobe reader, sms .....
In fact I have no idea how should I do that or even is that possible or not
I will be thankful if any one can help me.
The Accessibility API allows you to investigate the view hierarchy displayed on the screen and read text from different views. On top of that, you may be able to fetch the coordinates of where user tapped (maybe by using some kind of system overlay view) and translate them to the position of text the user most likely wanted to copy. Note that if this even works at usable level, will be very hacky and most likely making it work across considerable number of devices will be hard.
The idea is to build a website which can grant a mobile and desktop user the full experience. 'The full experience' meaning the use of jquery.
The most important thing is accessibility, so I'm wondering if their is a cross platform way to build a slider/carousel which supports text, links and most importantly touch swipes.
To improve speed, I'd much prefer to load the slides seperately. I understand ajax maybe the solution.. but haven't a clue how. Can anyone direct me towards any basic tutorials that cover this?
A follow up question to the last.. Is ajax safe for dynamically loading content onto mobile devices too?
Also in terms of website layout. Most of the layout will change depending on css media rules when the page is resized. But there are a few elements that will need to teleport depending on the size of the screen.
I considered creating separate elements that would be hidden and shown with jquery/css, but not particularly liking the sound of the code being loaded when it's not needed.
This is slightly different to the sliders in the sense that this code needs to be instantly responsive if the screen size changes (for example, a tablet user changing from portrait to landscape.. or a desktop user zooming in.)
I just don't like the sound of code being loaded if it's hidden.. what is best practice for this?
Again the questions are..
How can i go about building a cross-platform slider, that allows text,links and touch swipe (literally have no idea where to start with touch swipes.)
How can I dynamically load content? (with ajax)? Will this work with smartphones too?
Do people load 'layout' code (on page load) that is only visible if certain parameters are met (eg screen-size.) An example being 2 different menus, one for a small screen and one for a large. Or is there a safe way to load layout code only when it is needed, which would reduce page load times (especially for mobile users.)
thanks
3) touch swipes work the same way as a click + drag, so you should be able to use the same code for mobile and desktop. Here is a great example of this: http://scripterlative.com/files/dragdivscroll.htm
I can't get CSS3 transformations and Google Maps to play nice together in Android 2.2's WebView. Here is a fiddle, with two buttons to test transformations. You will need to enable "Emulate touch events" in Chrome to be able to click on them in the desktop. The device I'm using has a 1024x600 screen.
If I don't do anything special, there is flickering when a transformation starts. Now, if I add -webkit-backface-visibility: hidden to the element I'm applying the transformation to, everything is silky smooth and there is no flicker, but the map becomes impossibly slow, and you can't barely scroll around.
I tried to work around this by removing -webkit-backface-visibility by setting it to visible. This works, and the map will be fine again, but setting the property causes flicker. I also played around with -webkit-perspective and -webkit-transform-style, which also seem to get rid of the flicker when a transformation starts, but they also cause flicker when removed.
I also noticed that applying '-webkit-backface-visibility: hidden' to any element on the page makes the flickering at the beginning of transformations disappear. So I put a small div with the property on it, and when the transforms were done, I hid it with "display: none". This causes flicker as well.
My question is, thus: how can I have -webkit-backface-visibility (which I need in order to make the transformations flicker-free) and Google Maps, without making Maps slow?
Possible issues can be 2.2 is rather out of date and you should realistically be using 3.0 now to support tablets. Also, if you are testing on an emulator then this will be your issue.
If you open any popup image in the Android browser, then click in any place on the page, the image is being changed (colors/sharpness/whatever - I can't define precisely, since I'm not an artist).
To see this effect, open a site with a popup image, which is implemented as a div with absolute positioning (say, http://highslide.com/ -- the first site I've googled). The site should be open in the Android browser (I've tried Android emulator from Eclipse ADT plugin and Kindle Fire). Click on any preview to popup the image, then tap on the page (keep you finger on the screen) and look at the image the same time.
My question: what this effect is about and how to eliminate it? Why don't I see it neither on PC nor on Mobile Safari? I have the same effect with my web-app, where it looks ugly and seems to be slowing a form, so I want to get rid of it.
A figure:
I've enlarged a portions of two shots, made before tapping on the arrow point, and after, and inserted them on top to show what I'm talking about.
Regards,
There's nothing wrong with your web app or your web page, this is simply a performance feature of Android. You can see this on the homescreen when you scroll and it happens in any application that scrolls.
When you tap, it signals to Android that you might potentially start scrolling. To prepare for this, it uses a compressed version of the images to make scrolling smoother.
You don't see this on your PC because your PC has no problem scrolling through a web page with tons of images at full resolution. As to why you don't see it on mobile safari, I don't know enough about the platform to say.
If every image on the page has the same physical size as specified in HTML/CSS, this effect disappears. That's why I observed this in popups: their inner images usually are resized.
I have mixed feelings. Kinda satisfaction for finding it after all and hatred to Android developers for programming this feature.
I am making a mobile website running with Jquery Mobile and the site is just like a big form split up in several pages. It works good with all phones except with Android.
The problem is when you focus on a input at the lower part of the page, you wont be able to scroll to see the last element of the page (Which in this case is the submit button) cause the keyboard blocks its display.
I've tried to find any sollution for this - f.o.e i tried to use iScroll without no success.
Is there any good sollutions to this?
Cheers
I had a similar issue on our mobile site. What I ended up doing was hooking the input's focus event and blur events. In the focus event I dynamically increased the height of the page. In the blur event I restored the height. As a safety measure, I also restore the height on the page hide event.
Hope this helps. If needed I can provide more details.