User-friendly Floating Form Label Plugin - jQuery Fluid Labels

Fluid Labels is a jQuery plugin used for creating mobile-friendly floating html labels that allow the user to keep track of the current input field or textarea.

See also:

• jQuery Plugin For Floating Placeholder Label Text - JVFloat.js
• jQuery Plugin For Floating Input Label - floatingFormLabel
• jQuery Floating Placeholder Text Plugin - Placeholder Label
• jQuery Plugin For Cool Animated Input Labels
• jQuery Animated Input Field Label Plugin - Label Better
• Simple jQuery Plugin For Inplace Input Labels - LabelinPlace
• jQuery Plugin For Text Field Float Label - floatlabels.js
• jQuery Plugin To Create Floating Labels For Inputs - FlowupLabels.js

How to use it:

1. Add references to jQuery library and the jQuery fluid labels plugin.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="dist/fluid-labels.js"></script>

2. Add your text field and custom label text into a DIV container named 'fluid-label'.

<div class="fluid-label">
  <input type="text" placeholder="Your Name">
  <label>Your Name</label>
</div>

3. The plugin also has the ability to automatically convert placeholders into form labels.

<div class="fluid-label">
  <input type="text" placeholder="Something Else">
</div>

<div class="fluid-label">
  <textarea placeholder="My textarea example"></textarea>
</div>

4. Initialize the plugin.

$('.fluid-label').fluidLabel();

5. The default CSS styles for the floating form labels.

.fluid-label {
  position: relative;
  padding: 15px;
  border-radius: 2px;
  display: inline-block;
}

.fluid-label input, .fluid-label textarea {
  border: none;
  outline: none;
  position: relative;
}

.fluid-label label {
  position: absolute;
  top: 5px;
}

6. Set the top offset for the input field.

$('.fluid-label').fluidLabel({
  inputOffsetTop: 5
});

7. Override the default animation speed.

$('.fluid-label').fluidLabel({
  inputOffsetTop: 5,
  animationDuration: 200,
});

8. Add a custom CSS class to your text field when getting focused.

$('.fluid-label').fluidLabel({
  inputOffsetTop: 5,
  animationDuration: 200,
  focusClass: 'focused'
});

---

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