Label your form input like a boss with beautiful animation and without taking up space
Add this line to your application's Gemfile:
gem 'label_better_rails'
And then execute:
$ bundle
Or install it yourself as:
$ gem install label_better_rails
label_better is a jquery_plug in that gives beautiful animation to your label , so please check if you are using the jquery on your rails app, and add jquery.label_better in your application.js
Your app/assets/javascripts/application.js appear like:
//= require jquery
//= require jquery_ujs
//= require jquery.label_better
//= require_tree .
Then in your view file where you want to add label_better just remove our default rails label then give a class name and the placeholder to the field example
<%= f.text_field :firstname ,:class => 'label_better', :placeholder => 'firstname'%><br/><br/>
<%= f.text_field :lastname ,:class => 'label_better', :placeholder => 'lastname'%><br/><br/>
<%= f.email_field :email,:class => 'label_better', :placeholder => 'email' %><br/><br/>
<%= f.phone_field :phonenumber,:class => 'label_better', :placeholder => 'Mobile' %><br/><br/>
<%= f.url_field :website ,:class => 'label_better', :placeholder => 'Website'%><br/><br/>
<%= f.password_field :password ,:class => 'label_better', :placeholder => 'confirmpassword'%><br/><br/>
<%= f.password_field :confirmpassword , :class => 'label_better', :placeholder => 'confirmpassword' %>
then add javascript in your view file
$("input.label_better").label_better({
position: "top",
animationTime: 500,
easing: "ease-in-out",
offset: 5,
hidePlaceholderOnFocus: true
});
Change this values depends on your need
Thanks to http://www.thepetedesign.com/demos/label_better_demo.html
- Fork it ( https://github.com/[my-github-username]/label_better_rails/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request