Angular JS demo of a floating label. Based on floating label pattern by Matt D. Smith
Forked from Fedor Troitsky's Pen Floating label pattern — Angular JS.
A Pen by Scott Davis on CodePen.
Angular JS demo of a floating label. Based on floating label pattern by Matt D. Smith
Forked from Fedor Troitsky's Pen Floating label pattern — Angular JS.
A Pen by Scott Davis on CodePen.
<div ng-app='myApp' class="container"> | |
<magic-field> | |
<label ng-show="showLabel" class="show-hide">Better field </label> | |
<input type='text' placeholder="Better field" /> | |
</magic-field> | |
<magic-field> | |
<label ng-show="showLabel" class="show-hide">Better Text Area </label> | |
<textarea type='text' placeholder="Better Text Area"></textarea> | |
</magic-field> | |
</div> | |
<img src="https://dl.dropboxusercontent.com/u/177158/magic.gif"/> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script> |
var myApp = angular.module('myApp', ['ngAnimate']); | |
myApp.directive('magicField', function($compile) { | |
return { | |
scope: {}, | |
template: '<div class="field" ></div>', | |
transclude : true, | |
replace : true, | |
restrict : 'E', | |
controller: function($scope, $element) { | |
$scope.showLabel = false; | |
}, | |
link: function(scope, element, attrs, ctrl, transclude) { | |
transclude(scope, function(clone, scope) { | |
element.append(clone); | |
}); | |
var input = element.find('input')[0] || element.find('textarea')[0] || element.find('select')[0]; | |
input = angular.element(input); | |
input.on('keyup', function() { | |
if(input.val().length > 0) { | |
scope.showLabel = true; | |
} else { | |
scope.showLabel = false; | |
} | |
scope.$apply(); | |
}); | |
} | |
} | |
}); |
@import "compass/css3"; | |
$focus-border-color: #428bca; | |
.container { | |
padding-top: 4em; | |
} | |
.field { | |
.show-hide.ng-hide-add, .show-hide.ng-hide-remove { | |
-webkit-transition:all linear 0.2s; | |
-moz-transition:all linear 0.2s; | |
transition:all linear 0.2s; | |
display:block!important; | |
position: absolute; | |
} | |
.show-hide.ng-hide-add.ng-hide-add-active, | |
.show-hide.ng-hide-remove { | |
top: -8px; | |
display:block!important; | |
position: absolute; | |
opacity: 0; | |
} | |
.show-hide.ng-hide-add, | |
.show-hide.ng-hide-remove.ng-hide-remove-active { | |
top:-10px; | |
opacity: 1; | |
display:block!important; | |
position: absolute; | |
} | |
%input-area { | |
&:focus { | |
border-color : $focus-border-color; | |
} | |
border: 0; | |
padding: 7px 0.5em!important; | |
outline: none; | |
-webkit-box-shadow: none !important; | |
-moz-box-shadow: none !important; | |
box-shadow: none !important; | |
-webkit-border-radius: 0; | |
-moz-border-radius: 0; | |
border-radius: 0;; | |
border: 2px solid #555555; | |
min-width: 300px; | |
margin-top: 0px; | |
font-weight: bold; | |
font-size : 16px; | |
color : #555; | |
} | |
} | |
.field { | |
position: relative; | |
margin-bottom: 1em; | |
padding-bottom: 1em; | |
} | |
.field label { | |
position: absolute; | |
top: -10px; | |
left: 0.3em; | |
padding-left:.3em; | |
padding-right:.3em; | |
color: $focus-border-color; | |
font-size: 1em; | |
background-color : white; | |
font-weight : bold; | |
} | |
.field input[type=text], input[type=tel], input[type=search], input[type=email] { | |
@extend %input-area; | |
} | |
.field > textarea { | |
@extend %input-area; | |
} |