├── jquery.labelinplace.min.css ├── jquery.labelinplace.css ├── labelinplace.jquery.json ├── LICENSE ├── README.md ├── jquery.labelinplace.min.js └── jquery.labelinplace.js /jquery.labelinplace.min.css: -------------------------------------------------------------------------------- 1 | .mygroup label{-webkit-transition:all 150ms ease-out;-moz-transition:all 150ms ease-out;-o-transition:all 150ms ease-out;-ms-transition:all 150ms ease-out;transition:all 150ms ease-out} 2 | .mylabel{color:#999} 3 | .mygroup{position:relative} 4 | .label-group label .myicon,.mypaceholder{color:#ddd; cursor:text} -------------------------------------------------------------------------------- /jquery.labelinplace.css: -------------------------------------------------------------------------------- 1 | 2 | .mygroup label { 3 | -webkit-transition: all 150ms ease-out; 4 | -moz-transition: all 150ms ease-out; 5 | -o-transition: all 150ms ease-out; 6 | -ms-transition: all 150ms ease-out; 7 | transition: all 150ms ease-out; 8 | } 9 | 10 | .label-group label .myicon { 11 | color: #ddd; 12 | } 13 | .mypaceholder { 14 | color: #ddd; 15 | cursor:text; 16 | } 17 | .mylabel { 18 | color: #999; 19 | } 20 | 21 | .mygroup { 22 | position: relative; 23 | } 24 | -------------------------------------------------------------------------------- /labelinplace.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "labelinplace", 3 | "title": "Label in Place", 4 | "description": "A simple fully customizable form enhancement plugin for in-field label support.", 5 | "keywords": [ 6 | "form", 7 | "forms", 8 | "label", 9 | "labels", 10 | "usability", 11 | "user experience", 12 | "ux", 13 | "bootstrap" 14 | ], 15 | "version": "1.0.9", 16 | "author": { 17 | "name": "Andrea Pace", 18 | "email" : "dev@andreapace.net", 19 | "url": "http://andreapace.net" 20 | }, 21 | "maintainers": [ 22 | { 23 | "name": "Andrea Pace", 24 | "email": "dev@andreapace.net" 25 | } 26 | ], 27 | "licenses": [ 28 | { 29 | "type": "MIT", 30 | "url": "http://opensource.org/licenses/MIT" 31 | } 32 | ], 33 | "homepage": "http://andreapace.co.uk/labelinplace", 34 | "demo": "http://andreapace.co.uk/labelinplace/examples.html", 35 | "issues": "https://github.com/andreapace/labelinplace/issues", 36 | "dependencies": { 37 | "jquery": ">=1.5" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Andrea Pace 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | LabelinPlace 2 | ============ 3 | 4 | A simple fully customizable form enhancement plugin for in-field label support. 5 | 6 | Visit the [project page](http://andreapace.co.uk/labelinplace/) for more information and usage examples! 7 | 8 | Install 9 | ============ 10 | Four simple steps to install and configure labelinplace plugin 11 | ### Step 1. Include jQuery 12 | 13 | Include the last version of jQuery 14 | ```bash 15 | 16 | ``` 17 | 18 | ### Step 2. Include jQuery Words Rotator Code 19 | 20 | Insert into your page's head tag: 21 | ```bash 22 | 23 | 24 | ``` 25 | ### Step 3. HTML code 26 | ```bash 27 | 28 | 29 | ``` 30 | ### Step 5. Javascript code 31 | ```bash 32 | 37 | 38 | ``` 39 | Configure 40 | ============ 41 | ```bash 42 | $("#myForm .mylabel").labelinplace({ 43 | labelPosition: "up", //position for the placeholder [up|down] 44 | classPlaceholder: "mypaceholder", //class for the label when act as placeholder 45 | classLabel: "mylabel", //class for the label when act as label 46 | classIcon: "myicon", //class for the icon container 47 | wrapperClass: "mygroup", //class for wrapper of the input+label 48 | animSpeed: 200, //speed of the animation 49 | labelArrowDown: null, //down icon (image or font) 50 | labelArrowUp: null, //up icon (image or font) 51 | labelArrowRight: null, //right icon (image or font) 52 | labelIconPosition: "append" //position of the icon [append|propend] 53 | inputAttr: "name" //the attribute that contains the name of INPUT/TEXTAREA 54 | }); 55 | ``` 56 | License 57 | ============ 58 | Labelinplace is licensed under the [MIT license](http://opensource.org/licenses/MIT). 59 | -------------------------------------------------------------------------------- /jquery.labelinplace.min.js: -------------------------------------------------------------------------------- 1 | (function(e,c,a,g){var d="labelinplace",f={labelPosition:"up",classPlaceholder:"mypaceholder",classLabel:"mylabel",classIcon:"myicon",wrapperClass:"mygroup",animSpeed:200,labelArrowDown:null,labelArrowUp:null,labelArrowRight:null,labelIconPosition:"append",inputAttr:"name"};function b(i,h){this.element=i;this.options=e.extend({},f,h);this._defaults=f;this._name=d;this.init();}b.prototype={init:function(){var i=this.element;var h=this.options;e(i).each(function(){var l=e("label[for='"+e(this).attr(h.inputAttr)+"']");var m=parseInt(e(this).css("border-top-width"))+parseInt(e(this).css("padding-top"));var k=parseInt(e(this).css("border-left-width"))+parseInt(e(this).css("padding-left"));var j=parseInt(e(this).css("border-bottom-width"))+parseInt(e(this).css("padding-bottom"));e(this).attr({"data-height":e(this).outerHeight(),"data-width":e(this).outerWidth(),"data-spaceTop":m,"data-spaceBottom":j});switch(h.labelIconPosition){case"after":if(h.labelArrowRight){l.append(''+h.labelArrowRight+"");}break;default:if(h.labelArrowRight){l.prepend(''+h.labelArrowRight+"");}}e(this).removeAttr("placeholder");l.css("position","absolute").css("top",m+"px").css("left",k+"px").addClass(h.classPlaceholder);if(e(i).val()){l.hide();}e(this).prev("label").andSelf().wrapAll('
');});e(i).focus(function(){var m=e("label[for='"+e(this).attr(h.inputAttr)+"']");var k=parseInt(e(this).outerHeight());var l=parseInt(m.outerHeight());var j=parseInt(e(this).css("padding-top"));switch(h.labelPosition){case"down":m.animate({top:k},h.animSpeed,function(){if((h.labelArrowUp)&&(h.labelArrowRight)){m.find("."+h.classIcon).html(h.labelArrowUp);}});e(this).animate({height:k+l+j,"padding-bottom":l+j+"px"},h.animSpeed,function(){if(m.is(":hidden")){m.show();}m.removeClass(h.classPlaceholder).addClass(h.classLabel);});break;default:e(this).animate({height:k+l+j,"padding-top":l+j+"px"},h.animSpeed,function(){if(m.is(":hidden")){m.show();}m.removeClass(h.classPlaceholder).addClass(h.classLabel);if((h.labelArrowDown)&&(h.labelArrowRight)){m.find("."+h.classIcon).html(h.labelArrowDown);}});}});e(i).blur(function(){var m=e("label[for='"+e(this).attr(h.inputAttr)+"']");var k=e(this).attr("data-height");var j=parseInt(e(this).attr("data-spaceTop"));var l=parseInt(e(this).attr("data-spaceBottom"));switch(h.labelPosition){case"down":e(this).animate({height:k,"padding-bottom":l+"px"},h.animSpeed,function(){});if(e(this).val()!=""){m.hide();}else{m.animate({top:j},200,function(){if((h.labelArrowUp)&&(h.labelArrowRight)){m.find("."+h.classIcon).html(h.labelArrowRight);}}).removeClass(h.classLabel).addClass(h.classPlaceholder);}break;default:e(this).animate({height:k,"padding-top":j+"px"},h.animSpeed,function(){if(e(this).val()!=""){m.hide();}else{m.removeClass(h.classLabel).addClass(h.classPlaceholder);if((h.labelArrowDown)&&(h.labelArrowRight)){m.find("."+h.classIcon).html(h.labelArrowRight);}}});}});e("."+h.wrapperClass).on("click","label."+h.classPlaceholder,function(){var j=e("."+h.wrapperClass+" ["+h.inputAttr+"="+e(this).attr("for")+"]");if(j.not(":focus")){j.trigger("focus");}});}};e.fn[d]=function(h){return this.each(function(){if(!e.data(this,"plugin_"+d)){e.data(this,"plugin_"+d,new b(this,h));}});};})(jQuery,window,document); -------------------------------------------------------------------------------- /jquery.labelinplace.js: -------------------------------------------------------------------------------- 1 | 2 | ;(function ( $, window, document, undefined ) { 3 | 4 | var pluginName = "labelinplace", 5 | defaults = { 6 | labelPosition: "up", 7 | classPlaceholder: "mypaceholder", 8 | classLabel: "mylabel", 9 | classIcon: "myicon", 10 | wrapperClass: "mygroup", 11 | animSpeed: 200, 12 | labelArrowDown: null, 13 | labelArrowUp: null, 14 | labelArrowRight: null, 15 | labelIconPosition: "append", 16 | inputAttr: "name" 17 | 18 | }; 19 | 20 | 21 | function Plugin( element, options ) { 22 | this.element = element; 23 | 24 | this.options = $.extend( {}, defaults, options) ; 25 | 26 | this._defaults = defaults; 27 | this._name = pluginName; 28 | 29 | this.init(); 30 | } 31 | 32 | Plugin.prototype = { 33 | 34 | init: function() { 35 | 36 | var elment = this.element 37 | var settings = this.options 38 | 39 | 40 | 41 | $(elment).each(function () { 42 | var inputLabel = $("label[for='" + $(this).attr(settings.inputAttr) + "']"); 43 | 44 | 45 | var spaceTop = parseInt($(this).css("border-top-width")) + parseInt($(this).css("padding-top")); 46 | var spaceLeft = parseInt($(this).css("border-left-width")) + parseInt($(this).css("padding-left")); 47 | var spaceBottom = parseInt($(this).css("border-bottom-width")) + parseInt($(this).css("padding-bottom")); 48 | 49 | 50 | 51 | 52 | 53 | $(this).attr({ 54 | "data-height": $(this).outerHeight(), 55 | "data-width": $(this).outerWidth(), 56 | "data-spaceTop": spaceTop, 57 | "data-spaceBottom": spaceBottom 58 | }); 59 | 60 | //if there is an icon 61 | switch (settings.labelIconPosition) { 62 | case "after": 63 | if (settings.labelArrowRight) inputLabel.append("" + settings.labelArrowRight + "") 64 | break; 65 | 66 | 67 | default: //before 68 | if (settings.labelArrowRight) inputLabel.prepend("" + settings.labelArrowRight + "") 69 | } 70 | 71 | 72 | 73 | $(this).removeAttr("placeholder"); 74 | 75 | inputLabel.css("position", "absolute").css("top", spaceTop + "px").css("left", spaceLeft + "px").addClass(settings.classPlaceholder); 76 | if ($(elment).val()) inputLabel.hide(); 77 | 78 | $(this).prev("label").andSelf().wrapAll('
'); 79 | 80 | 81 | }); 82 | 83 | 84 | $(elment).focus(function () { 85 | 86 | var focusLabel = $("label[for='" + $(this).attr(settings.inputAttr) + "']"); 87 | var inputHeight = parseInt($(this).outerHeight()); 88 | var labelHeight = parseInt(focusLabel.outerHeight()); 89 | var paddingTop = parseInt($(this).css("padding-top")); 90 | 91 | 92 | 93 | switch (settings.labelPosition) { 94 | case "down": 95 | focusLabel.animate({ top: inputHeight }, settings.animSpeed, function () { 96 | if ((settings.labelArrowUp) && (settings.labelArrowRight)) focusLabel.find("." + settings.classIcon).html(settings.labelArrowUp); 97 | 98 | }); 99 | $(this).animate({ height: inputHeight + labelHeight + paddingTop, "padding-bottom": labelHeight + paddingTop + "px" }, settings.animSpeed, function () { 100 | if (focusLabel.is(":hidden")) focusLabel.show(); 101 | focusLabel.removeClass(settings.classPlaceholder).addClass(settings.classLabel); 102 | }); 103 | 104 | break; 105 | 106 | 107 | default: //up 108 | $(this).animate({ height: inputHeight + labelHeight + paddingTop, "padding-top": labelHeight + paddingTop + "px" }, settings.animSpeed, function () { 109 | if (focusLabel.is(":hidden")) focusLabel.show(); 110 | focusLabel.removeClass(settings.classPlaceholder).addClass(settings.classLabel); 111 | if ((settings.labelArrowDown) && (settings.labelArrowRight)) focusLabel.find("." + settings.classIcon).html(settings.labelArrowDown); 112 | 113 | 114 | }); 115 | } 116 | 117 | 118 | 119 | }); 120 | 121 | 122 | 123 | $(elment).blur(function () { 124 | 125 | var focusLabel = $("label[for='" + $(this).attr(settings.inputAttr) + "']"); 126 | 127 | var inputHeight = $(this).attr("data-height"); 128 | var paddingTop = parseInt($(this).attr("data-spaceTop")); 129 | var paddingBottom = parseInt($(this).attr("data-spaceBottom")); 130 | 131 | 132 | switch (settings.labelPosition) { 133 | 134 | case "down": 135 | $(this).animate({ height: inputHeight, "padding-bottom": paddingBottom + "px" }, settings.animSpeed, function () { }); 136 | if ($(this).val() != "") { 137 | focusLabel.hide(); 138 | } else { 139 | focusLabel.animate({ top: paddingTop }, 200, function () { 140 | if ((settings.labelArrowUp) && (settings.labelArrowRight)) focusLabel.find("." + settings.classIcon).html(settings.labelArrowRight); 141 | 142 | }).removeClass(settings.classLabel).addClass(settings.classPlaceholder); 143 | } 144 | break; 145 | 146 | default: //up 147 | $(this).animate({ height: inputHeight, "padding-top": paddingTop + "px" }, settings.animSpeed, function () { 148 | 149 | if ($(this).val() != "") { 150 | focusLabel.hide(); 151 | } else { 152 | focusLabel.removeClass(settings.classLabel).addClass(settings.classPlaceholder); 153 | if ((settings.labelArrowDown) && (settings.labelArrowRight)) focusLabel.find("." + settings.classIcon).html(settings.labelArrowRight); 154 | 155 | } 156 | }); 157 | 158 | } 159 | 160 | 161 | }); 162 | 163 | 164 | //trigger click on label 165 | // $("." + settings.wrapperClass).on( "click", "label." + settings.classPlaceholder, function() { 166 | $("." + settings.wrapperClass).on( "click", "label." + settings.classPlaceholder, function() { 167 | var inputElement = $("." + settings.wrapperClass + " [" + settings.inputAttr + "=" + $(this).attr("for") + "]") 168 | if (inputElement.not(':focus')) { 169 | inputElement.trigger( "focus" ); 170 | // console.log("[" + settings.inputAttr + "=" + $(this).attr("for") + "]") 171 | 172 | }; 173 | 174 | 175 | }); 176 | 177 | 178 | } 179 | 180 | }; 181 | 182 | $.fn[pluginName] = function ( options ) { 183 | return this.each(function () { 184 | if (!$.data(this, "plugin_" + pluginName)) { 185 | $.data(this, "plugin_" + pluginName, 186 | new Plugin( this, options )); 187 | } 188 | }); 189 | }; 190 | 191 | })( jQuery, window, document ); 192 | --------------------------------------------------------------------------------