Advanced Search

Return to Snippet

Revision: 42055
at February 26, 2011 03:51 by mikemetcalf
Updated Code 
$(document).ready(function() {

	$('input[type=text]').focusin(function () {
		$(this).prev('label').css('color','#999');
	});

	$('input[type=text]').focusout(function () {
		$(this).prev('label').css('color','#111');
	});

	$('input[type=text]').keydown(function () {
		if($(this).attr('value') == '') {
			$(this).prev('label').hide();
		}
	});

	$('input[type=text]').keyup(function () {
		if ($(this).attr('value') == '') {
			$(this).prev('label').show();
			$(this).prev('label').css('color','#999');
		}
	});

});

Revision: 42054
at February 26, 2011 03:49 by mikemetcalf
Updated Code 
$(document).ready(function() {

	$('input[type=text]').focusin(function () {
		$(this).prev('label').css('color','#999');
	});

	$('input[type=text]').focusout(function () {
		$(this).prev('label').css('color','#111');
	});

	$('input[type=text]').keydown(function () {
		if($(this).attr('value') == '') {
			$(this).prev('label').hide();
		}
	});

	$('input[type=text]').keyup(function () {
		if ($(this).attr('value') == '') {
			$(this).prev('label').show();
			$(this).prev('label').css('color','#999');
		}
	});

});  


Use in tandem with the following HTML/CSS:

<li>
	<label for="firstname">First Name</label>
	<input class="clear" type="text" name="firstname" autocomplete="off" id="firstname" />
</li>

/* label parent */
li {
 position: relative;
}

  label {
    position: absolute;
    font-weight: bold;
    font-size: 16px;
    top: 11px;
    left: 11px;
    color: #111;
    cursor: text;
  }

Revision: 42053
at February 26, 2011 03:39 by mikemetcalf
Updated Code 
$(document).ready(function() {

	$('input[type=text]').focusin(function () {
		$(this).prev('label').css('color','#999');
	});

	$('input[type=text]').focusout(function () {
		$(this).prev('label').css('color','#111');
	});

	$('input[type=text]').keydown(function () {
		if($(this).attr('value') == '') {
			$(this).prev('label').hide();
		}
	});

	$('input[type=text]').keyup(function () {
		if ($(this).attr('value') == '') {
			$(this).prev('label').show();
			$(this).prev('label').css('color','#999');
		}
	});

});  


Use in tandem with the following CSS:

/* label parent */
li {
 position: relative;
}

  label {
    position: absolute;
    font-weight: bold;
    font-size: 16px;
    top: 11px;
    left: 11px;
    color: #111;
    cursor: text;
  }

Revision: 42052
at February 26, 2011 03:37 by mikemetcalf
Updated Code 
$(document).ready(function() {

	$('input[type=text]').focusin(function () {
		$(this).prev('label').css('color','#555');
	});

	$('input[type=text]').focusout(function () {
		$(this).prev('label').css('color','#FFF');
	});

	$('input[type=text]').keydown(function () {
		if($(this).attr('value') == '') {
			$(this).prev('label').hide();
		}
	});

	$('input[type=text]').keyup(function () {
		if ($(this).attr('value') == '') {
			$(this).prev('label').show();
			$(this).prev('label').css('color','#555');
		}
	});

});  


Use in tandem with the following CSS:

/* label parent */
li {
 position: relative;
}

  label {
    position: absolute;
    font-weight: bold;
    font-size: 16px;
    top: 11px;
    left: 11px;
    color: #FFF;
    cursor: text;
  }

Revision: 42051
at February 26, 2011 03:35 by mikemetcalf
Initial Code 
$(document).ready(function() {
		
		$('input[type=text]').focusin(function () {
         $(this).prev('label').css('color','#555');
    });

		$('input[type=text]').focusout(function () {
         $(this).prev('label').css('color','#FFF');
    });

		$('input[type=text]').keydown(function () {
			if($(this).attr('value') == '') {
				$(this).prev('label').hide();
			}
		});
		
		$('input[type=text]').keyup(function () {
			if ($(this).attr('value') == '') {
				$(this).prev('label').show();
				$(this).prev('label').css('color','#555');
			}
		});
    
});  

Use in tandem with the following CSS:

/* label parent */
li {
 position: relative;
}

  label {
    position: absolute;
    font-weight: bold;
    font-size: 16px;
    top: 11px;
    left: 11px;
    color: #FFF;
    cursor: text;
  }
Initial URL 
http://mikemetcalf.com/share/overlabel
Initial Description 
Focus and keypress events determine when to hide, show, or dim a label.

Use in tandem with the following HTML/CSS:


HTML
----

	<li>
		<label>First Name</label>
		<input>
	</li>


CSS
----


	li {
		position: relative;
	}

	label {
		position: absolute;
		top: 1px;
		left: 1px;
		cursor: text;
	}
Initial Title 
Simple jQuery overlabel alternative
Initial Tags 
jquery
Initial Language 
jQuery