Created
August 3, 2012 20:23
-
-
Save billerickson/3251211 to your computer and use it in GitHub Desktop.
Gravity Forms labels used as placeholders
This file contains 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(document).ready(function($){ | |
// gravity forms custom placeholders | |
$('#inner li.gfield .gfield_label').click(function(){ | |
$(this).next('.ginput_container').find('input[type="text"], textarea').focus(); | |
}) | |
$('#inner .ginput_container input[type="text"], #inner .ginput_container textarea') | |
.focus(function(){ | |
$(this).closest('.ginput_container').prev('.gfield_label').hide(); | |
}) | |
.blur(function(){ | |
if( $(this).val() == "" ){ | |
$(this).closest('.ginput_container').prev('.gfield_label').show(); | |
} | |
}) | |
$('#inner .ginput_container input[type="text"], #inner .ginput_container textarea').each(function(){ | |
if( $(this).val() != "" ){ | |
$(this).closest('.ginput_container').prev('.gfield_label').hide(); | |
} | |
}) | |
}); |
This file contains 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
#inner .gfield_label { } | |
#inner li.gfield { position:relative; } | |
#inner li.gfield .gfield_label { position:absolute; top: 4px; left: 6px; font-size: 14px; color: #949494; font-weight: normal; margin: 0; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this Bill.
Here is revised code for using with Genesis 2.0 with HTML5 enabled.
and the CSS