Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Javascript Jelly Input field
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header>
<p>Inspired by ANDREJ RADISIC Material Up "Jelly Input field"</p>
<a href="https://dribbble.com/aradisic">
Andrej Radisic</a>
</header><!--header-->
<div class="centered">
<div class="content">
<!--grid example-->
<div class="sml-10">
<!--grid example-->
<div class="field text-field">
<label class="">username</label>
<div class="input">
<input type="text" name="" placeholder="" value="">
</div>
<!--grid-->
</div>
<!--grid-->
</div><!--field-->
</div><!--content-->
</div>

Javascript Jelly Input field

Material Design Jelly Input Implemented with JQuery and D3. Not meant for multiple fields but could easily be extended into a plugin.

A Pen by Mark Campbell on CodePen.

License.

var lineData = [
{ "x": 1, "y": 5},
{ "x": 100, "y": 5},
{ "x": 200, "y": 5}
];
var lineData2 = [
{ "x": 1, "y": 5},
{ "x": 100, "y": 10},
{ "x": 200, "y": 5}
];
var lineData3 = [
{ "x": 1, "y": 5},
{ "x": 100, "y": 0},
{ "x": 200, "y": 5}
];
var lineData4 = [
{ "x": 1, "y": 7},
{ "x": 100, "y": 8},
{ "x": 200, "y": 7}
];
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("monotone");
var svgContainer =d3.select("div.text-field").append("svg")
.attr("class", 'border');
var lineGraph = svgContainer.append("path")
.attr("d", lineFunction(lineData))
.attr("class", 'line')
.attr("stroke-width", 1)
.attr("fill", "none");
$("input[type='text']").hover(function(){
console.log($(this).parent().siblings('label'));
d3.select(".line").transition()
.duration(150).ease('sin')
.attr("d", lineFunction(lineData2)).transition()
.duration(150).ease('sin')
.attr("d", lineFunction(lineData3)).transition()
.duration(150).ease('sin')
.attr("d", lineFunction(lineData));
},
function(){
if( !$(this).val() ) {
$(this).parent().siblings('label').removeClass('active');
}else{
$(this).parent().siblings('label').addClass('active');
}
d3.select(".line").transition()
.duration(150).ease('sin')
.attr("d", lineFunction(lineData4)).transition()
.duration(150).ease('sin')
.attr("d", lineFunction(lineData));
});
$("input[type='text']").focusin(function(){
$(this).parent().siblings('label').addClass('focus');
});
$("input[type='text']").focusout(function(){
$(this).parent().siblings('label').removeClass('focus');
if( !$(this).val() ) {
$(this).parent().siblings('label').removeClass('active');
}else{
$(this).parent().siblings('label').addClass('active');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
body{
font-family: 'Roboto', sans-serif;
background:#fff;
overflow: hidden;
}
.field + .field{margin-top:20px;}
.field:hover{
label,label.active{
top: -10px;
font-size: 50%;
color:#dadada;
}
.line{
stroke:#7fbd38;
}
}
.field{
width:100%;
display:block;
position:relative;
label.active{
font-size: 50%;
color:#dadada;
top:25px;
}
label.focus{
font-size: 50%;
top: -10px;
color:#dadada;
}
label{
position:absolute;
font-size: 11px;
z-index:2;
left:0px;
top:5px;
color:#797979;
.transition(all 150ms ease-in-out);
}
.input{
position:relative;
}
input{
height:20px;
width:255px;
border:none;
outline: none;
color:#797979;
}
.line{
.transition(all 150ms ease-in-out);
stroke:#dadada;
}
}
//ANIMATION
header{
text-align:center;
color:white;
display:block;
position:absolute;
top:0px;right:0px;left:0px;
height:90px;
padding:10px;
background:#2f2f2f;
margin-bottom:10px;
div{text-align:center;}
a{color:white;}
a span{margin-left:5px;margin-right:5px;}
}
.centered{
position:absolute;
margin-top:90px;
height:100%;width:100%;
top:0px;bottom:0px;left:0px;right:0px;
}
.sml-10{
width:220px;
}
.text-field{margin-bottom:30px;}
//SET UP
.content{
position:absolute;
margin:auto;
height:50px;
width:260px;
top:50px;left:0px;right:0px;
}
.border{
position:absolute;
bottom:-15px;
display:block;
width:100%;
height:20px;
}
//MIXINS
.transition (@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
}
.border-radius(@string){
border-radius:~'@{string}';
-moz-border-radius: ~'@{string}';
-webkit-border-radius:~'@{string}';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.