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

Bootstrap floating labels

+ +
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/floatlabels.js b/floatlabels.js index aefef50..04d569f 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/ }; function Plugin ( element, options ) { @@ -38,8 +39,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 +59,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' : 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 }); } @@ -94,8 +121,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,14 +132,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 f45e1df..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:"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:"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