jQuery Plugin For Auto Scalable Input & Select Elements - Fitput

Fitput is a jQuery plugin designed for responsive layout that automatically resize your input and select elements to adapt any screen size.

How to use it:

1. Include the jQuery fitput plugin after jQuery library at the end of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fitput.js"></script>

2. Create Html form elements.

<input type="text" class="input" value="Resize the window"/>

<select class="select">
<option>Resize the window</option>
<option>To see it in action</option>
</select>

3. Apply the plugin on the elements. The actual algorithm for scaling is (window width) / ( 12.5 * X) X being the parameter inputted.

<script type="text/javascript">
$(document).ready(function() {		
$('.input').fitPut(1);
$('.select').fitPut(2);		
});
</script>

4. Custom max/min font size.

var fpObj = {
min: 24, //Minimum Font Size (px)
max: 48 //Maximum Font Size (px)
}
$('input').fitPut(1,fpObj);

---

This awesome jQuery plugin is developed by Chris-Cates. For more Advanced Usages, please check the demo page or visit the official website.