Created
September 5, 2015 16:39
-
-
Save solepixel/72c495e5e2acc2da6c78 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function($){ | |
$('.gform_fields input[type="text"], .gform_fields input[type="email"], .gform_fields input[type="tel"], .gform_fields textarea').fadeLabel(); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
;(function ( $, window, document, undefined ) { | |
"use strict"; | |
var pluginName = "fadeLabel", | |
defaults = { | |
label : false, | |
abort : false | |
}; | |
// The actual plugin constructor | |
function Plugin ( element, options ) { | |
this.element = element; | |
this.$label = false; | |
this.settings = $.extend( {}, defaults, options ); | |
this._defaults = defaults; | |
this._name = pluginName; | |
this.init(); | |
} | |
// Avoid Plugin.prototype conflicts | |
$.extend(Plugin.prototype, { | |
init: function () { | |
this.findLabel(); | |
if( ! this.$label.length ){ | |
console.log( 'fadeLabel could not find a label.' ); | |
return; | |
} | |
if( ! this.$label.text() ){ | |
console.log( 'fadeLabel found an empty label.' ); | |
return; | |
} | |
this.bindEvents(); | |
}, | |
findLabel: function () { | |
var lbl = this.settings.label, | |
$field = $(this.element), | |
$label = false; | |
// look for the settings label first | |
if( lbl ){ | |
$label = $field.closest( lbl ); | |
if( ! $label.length ) | |
$label = $field.prev( lbl ); | |
if( ! $label.length ) | |
$label = $field.next( lbl ); | |
} | |
// try to find a label automatically | |
if( ! $label.length ) | |
$label = $field.next('label:first'); | |
if( ! $label.length ) | |
$label = $field.siblings('label:first'); | |
if( ! $label.length ) | |
$label = $field.parents('label').find('.label:first'); | |
if( ! $label.length ) | |
$label = $field.parents('li:first').find('label'); | |
if( ! $label.length ) | |
$label = $field.parents('p:first').find('label'); | |
if( ! $label.length ) | |
$label = $field.parents('form:first').find('label'); | |
this.$label = $label; | |
}, | |
bindEvents: function(){ | |
var $field = $( this.element ), | |
$label = $( this.$label ); | |
// hide the label if the field has a value | |
if( $field.val() ) | |
$label.hide(); | |
// setup field events | |
$field.focus(function(e){ | |
if( ! $field.val() ){ | |
$label.fadeTo( 'normal', .2 ); | |
} else { | |
if( $label.css('opacity') > 0 ){ | |
$label.fadeTo('fast', 0, function(){ | |
$label.hide(); | |
}); | |
} | |
} | |
}).blur(function(e){ | |
if( ! $field.val() ){ | |
$label.fadeTo( 'normal', 1 ); | |
} else { | |
if( $label.css('opacity') > 0 ){ | |
$label.hide(); | |
} | |
} | |
}).keyup(function(e){ | |
if( $field.val() ){ | |
if( $label.css('opacity') > 0 ){ | |
$label.fadeTo( 'fast', 0, function(){ | |
$label.hide(); | |
}); | |
} | |
} else { | |
$label.fadeTo( 'normal', .2 ); | |
} | |
}); | |
} | |
}); | |
// A really lightweight plugin wrapper around the constructor, | |
// preventing against multiple instantiations | |
$.fn[ pluginName ] = function ( options ) { | |
return this.each(function() { | |
if ( !$.data( this, "plugin_" + pluginName ) ) { | |
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) ); | |
} | |
}); | |
}; | |
})( jQuery, window, document ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment