From 84c4534622e96c34acbf2705983982bf6b72e592 Mon Sep 17 00:00:00 2001 From: Cristian Duicu Date: Thu, 29 May 2014 16:04:45 -0400 Subject: [PATCH 1/7] Add support textarea and select elements Updated styles for a more compact display and added support for textarea and select elements --- bootstrapForm.html | 48 +++++++++++++++++++++++++++++++++ floatlabels.js | 66 +++++++++++++++++++++++++++++++++------------- 2 files changed, 95 insertions(+), 19 deletions(-) create mode 100644 bootstrapForm.html diff --git a/bootstrapForm.html b/bootstrapForm.html new file mode 100644 index 0000000..7304631 --- /dev/null +++ b/bootstrapForm.html @@ -0,0 +1,48 @@ + + + + + + + + + + + Floating labels + + + +
+

Bootstrap floating labels

+ +
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/floatlabels.js b/floatlabels.js index aefef50..987965b 100644 --- a/floatlabels.js +++ b/floatlabels.js @@ -13,7 +13,7 @@ slideInput : true, labelStartTop : '0px', labelEndTop : '0px', - paddingOffset : '12px', + paddingOffset : '3px', transitionDuration : 0.1, transitionEasing : 'ease-in-out', labelClass : '', @@ -38,8 +38,11 @@ '-ms-transition' : 'all ' + transDuration + 's ' + transEasing, 'transition' : 'all ' + transDuration + 's ' + transEasing }; - if( thisElement.prop('tagName').toUpperCase() !== 'INPUT' ) { return; } - if( !settings.typeMatches.test( thisElement.attr('type') ) ) { 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'); if( !elementID ) { elementID = Math.floor( Math.random() * 100 ) + 1; @@ -55,19 +58,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' : '#838780' - }); + //this.$label.css({ 'top' : settings.labelStartTop }); + 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' : 'white', + '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' : 'white', + '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 }); } @@ -94,8 +120,10 @@ 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() { @@ -103,7 +131,7 @@ 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', From fdd8684825f7c3e732b0e334fcd16849db3601aa Mon Sep 17 00:00:00 2001 From: Cristian Duicu Date: Thu, 29 May 2014 16:09:34 -0400 Subject: [PATCH 2/7] Add support for textarea and select elements --- floatlabels.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/floatlabels.min.js b/floatlabels.min.js index f45e1df..ea4d905 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/};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(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:"3px",transitionDuration:.1,transitionEasing:"ease-in-out",labelClass:"",typeMatches:/text|password|email|number|search|url/};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"&&s.prop("tagName").toUpperCase()!=="TEXTAREA"&&s.prop("tagName").toUpperCase()!=="SELECT"){return}if(s.prop("tagName").toUpperCase()=="INPUT"&&!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");if(s.prop("tagName").toUpperCase()=="SELECT"){this.$label.css({position:"absolute",top:n.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":"white","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:n.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":"white","padding-left":"5px","padding-right":"5px",display:"none","-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"})}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.prop("tagName").toUpperCase()!=="SELECT"){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.labelStartTop,"-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) \ No newline at end of file From 1a2693d93f3eb2f8da89b0b4f64b7d505e23f896 Mon Sep 17 00:00:00 2001 From: Cristian Duicu Date: Thu, 29 May 2014 16:56:09 -0400 Subject: [PATCH 3/7] adjusted paddingTop for selectbox --- bootstrapForm.html | 5 +++-- floatlabels.js | 13 +++++++++---- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/bootstrapForm.html b/bootstrapForm.html index 7304631..294e69c 100644 --- a/bootstrapForm.html +++ b/bootstrapForm.html @@ -27,7 +27,7 @@

Bootstrap floating labels

@@ -43,6 +43,7 @@

Bootstrap floating labels

\ No newline at end of file diff --git a/floatlabels.js b/floatlabels.js index 987965b..04d569f 100644 --- a/floatlabels.js +++ b/floatlabels.js @@ -13,10 +13,11 @@ slideInput : true, labelStartTop : '0px', labelEndTop : '0px', - paddingOffset : '3px', + paddingOffset : '12px', transitionDuration : 0.1, transitionEasing : 'ease-in-out', labelClass : '', + backgroundColor : 'transparent', typeMatches : /text|password|email|number|search|url/ }; function Plugin ( element, options ) { @@ -67,7 +68,7 @@ 'font-size' : '11px', 'font-weight' : 'bold', 'color' : '#838780', - 'background-color' : 'white', + 'background-color' : settings.backgroundColor, 'padding-left' : '5px', 'padding-right' : '5px', 'display' : 'block', @@ -84,7 +85,7 @@ 'font-size' : '11px', 'font-weight' : 'bold', 'color' : '#838780', - 'background-color' : 'white', + 'background-color' : settings.backgroundColor, 'padding-left' : '5px', 'padding-right' : '5px', 'display' : 'none', @@ -138,7 +139,11 @@ '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); From 1f4e01f09b9510534b88bf4a0247fede14f9de66 Mon Sep 17 00:00:00 2001 From: Cristian Duicu Date: Thu, 29 May 2014 17:00:21 -0400 Subject: [PATCH 4/7] updated the minified js file --- floatlabels.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/floatlabels.min.js b/floatlabels.min.js index ea4d905..f04c1f6 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:"3px",transitionDuration:.1,transitionEasing:"ease-in-out",labelClass:"",typeMatches:/text|password|email|number|search|url/};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"&&s.prop("tagName").toUpperCase()!=="TEXTAREA"&&s.prop("tagName").toUpperCase()!=="SELECT"){return}if(s.prop("tagName").toUpperCase()=="INPUT"&&!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");if(s.prop("tagName").toUpperCase()=="SELECT"){this.$label.css({position:"absolute",top:n.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":"white","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:n.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":"white","padding-left":"5px","padding-right":"5px",display:"none","-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"})}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.prop("tagName").toUpperCase()!=="SELECT"){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.labelStartTop,"-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) \ No newline at end of file +(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:"",backgroundColor:"transparent",typeMatches:/text|password|email|number|search|url/};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"&&s.prop("tagName").toUpperCase()!=="TEXTAREA"&&s.prop("tagName").toUpperCase()!=="SELECT"){return}if(s.prop("tagName").toUpperCase()=="INPUT"&&!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");if(s.prop("tagName").toUpperCase()=="SELECT"){this.$label.css({position:"absolute",top:n.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":n.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:n.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":n.backgroundColor,"padding-left":"5px","padding-right":"5px",display:"none","-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"})}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.prop("tagName").toUpperCase()!=="SELECT"){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.labelStartTop,"-moz-opacity":"1","-khtml-opacity":"1","-webkit-opacity":"1",opacity:"1"});if(e.settings.slideInput){if(e.$element.prop("tagName").toUpperCase()!=="SELECT"){e.$element.css({"padding-top":e.inputPaddingTop})}else{e.$element.css({"padding-top":e.inputPaddingTop-parseFloat(e.settings.labelStartTop)-6})}}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) \ No newline at end of file From 24a7990a4d50878a181517b294e6a64862e47a45 Mon Sep 17 00:00:00 2001 From: bjoern Date: Wed, 15 Oct 2014 06:07:25 +0200 Subject: [PATCH 5/7] Added option to set focus and blur colors of labels via settings --- floatlabels.js | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/floatlabels.js b/floatlabels.js index 04d569f..1a3dd77 100644 --- a/floatlabels.js +++ b/floatlabels.js @@ -18,7 +18,9 @@ transitionEasing : 'ease-in-out', labelClass : '', backgroundColor : 'transparent', - typeMatches : /text|password|email|number|search|url/ + typeMatches : /text|password|email|number|search|url|tel/, + focusColor : '#838780', + blurColor : '#2996cc' }; function Plugin ( element, options ) { this.$element = $(element); @@ -59,7 +61,6 @@ thisElement.wrap('
'); thisElement.before(''); this.$label = thisElement.prev('label'); - //this.$label.css({ 'top' : settings.labelStartTop }); if (thisElement.prop('tagName').toUpperCase() == 'SELECT') { this.$label.css({ 'position' : 'absolute', @@ -67,15 +68,12 @@ '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', + 'color' : self.settings.blurColor, '-moz-opacity' : '1', '-khtml-opacity' : '1', '-webkit-opacity' : '1', - 'opacity' : '1' + 'opacity' : '1', + 'display' : 'block' }); } else { this.$label.css({ @@ -84,15 +82,12 @@ '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', + 'color' : self.settings.blurColor, '-moz-opacity' : '0', '-khtml-opacity' : '0', '-webkit-opacity' : '0', 'opacity' : '0', + 'display' : 'none', }); } if( !settings.slideInput ) { @@ -101,8 +96,8 @@ thisElement.on('keyup blur change', function( e ) { self.checkValue( e ); }); - thisElement.on('blur', function() { thisElement.prev('label').css({ 'color' : '#838780' }); }); - thisElement.on('focus', function() { thisElement.prev('label').css({ 'color' : '#2996cc' }); }); + thisElement.on('blur', function() { thisElement.prev('label').css({ 'color' : self.settings.blurColor }); }); + thisElement.on('focus', function() { thisElement.prev('label').css({ 'color' : self.settings.focusColor }); }); window.setTimeout( function() { self.$label.css( animationCss ); self.$element.css( animationCss ); From fd3eaf8c0553f9977737837cebc9a0bed388446b Mon Sep 17 00:00:00 2001 From: Iaroslav Mamalat Date: Sat, 16 May 2015 13:05:00 +0200 Subject: [PATCH 6/7] updated the minified js file --- floatlabels.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/floatlabels.min.js b/floatlabels.min.js index f04c1f6..c59e8a5 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:"",backgroundColor:"transparent",typeMatches:/text|password|email|number|search|url/};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"&&s.prop("tagName").toUpperCase()!=="TEXTAREA"&&s.prop("tagName").toUpperCase()!=="SELECT"){return}if(s.prop("tagName").toUpperCase()=="INPUT"&&!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");if(s.prop("tagName").toUpperCase()=="SELECT"){this.$label.css({position:"absolute",top:n.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":n.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:n.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:"#838780","background-color":n.backgroundColor,"padding-left":"5px","padding-right":"5px",display:"none","-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"})}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.prop("tagName").toUpperCase()!=="SELECT"){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.labelStartTop,"-moz-opacity":"1","-khtml-opacity":"1","-webkit-opacity":"1",opacity:"1"});if(e.settings.slideInput){if(e.$element.prop("tagName").toUpperCase()!=="SELECT"){e.$element.css({"padding-top":e.inputPaddingTop})}else{e.$element.css({"padding-top":e.inputPaddingTop-parseFloat(e.settings.labelStartTop)-6})}}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) \ No newline at end of file +!function($,t,a,e){function o(t,a){this.$element=$(t),this.settings=$.extend({},l,a),this.init()}var i="floatlabel",l={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"};o.prototype={init:function(){var a=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"),this.$label.css("SELECT"==l.prop("tagName").toUpperCase()?{position:"absolute",top:e.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:a.settings.blurColor,"-moz-opacity":"1","-khtml-opacity":"1","-webkit-opacity":"1",opacity:"1",display:"block"}:{position:"absolute",top:e.labelStartTop,left:"8px","font-size":"11px","font-weight":"bold",color:a.settings.blurColor,"-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0",display:"none"}),e.slideInput||l.css({"padding-top":this.inputPaddingTop}),l.on("keyup blur change",function(t){a.checkValue(t)}),l.on("blur",function(){l.prev("label").css({color:a.settings.blurColor})}),l.on("focus",function(){l.prev("label").css({color:a.settings.focusColor})}),t.setTimeout(function(){a.$label.css(s),a.$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 a=this;a.$label.css({display:"block"}),t.setTimeout(function(){a.$label.css({top:a.settings.labelStartTop,"-moz-opacity":"1","-khtml-opacity":"1","-webkit-opacity":"1",opacity:"1"}),a.settings.slideInput&&a.$element.css("SELECT"!==a.$element.prop("tagName").toUpperCase()?{"padding-top":a.inputPaddingTop}:{"padding-top":a.inputPaddingTop-parseFloat(a.settings.labelStartTop)-6}),a.$element.addClass("active-floatlabel")},50)},hideLabel:function(){var a=this;a.$label.css({top:a.settings.labelStartTop,"-moz-opacity":"0","-khtml-opacity":"0","-webkit-opacity":"0",opacity:"0"}),a.settings.slideInput&&a.$element.css({"padding-top":parseFloat(a.inputPaddingTop)-parseFloat(this.settings.paddingOffset)}),a.$element.removeClass("active-floatlabel"),t.setTimeout(function(){a.$label.css({display:"none"})},1e3*a.settings.transitionDuration)}},$.fn[i]=function(t){return this.each(function(){$.data(this,"plugin_"+i)||$.data(this,"plugin_"+i,new o(this,t))})}}(jQuery,window,document); \ No newline at end of file From a3b4279ee9928f66efcf319510f1f3306b95344d Mon Sep 17 00:00:00 2001 From: Iaroslav Mamalat Date: Sat, 16 May 2015 13:09:33 +0200 Subject: [PATCH 7/7] removed extra comma --- floatlabels.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/floatlabels.js b/floatlabels.js index 1a3dd77..02cd016 100644 --- a/floatlabels.js +++ b/floatlabels.js @@ -87,7 +87,7 @@ '-khtml-opacity' : '0', '-webkit-opacity' : '0', 'opacity' : '0', - 'display' : 'none', + 'display' : 'none' }); } if( !settings.slideInput ) {