npm.io
1.0.6 • Published 7 years ago

floatlabel

Licence
MIT
Version
1.0.6
Deps
0
Size
7 kB
Vulns
0
Weekly
0

JqueryFloatingLabel

It is a javascript user-friendly floating label

Demo

Here it is a Demo. please click here;

Usage

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FloatingLabel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
    <script src="floatinglabel.js"></script>
    	
</head>
<body>
     <div class="floatingName">
        <input type="text">
        <label>FirstName</label>
      </div>

</body>
</html>
Step: 1 EndUser to be add any ClassName to DivTag
<div class="floatingName">
        <input type="text">
        <label>FirstName</label>
 </div>
Step: 2 Add this jscode to the scriptTag
 <script type = "text/javascript" >
    $(document).ready(function() {
       $('.floatingName').floatingLabel();
     }); 
 </script>	
```	 
## Props
| Name          | optional        | Default |
| :------------ |:---------------:| -----:  |
| fontSize	    | yes             | inherit |
| id            | no              |         |
| label         | yes             |         |
| blur          | yes             |         |
| focus         | yes             |         |
| type          | yes             |         |
| div           | yes             |         |
| className     | yes             |         | 

## Using NPM
####  To install using the `npm` package manager run

####  `npm install floatlabel`

## License
MIT

Keywords