?
Solved

Seeking JavaScript library that makes form elements prettier, bigger, and more touch friendly on tablets

Posted on 2014-08-14
6
Medium Priority
?
323 Views
Last Modified: 2014-08-15
I'm seeking a JavaScript library (jQuery-based or otherwise) that makes form elements prettier, bigger, and more touch-friendly on tablet devices (ie: IPad/Safari & Android/Chrome, etc).

For example -- jQuery's "Uniform" plugin makes forms prettier and is realtively easy to implement -- but it doesn't make the form elements bigger or more touch friendly:

http://uniformjs.com/

Ideally, I'd like to find something that's as easy to implement as Uniform -- but that also makes the form elements bigger and more touch friendly.  Please advise.  

Thanks!
- Yvan
0
Comment
Question by:egoselfaxis
  • 2
  • 2
  • 2
6 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 1000 total points
ID: 40261186
If you are using jQuery mobile look at ThemeRoller
http://themeroller.jquerymobile.com/
0
 
LVL 14

Expert Comment

by:quizwedge
ID: 40261418
The two popular ones you may want to check out are jQuery UI using ThemeRoller (http://jqueryui.com/themeroller/) as suggested above or Bootstrap (http://getbootstrap.com/)
0
 

Author Comment

by:egoselfaxis
ID: 40261432
Thanks for your reply.  Unfortunately, I'm not using jQuery mobile, and already have lot of time invested in what I've produced so far (a PHP-based survey).  

I really love the way jQuery mobile handles checkboxes and radio buttons, though.  Is it possible for me to use theme roller (or something like it) to produce a similar effect -- without having to use jQuery mobile?  

- Yvan
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 58

Expert Comment

by:Gary
ID: 40261442
Then it is really down to you, in conjunction with Uniform, to write some media queries that increase the font, input etc sizes on mobile devices.
There's nothing you can just plugin to custom code to do it.
0
 
LVL 14

Assisted Solution

by:quizwedge
quizwedge earned 1000 total points
ID: 40261560
Since you've already got your elements created, I can think of a couple of options:

1. If you want all, for example, checkboxes to look a certain way, create CSS for those checkboxes.

2. Create a Uniform theme to style checkboxes.

3. See if you can find a jQuery plugin that creates checkboxes the way you want them. Instead of having to build in all of jQuery mobile, you can just implement the plugin for the checkboxes. Depending on how your project is structured, this may or may not be a lot of work.

4. It may not be that hard to implement jQuery mobile or bootstrap in a minimal fashion by just adding the right classes. Using search and replace on your code could help speed things up.
0
 

Author Comment

by:egoselfaxis
ID: 40263710
Thank you all for your replies.  I've successfully transplanted the JS and CSS for jQuery mobile into my web application, and I believe that it will do the trick.  

Thanks!
- Yvan
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question