Sogwap Sandbox

Test Site

Menu

You are here: Home / Uncategorized / GF Adaptive Placeholder #2

GF Adaptive Placeholder #2

Contact Us

Here's the JQuery:

jQuery('li.gfield input').removeAttr('placeholder'); jQuery('li.gfield textarea').removeAttr('placeholder'); jQuery(document).ready(function($) { $("input[type='text'], textarea").focus(function(){ $(this).parents("li").removeClass("Blur"); $(this).parents("li").addClass("Focus"); }).blur(function(){ $(this).parents("li").removeClass("Focus"); $(this).parents("li").addClass("Blur"); }) $( "input[type='text'], textarea" ).change(function() { if ( $( this ).is(":valid") ) { $(this).parents("li").addClass("Valid"); } else { $(this).parents("li").removeClass("Valid"); } //$(this).parents("li").toggleClass("Valid"); }); $( "input[type='text'], textarea" ).each(function( i ) { if ( $( this ).is(":valid") ) { $(this).parents("li").addClass("Valid-1"); } else { $(this).parents("li").removeClass("Valid-1"); } }); $( "input[type='text'], textarea" ).each(function( i ) { if ( $( this ).val() ) { $(this).parents("li").addClass("Valid-1"); } else { $(this).parents("li").removeClass("Valid-1"); } }); });

Here's the CSS:

li.gfield input {height:3em;} li.gfield textarea {padding-top:12px;} li.gfield {position:relative;} /* Position label as Placeholder */ li.gfield label {position:absolute; top:15px; left:10px; transition: all 0.2s ease-in-out; } /* If field contains valid data, move label to top */ li.gfield.Focus label, li.gfield.Valid label { opacity:.7; top:0px; font-size:.85em !important; } li.gfield.Focus label, li.gfield.Valid-1 label { opacity:.7; top:0px; font-size:.85em !important; }