diff --git a/bootstrapForm.html b/bootstrapForm.html new file mode 100644 index 0000000..8a13b30 --- /dev/null +++ b/bootstrapForm.html @@ -0,0 +1,49 @@ + + + + + + + + + + + Floating labels + + + +
+

Bootstrap floating labels

+ +
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ + + + diff --git a/floatlabels.js b/floatlabels.js index 4ab6dd2..14af012 100644 --- a/floatlabels.js +++ b/floatlabels.js @@ -17,6 +17,7 @@ transitionDuration : 0.1, transitionEasing : 'ease-in-out', labelClass : '', + backgroundColor : 'transparent', typeMatches : /text|password|email|number|search|url|tel/, focusColor : '#838780', blurColor : '#2996cc' @@ -32,7 +33,7 @@ settings = this.settings, transDuration = settings.transitionDuration, transEasing = settings.transitionEasing, - thisElement = this.$element; + thisElement = this.$element; var animationCss = { '-webkit-transition' : 'all ' + transDuration + 's ' + transEasing, '-moz-transition' : 'all ' + transDuration + 's ' + transEasing, @@ -40,8 +41,9 @@ '-ms-transition' : 'all ' + transDuration + 's ' + transEasing, 'transition' : 'all ' + transDuration + 's ' + transEasing }; - if( thisElement.prop('tagName').toUpperCase() != 'INPUT' && - thisElement.prop('tagName').toUpperCase() != 'TEXTAREA') { return; } + if( thisElement.prop('tagName').toUpperCase() !== 'INPUT' && + thisElement.prop('tagName').toUpperCase() !== 'TEXTAREA' && + thisElement.prop('tagName').toUpperCase() !== 'SELECT') { return; } if( thisElement.prop('tagName').toUpperCase() === 'INPUT' && !settings.typeMatches.test( thisElement.attr('type') ) ) { return; } var elementID = thisElement.attr('id'); @@ -59,20 +61,42 @@ thisElement.wrap('
'); thisElement.before(''); this.$label = thisElement.prev('label'); - this.$label.css({ - 'position' : 'absolute', - 'top' : settings.labelStartTop, - 'left' : '8px', //thisElement.css('padding-left'), - 'display' : 'none', - '-moz-opacity' : '0', - '-khtml-opacity' : '0', - '-webkit-opacity' : '0', - 'opacity' : '0', - 'font-size' : '11px', - 'font-weight' : 'bold', - 'color' : self.settings.blurColor - }); - if( !settings.slideInput ) { + if (thisElement.prop('tagName').toUpperCase() == 'SELECT') { + this.$label.css({ + 'position' : 'absolute', + 'top' : settings.labelStartTop, + 'left' : '8px', //thisElement.css('padding-left'), + 'font-size' : '11px', + 'font-weight' : 'bold', + 'color' : '#838780', + 'background-color' : settings.backgroundColor, + 'padding-left' : '5px', + 'padding-right' : '5px', + 'display' : 'block', + '-moz-opacity' : '1', + '-khtml-opacity' : '1', + '-webkit-opacity' : '1', + 'opacity' : '1' + }); + } else { + this.$label.css({ + 'position' : 'absolute', + 'top' : settings.labelStartTop, + 'left' : '8px', //thisElement.css('padding-left'), + 'font-size' : '11px', + 'font-weight' : 'bold', + 'color' : '#838780', + 'background-color' : settings.backgroundColor, + 'padding-left' : '5px', + 'padding-right' : '5px', + 'display' : 'none', + '-moz-opacity' : '0', + '-khtml-opacity' : '0', + '-webkit-opacity' : '0', + 'opacity' : '0' + }); + } + if( !settings.slideInput ) { thisElement.css({ 'padding-top' : this.inputPaddingTop }); } thisElement.on('keyup blur change', function( e ) { @@ -89,17 +113,19 @@ checkValue: function( e ) { if( e ) { var keyCode = e.keyCode || e.which; - if( keyCode === 9 ) { return; } + if( keyCode === 9 ) { return; } } - var thisElement = this.$element, + var thisElement = this.$element, currentFlout = thisElement.data('flout'); if( thisElement.val() !== "" ) { thisElement.data('flout', '1'); } if( thisElement.val() === "" ) { thisElement.data('flout', '0'); } if( thisElement.data('flout') === '1' && currentFlout !== '1' ) { this.showLabel(); } - if( thisElement.data('flout') === '0' && currentFlout !== '0' ) { - this.hideLabel(); + if (thisElement.prop('tagName').toUpperCase() !== 'SELECT') { + if( thisElement.data('flout') === '0' && currentFlout !== '0' ) { + this.hideLabel(); + } } }, showLabel: function() { @@ -107,14 +133,18 @@ self.$label.css({ 'display' : 'block' }); window.setTimeout(function() { self.$label.css({ - 'top' : self.settings.labelEndTop, + 'top' : self.settings.labelStartTop, '-moz-opacity' : '1', '-khtml-opacity' : '1', '-webkit-opacity' : '1', 'opacity' : '1' }); if( self.settings.slideInput ) { - self.$element.css({ 'padding-top' : self.inputPaddingTop }); + if (self.$element.prop('tagName').toUpperCase() !== 'SELECT') { + self.$element.css({ 'padding-top' : self.inputPaddingTop }); + } else { + self.$element.css({ 'padding-top' : self.inputPaddingTop - parseFloat(self.settings.labelStartTop) - 6 }); + } } self.$element.addClass('active-floatlabel'); }, 50); diff --git a/floatlabels.min.js b/floatlabels.min.js index 7621813..aea8b6d 100644 --- a/floatlabels.min.js +++ b/floatlabels.min.js @@ -1 +1 @@ -(function(e,t,n,r){function o(t,n){this.$element=e(t);this.settings=e.extend({},s,n);this.init()}var i="floatlabel",s={slideInput:true,labelStartTop:"0px",labelEndTop:"0px",paddingOffset:"12px",transitionDuration:.1,transitionEasing:"ease-in-out",labelClass:"",typeMatches:/text|password|email|number|search|url|tel/};o.prototype={init:function(){var e=this,n=this.settings,r=n.transitionDuration,i=n.transitionEasing,s=this.$element;var o={"-webkit-transition":"all "+r+"s "+i,"-moz-transition":"all "+r+"s "+i,"-o-transition":"all "+r+"s "+i,"-ms-transition":"all "+r+"s "+i,transition:"all "+r+"s "+i};if(s.prop("tagName").toUpperCase()!=="INPUT"){return}if(!n.typeMatches.test(s.attr("type"))){return}var u=s.attr("id");if(!u){u=Math.floor(Math.random()*100)+1;s.attr("id",u)}var a=s.attr("placeholder");var f=s.data("label");var l=s.data("class");if(!l){l=""}if(!a||a===""){a="You forgot to add placeholder attribute!"}if(!f||f===""){f=a}this.inputPaddingTop=parseFloat(s.css("padding-top"))+parseFloat(n.paddingOffset);s.wrap('
');s.before('");this.$label=s.prev("label");this.$label.css({position:"absolute",top:n.labelStartTop,left:"8px",display:"none","-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0","font-size":"11px","font-weight":"bold",color:"#838780"});if(!n.slideInput){s.css({"padding-top":this.inputPaddingTop})}s.on("keyup blur change",function(t){e.checkValue(t)});s.on("blur",function(){s.prev("label").css({color:"#838780"})});s.on("focus",function(){s.prev("label").css({color:"#2996cc"})});t.setTimeout(function(){e.$label.css(o);e.$element.css(o)},100);this.checkValue()},checkValue:function(e){if(e){var t=e.keyCode||e.which;if(t===9){return}}var n=this.$element,r=n.data("flout");if(n.val()!==""){n.data("flout","1")}if(n.val()===""){n.data("flout","0")}if(n.data("flout")==="1"&&r!=="1"){this.showLabel()}if(n.data("flout")==="0"&&r!=="0"){this.hideLabel()}},showLabel:function(){var e=this;e.$label.css({display:"block"});t.setTimeout(function(){e.$label.css({top:e.settings.labelEndTop,"-moz-opacity":"1","-khtml-opacity":"1","-webkit-opacity":"1",opacity:"1"});if(e.settings.slideInput){e.$element.css({"padding-top":e.inputPaddingTop})}e.$element.addClass("active-floatlabel")},50)},hideLabel:function(){var e=this;e.$label.css({top:e.settings.labelStartTop,"-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"});if(e.settings.slideInput){e.$element.css({"padding-top":parseFloat(e.inputPaddingTop)-parseFloat(this.settings.paddingOffset)})}e.$element.removeClass("active-floatlabel");t.setTimeout(function(){e.$label.css({display:"none"})},e.settings.transitionDuration*1e3)}};e.fn[i]=function(t){return this.each(function(){if(!e.data(this,"plugin_"+i)){e.data(this,"plugin_"+i,new o(this,t))}})}})(jQuery,window,document) +!function(t,a,e,o){function i(a,e){this.$element=t(a),this.settings=t.extend({},s,e),this.init()}var l="floatlabel",s={slideInput:!0,labelStartTop:"0px",labelEndTop:"0px",paddingOffset:"12px",transitionDuration:.1,transitionEasing:"ease-in-out",labelClass:"",backgroundColor:"transparent",typeMatches:/text|password|email|number|search|url|tel/,focusColor:"#838780",blurColor:"#2996cc"};i.prototype={init:function(){var t=this,e=this.settings,o=e.transitionDuration,i=e.transitionEasing,l=this.$element,s={"-webkit-transition":"all "+o+"s "+i,"-moz-transition":"all "+o+"s "+i,"-o-transition":"all "+o+"s "+i,"-ms-transition":"all "+o+"s "+i,transition:"all "+o+"s "+i};if(("INPUT"===l.prop("tagName").toUpperCase()||"TEXTAREA"===l.prop("tagName").toUpperCase()||"SELECT"===l.prop("tagName").toUpperCase())&&("INPUT"!==l.prop("tagName").toUpperCase()||e.typeMatches.test(l.attr("type")))){var n=l.attr("id");n||(n=Math.floor(100*Math.random())+1,l.attr("id",n));var p=l.attr("placeholder"),r=l.data("label"),c=l.data("class");c||(c=""),p&&""!==p||(p="You forgot to add placeholder attribute!"),r&&""!==r||(r=p),this.inputPaddingTop=parseFloat(l.css("padding-top"))+parseFloat(e.paddingOffset),l.wrap('
'),l.before('"),this.$label=l.prev("label"),"SELECT"==l.prop("tagName").toUpperCase()?this.$label.css({position:"absolute",top:e.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":e.backgroundColor,"padding-left":"5px","padding-right":"5px",display:"block","-moz-opacity":"1","-khtml-opacity":"1","-webkit-opacity":"1",opacity:"1"}):this.$label.css({position:"absolute",top:e.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":e.backgroundColor,"padding-left":"5px","padding-right":"5px",display:"none","-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"}),e.slideInput||l.css({"padding-top":this.inputPaddingTop}),l.on("keyup blur change",function(a){t.checkValue(a)}),l.on("blur",function(){l.prev("label").css({color:t.settings.blurColor})}),l.on("focus",function(){l.prev("label").css({color:t.settings.focusColor})}),a.setTimeout(function(){t.$label.css(s),t.$element.css(s)},100),this.checkValue()}},checkValue:function(t){if(t){var a=t.keyCode||t.which;if(9===a)return}var e=this.$element,o=e.data("flout");""!==e.val()&&e.data("flout","1"),""===e.val()&&e.data("flout","0"),"1"===e.data("flout")&&"1"!==o&&this.showLabel(),"SELECT"!==e.prop("tagName").toUpperCase()&&"0"===e.data("flout")&&"0"!==o&&this.hideLabel()},showLabel:function(){var t=this;t.$label.css({display:"block"}),a.setTimeout(function(){t.$label.css({top:t.settings.labelStartTop,"-moz-opacity":"1","-khtml-opacity":"1","-webkit-opacity":"1",opacity:"1"}),t.settings.slideInput&&("SELECT"!==t.$element.prop("tagName").toUpperCase()?t.$element.css({"padding-top":t.inputPaddingTop}):t.$element.css({"padding-top":t.inputPaddingTop-parseFloat(t.settings.labelStartTop)-6})),t.$element.addClass("active-floatlabel")},50)},hideLabel:function(){var t=this;t.$label.css({top:t.settings.labelStartTop,"-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"}),t.settings.slideInput&&t.$element.css({"padding-top":parseFloat(t.inputPaddingTop)-parseFloat(this.settings.paddingOffset)}),t.$element.removeClass("active-floatlabel"),a.setTimeout(function(){t.$label.css({display:"none"})},1e3*t.settings.transitionDuration)}},t.fn[l]=function(a){return this.each(function(){t.data(this,"plugin_"+l)||t.data(this,"plugin_"+l,new i(this,a))})}}(jQuery,window,document);