https://github.com/firstandthird/floating-label

Javascript library to create floating labels for input fields
https://github.com/firstandthird/floating-label

Last synced: 3 days ago
JSON representation

Javascript library to create floating labels for input fields

• Host: GitHub
• URL: https://github.com/firstandthird/floating-label
• Owner: firstandthird
• License: mit
• Created: 2013-10-30T00:47:19.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2016-12-23T17:31:02.000Z (about 8 years ago)
• Last Synced: 2025-01-10T17:20:05.989Z (12 days ago)
• Language: JavaScript
• Size: 684 KB
• Stars: 2
• Watchers: 6
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#floating-label

Floating label plugin

##Installation

###Bower

`bower install floating-label`

###Manual Download

- [Development]()

- [Production]()

##Usage

Basic usage:

```javascript

// No Options

$('[placeholder]').floatingLabel();

// Options

$('[placeholder]').floatingLabel({

  animateDuration: 200

});

```

#### Options

```

inputEvents: 'propertychange keyup input paste'

labelStyles: {

  display: 'block',

  position: 'relative'

}

animateDuration: 100

animateEasing: function (x, t, b, c, d) {

  return -c * ((t=t/d-1)*t*t*t - 1) + b;

}

```

## API

#### Changing Placeholder

This will change both the palceholder and the label.

```javascript

$('#someInput').floatingLabel();

$('#someInput').floatingLabel('setPlaceholder', 'New Placeholder');

```

##Development

###Requirements

- node and npm

- bower `npm install -g bower`

- grunt `npm install -g grunt-cli`

###Setup

- `npm install`

- `bower install`

###Run

`grunt dev`

or for just running tests on file changes:

`grunt ci`

###Tests

`grunt mocha`