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..02cd016 100644 --- a/floatlabels.js +++ b/floatlabels.js @@ -17,7 +17,10 @@ transitionDuration : 0.1, transitionEasing : 'ease-in-out', labelClass : '', - typeMatches : /text|password|email|number|search|url/ + backgroundColor : 'transparent', + typeMatches : /text|password|email|number|search|url|tel/, + focusColor : '#838780', + blurColor : '#2996cc' }; function Plugin ( element, options ) { this.$element = $(element); @@ -38,8 +41,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,27 +61,43 @@ 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' - }); + 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' : self.settings.blurColor, + '-moz-opacity' : '1', + '-khtml-opacity' : '1', + '-webkit-opacity' : '1', + 'opacity' : '1', + 'display' : 'block' + }); + } else { + this.$label.css({ + 'position' : 'absolute', + 'top' : settings.labelStartTop, + 'left' : '8px', //thisElement.css('padding-left'), + 'font-size' : '11px', + 'font-weight' : 'bold', + 'color' : self.settings.blurColor, + '-moz-opacity' : '0', + '-khtml-opacity' : '0', + '-webkit-opacity' : '0', + 'opacity' : '0', + 'display' : 'none' + }); + } if( !settings.slideInput ) { thisElement.css({ 'padding-top' : this.inputPaddingTop }); } 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 ); @@ -94,8 +116,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 +127,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..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:"",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($,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