Make a game like effects to input fields with jQuery plugin
If you ever wanted to add some effects to your form input fields to make it look like video games fields, you are in the right place . It’s really one of the most outstanding jQuery styling plugins that I ever stumbled upon. Today we will be viewing the FancyInput plugin and applying some of it’s great effects.
Using it is so simple and straightforward as follows:
Step 1 – Download the plugin from https://github.com/yairEO/fancyInput, extract it in the same folder that includes your HTML file. The extraction will create a folder called fancyInput-master.
Step 2 – Include the jQuery library and link the following two css files in the <head> tag.
<link rel="stylesheet" href="css/fancyInput.css"> <link rel="stylesheet" href="css/styles.css"> <script src='js/jquery-1.9.1.min.js'></script>
Step 3 – Create an input field wrapped in a div tag and assign a class to it.
<div style="margin: 10px 0px;"> <input type="text" class="fancy_effect1" value="effect 1"> </div>
Step 4 – Include this JS file before the end of the <body> tag.
<script src='js/fancyInput.js'></script>
Step 5 – Call the fancyInput() function with the desired effect number (from 0 to 4).
<script type="text/javascript">
$(document).ready(function(){
$('.fancy_effect1').fancyInput()[0];
});
</script>
For a full page example with all the 5 effects view the demo or download the files.
Note:
– The plugin effects can be also applied to text areas.
Cons:
– The plugin doesn’t support internet explorer browsers.
I hope you guyz like this simple plugin tutorial and please share this with your friends and write your reviews in comments.
Tutorial Categories:
Nice tut 🙂
Nice
Nice tut… but when we select the text of input field it’s not covered the full text of input.