floater.js
Advanced tools
Readme
Yet another floating label implementation for web. Minimalistic styling, plain JavaScript.
Basically it just moves the placeholder text to somewhere else when the input is focused. Only for usability. See few examples and download preset stylesheets at http://projects.tarvainen.xyz/floater/.
The example above is achieved with the code below.
Just run npm install floater.js.
Include the floater.js or floater.min.js in your html file like the below. Add also few text inputs with placeholders and class floater set.
<html>
<head>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<form>
<input type="text" class="floater" floater-id="name" placeholder="Name">
<input type="text" class="floater" floater-id="phone" placeholder="Phone">
<input type="text" class="floater" floater-id="address" placeholder="Address">
</form>
</body>
<script src="path_to_your_floater/floater.min.js"></script>
<script src="script.js"></script>
</html>
In your script.js write the following.
var opts = {
class: 'floater',
attribute: 'label',
usePlaceholder: true
};
var floater = new Floater(opts).float();
If the usePlaceholder is set to false will the value be retrieved from the attribute specified in the opts's attirbute property.
<input type="text" label="This is the label" class="floater" placeholder="There is also the placeholder">
The floater.js is styled with the css and for complete styling you have only these few classnames to use. Specify the next in your style.css.
body {
font-family: sans-serif;
}
input {
width: 100%;
height: 30px;
border-radius: 5px;
outline: none;
border: 1px solid rgb(240, 240, 240);
padding: 5px;
}
.floater-container {
margin-top: 20px;
width: 200px;
position: relative;
}
.floater-label {
display: inline;
position: absolute;
font-size: 70%;
transition: 0.2s;
left: 5px;
pointer-events: none;
}
.floater-label.hidden {
animation: slideDown 0.4s;
transform: translate(0, 50%);
color: rgb(200, 200, 200);
}
.floater-label.visible {
animation: slideUp 0.4s;
transform: translate(0, -100%);
color: #F88071;
}
.floater::-webkit-input-placeholder {
opacity: 0 !important;
}
.floater::-moz-placeholder {
opacity: 0 !important;
}
.floater:-moz-placeholder {
opacity: 0 !important;
}
.floater:-ms-input-placeholder {
opacity: 0 !important;
}
Floater.js is also capable of sending message to the field which will be removed on keyup in the field.
For example in your HTML define a new button with a onclick event.
<button onclick="return doSomething()">Do something</button>
And add the following in to your script.js.
function doSomething () {
floater.message({
id: 'name', // the floater-id selector of the field
text: 'The field may not be empty',
duration: 3000,
type: 'bad' // this is a classname for the message
});
return false;
}
By defining the type property you may add a specific classname for your message so it can be styled in the css. Add the following in to your style.css.
.floater-message {
position: absolute;
display: inline;
opacity: 0;
right: 5px;
transition: 0.3s;
font-size: 70%;
color: #fff;
display: block;
padding: 2px;
z-index: -1;
}
.floater-message.hidden {
animation: slideDown 0.4s;
transform: translate(0, 50%);
opacity: 0;
}
.floater-message.visible {
animation: slideUp 0.4s;
transform: translate(0, -100%);
opacity: 1;
}
.floater-message.good {
background: #03C03C;
}
.floater-message.bad {
background: #C23B22;
}
button {
outline: none;
border: none;
background-color: rgb(100, 100, 100);
color: white;
border-radius: 5px;
}
FAQs
Yet another floating label implementation for web. Minimalistic styling, plain JavaScript.
The npm package floater.js receives a total of 0 weekly downloads. As such, floater.js popularity was classified as not popular.
We found that floater.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Researchers have demonstrated that teams of LLM agents can exploit zero-day vulnerabilities with a 53% success rate, and the costs of using AI to do so are rapidly becoming more affordable than hiring a human penetration tester.
Security News
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.
Security News
The White House is addressing fragmented cybersecurity regulations as CISOs report spending up to 50% of their time on compliance, aiming to harmonize requirements and improve cybersecurity outcomes.