juarezpaf · January 20, 2010 02:00
diff --git a/Sliding Labels.html b/Sliding Labels.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Label test</title>

 <!--CSS-->
 <style type="text/css">
 body                       { font:12px/1.3 Arial, Sans-serif; }
 form                       { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
 div                        { clear:both;position:relative;margin:0 0 10px; }
 label                      { cursor:pointer;display:block; }
 input[type="text"]         { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px; }
 input[type="text"]:focus   { border-color:#777; }
 input[name="zip"]          { width:150px; }

 /* submit button */
 input[type="submit"]       { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;background:#eee; }
 input[type="submit"]:hover,
 input[type="submit"]:focus { border-color:#333;background:#ddd; }
 input[type="submit"]:active{ margin-top:1px; }
 </style>

 <!--JavaScript-->
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">google.load("jquery", "1");</script>
 <script type="text/javascript">
 $(function(){
 $('form#info .slider label').each(function(){
 	var labelColor = '#999';
 	var restingPosition = '5px';
 	
 	// style the label with JS for progressive enhancement
 	$(this).css({
 		'color' : labelColor,
 		 	'position' : 'absolute',
 	 		'top' : '6px',
 			'left' : restingPosition,
 			'display' : 'inline',
    	'z-index' : '99'
 	});
 	
 	// grab the input value
 	var inputval = $(this).next('input').val();
 	
 	// grab the label width, then add 5 pixels to it
 	var labelwidth = $(this).width();
 	var labelmove = labelwidth + 5;
 	
 	//onload, check if a field is filled out, if so, move the label out of the way
 	if(inputval !== ''){
 		$(this).stop().animate({ 'left':'-'+labelmove }, 1);
 	}    	
 	
 	// if the input is empty on focus move the label to the left
 	// if it's empty on blur, move it back
 	$('input').focus(function(){
 		var label = $(this).prev('label');
 		var width = $(label).width();
 		var adjust = width + 5;
 		var value = $(this).val();
 		
 		if(value == ''){
 			label.stop().animate({ 'left':'-'+adjust }, 'fast');
 		} else {
 			label.css({ 'left':'-'+adjust });
 		}
 	}).blur(function(){
 		var label = $(this).prev('label');
 		var value = $(this).val();
 		
 		if(value == ''){
 			label.stop().animate({ 'left':restingPosition }, 'fast');
 		}	
 		
 	});	    	
 })
 });
 </script>
 </head>
 <body>
 <h1>Sliding Labels by <a href="http://www.csskarma.com" rel="home">CSSKarma</a></h1>
 <p><a href="http://www.csskarma.com/blog/sliding-labels/">Back to the article</a></p>
 <form action="" method="post" id="info">
 	<h2>Contact Information</h2>
    <div id="name-wrap" class="slider">
        <label for="name">Name</label>
        <input type="text" id="name" name="name">
    </div><!--/#name-wrap-->
    
    <div id="email-wrap"  class="slider">
        <label for="email">E&ndash;mail</label>
        <input type="text" id="email" name="email">
    </div><!--/#email-wrap-->
    
    <div id="street-wrap"  class="slider">
        <label for="st">Street</label>
        <input type="text" id="st" name="st">
    </div><!--/#street-wrap-->
    
    <div id="city-wrap"  class="slider">
        <label for="city">City &amp; State</label>
        <input type="text" id="city" name="city">
    </div><!--/#city-wrap-->
    
    <div id="zip-wrap"  class="slider">
        <label for="zip">Zip code</label>
        <input type="text" id="zip" name="zip">
    </div><!--/#zip-wrap-->
    
    <input type="submit" id="btn" name="btn" value="submit">
 </form>


 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Label test</title>

	<!--CSS-->
	<style type="text/css">
	body { font:12px/1.3 Arial, Sans-serif; }
	form { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
	div { clear:both;position:relative;margin:0 0 10px; }
	label { cursor:pointer;display:block; }
	input[type="text"] { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px; }
	input[type="text"]:focus { border-color:#777; }
	input[name="zip"] { width:150px; }

	/* submit button */
	input[type="submit"] { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;background:#eee; }
	input[type="submit"]:hover,
	input[type="submit"]:focus { border-color:#333;background:#ddd; }
	input[type="submit"]:active{ margin-top:1px; }
	</style>

	<!--JavaScript-->
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1");</script>
	<script type="text/javascript">
	$(function(){
	$('form#info .slider label').each(function(){
	var labelColor = '#999';
	var restingPosition = '5px';

	// style the label with JS for progressive enhancement
	$(this).css({
	'color' : labelColor,
	'position' : 'absolute',
	'top' : '6px',
	'left' : restingPosition,
	'display' : 'inline',
	'z-index' : '99'
	});

	// grab the input value
	var inputval = $(this).next('input').val();

	// grab the label width, then add 5 pixels to it
	var labelwidth = $(this).width();
	var labelmove = labelwidth + 5;

	//onload, check if a field is filled out, if so, move the label out of the way
	if(inputval !== ''){
	$(this).stop().animate({ 'left':'-'+labelmove }, 1);
	}

	// if the input is empty on focus move the label to the left
	// if it's empty on blur, move it back
	$('input').focus(function(){
	var label = $(this).prev('label');
	var width = $(label).width();
	var adjust = width + 5;
	var value = $(this).val();

	if(value == ''){
	label.stop().animate({ 'left':'-'+adjust }, 'fast');
	} else {
	label.css({ 'left':'-'+adjust });
	}
	}).blur(function(){
	var label = $(this).prev('label');
	var value = $(this).val();

	if(value == ''){
	label.stop().animate({ 'left':restingPosition }, 'fast');
	}

	});
	})
	});
	</script>
	</head>
	<body>
	<h1>Sliding Labels by <a href="http://www.csskarma.com" rel="home">CSSKarma</a></h1>
	<p><a href="http://www.csskarma.com/blog/sliding-labels/">Back to the article</a></p>
	<form action="" method="post" id="info">
	<h2>Contact Information</h2>
	<div id="name-wrap" class="slider">
	<label for="name">Name</label>
	<input type="text" id="name" name="name">
	</div><!--/#name-wrap-->

	<div id="email-wrap" class="slider">
	<label for="email">E–mail</label>
	<input type="text" id="email" name="email">
	</div><!--/#email-wrap-->

	<div id="street-wrap" class="slider">
	<label for="st">Street</label>
	<input type="text" id="st" name="st">
	</div><!--/#street-wrap-->

	<div id="city-wrap" class="slider">
	<label for="city">City & State</label>
	<input type="text" id="city" name="city">
	</div><!--/#city-wrap-->

	<div id="zip-wrap" class="slider">
	<label for="zip">Zip code</label>
	<input type="text" id="zip" name="zip">
	</div><!--/#zip-wrap-->

	<input type="submit" id="btn" name="btn" value="submit">
	</form>


	</body>
	</html>
No results found