Making select control friendly on touch screens including Windows 8 - javascript

I have a web page that I am trying to make "friendly" to touch devices. With the proliferation of devices with medium sized screens (small tables, large phones) my approach is to make one responsive layout with CSS and javascript tweaks where necessary. This is going pretty well, but I'm wrestling with select controls.
On my android phone and android tablets, the browsers that I've tested render a friendly large dialog when I touch a select control (I still need to test an Apple device), but on a Windows 8 touchscreen laptop, I am left trying to click the little select options. Other than just making the select control a very large font, is there already an established way to make the select more friendly?
I'm thinking of detecting ontouchstart then creating a pop up div with buttons or styled hyperlinks to give an experience like that provided by Android - but then I'd need to disable this on browsers that already handle select controls well...
Anyone have any advice? (I don't have any code yet, and this would apply to any select control)

The most friendly way to deal with controls is to not touch them at all. Let the browser handle them the best way it can — unless you're providing extra functionality like you can with Chosen.js
Usually, yes, setting a larger font size would help. http://css-tricks.com/dropdown-default-styling/

Related

Hide drag and drop area on mobile phones

I'd like to offer users a drag and drop experience when using a desktop computer where possible, but hide it on mobile devices where this is not an option.
After some research, it seems that iOS supports a lot of the modernizr classes you might use to detect this - e.g. the filesystemAPI, drag and drop etc.
Are there any test I can do, to see if a user can actually drag and drop files onto the relevant area? The easiest way I've found so far is to disable it based on the userAgent, but that's really not robust enough...
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/i)
|| navigator.userAgent.match(/Android/i)) {
$('#dragandrophandler').css('display','none');
};

jQuery Scrollbar Plugin

Hi I am stucked in my big project using the custom scrollbar. None of the plugins are 100% working or I may be unaware of some plugins.
which jQuery scroll bar plugin is best? in given list of circumstances below.
proper touch / scroll (cross browser and device compatibility)
nested conditions
inside popup and inside drop down.
inside ajax updated contents
resize / orientation scenarios
for devices: auto focusing for input inside popup
supported in major devices including samsung low end touch phones.
Has any one using this type of custom scrollbar which is perfect for all type of my scenarios?
I'm using the plugin by Malihu. It does the job pretty well and have dozen of options so you can personalize it. I think it passes all your requirements.
http://manos.malihu.gr/jquery-custom-content-scroller/

Detecting Android Menu Icons based on Android Version

I'm currently adding a popup (Add To Home Screen Feature) to an existing mobile web app using jQuery mobile. I would like to place the exact same icon the user has on their phone (based on Android version) inside the popup instructions rather than show 6 different icons the user may have.
Is there any specific jquery/javascript doing this or can anyone provide or direct me to an icon set (specifically just the menu icon) with android version numbers that I can pull from to create some logic to determine exactly the menu icon they need (based on version) to press to bookmark the site? I can't find this anywhere.
Edit:
Looking specifically for hardware specific menu icons for Android devices. They use many different kinds and would like to know if I can detect the device hardware being used and use the appropriate icon? Is this even possible?
You can figure out the android version using this code from another answer.
There used to be no standard for android menu buttons. Hardware manufacturers tended to make the menu icon whatever they wanted. I would heavily suggest using the modern, unified icon with three dots like this one from the android developers site.

Stuttery performance issues with Jquery Mobile and Phonegap

So, I am developing an app using phonegap and jqm. Everything works great and it's all pretty easy thanks to phonegap build. However, I've started to see some 'stutter issues' that are really annoying. My app at the moment only has two pages and the transition effect between them is 'slide'. The first page has a background color set to it and the second one does not. Some of the issues:
When I navigate from page 1 to page 2, half of the page has the background color from the previous page. It goes away after I do some random swipes on screen.
On one of the pages, I have a regular form with some text input fields and a radio button set at the end. When I move from an input box to the radio button the keyboard slides down but it is replaced by a black area for a short period of time.
The fixed header that I have at the top randomly decides to disappear and reappear again.
These are only few of the annoying ones and these only happen on the mobile device and it works fine on the computer. So, I know it's a performance issue.
I've read up about this on the internet and here on SO and different solution have been proposed like writing custom CSS3 transitions (to take advantage of hardware acceleration) or using something like zepto.js.
What in your opinion would be the best 'cross device compatible' method to overcome these? Is there a way to force hardware acceleration with jquery mobile? Is CSS3 performance even across device platforms?
PS. I have been testing on jelly bean 4.2.2. I am not posting any of my code because they are just plain form elements and some input tags and this happens on multiple pages which are totally different so I am pretty sure this isn't code related.
Any help will be much appreciated.
JQuery writes animations using Javascript which dynamically writes inline styles that change quickly. The issue with that, is that it isn't using the hardware acceleration and if you are testing on a retina device, it animates using pixels as they are a unit of measurement. So it is skipping half of your pixels which causes the stutter.
I have written apps using PhoneGap and the best way I came up was to use CSS3 animations/transitions. Super smooth and they feel just like a native app. You will still use JQuery to add/remove classes, etc., but the movement should come from your CSS.

Making dojo dijit layout iOS compatible

I have a complex web application which is based on dijit.layout. You will find a good example of the structure here (check the examples).
As you can see there is no full page scrolling only scrolling inside the layout boxes. All layout areas have overflow:auto, which means they enable scrolling when the layout areas content is larger than the available area space.
The problem is, iOS devices like iPad/iPhone/iPod touch don't support scrolling inside HTML only for a full page.
Is there any generic way to make a digit.layout application compatible for iOS and other touch devices? For example extend the layout areas depending on the length of the content.
did you already find a solution to this problem? I played around with a combination of dojox.mobile.ScrollableView and dijit.layout but end up having two scrollbars.

Categories