Forums

smarsh

Hi,

I've tried to implement this beyond the basic single field forms and can't get it to work. I need to create a form with single fields and a text box too. How can I get the highlighting to work with a text box?

Thanks!

chriscoyier

You'll have to be a little bit more specific or post some code (or even better a link) for us to be able to help...

That post I wrote is basically just some jQuery that waits for focus events on form elements, then changes the class name of the parent element. Since the parent elements are always wrapping DIV's, you can use that class name to do something like change a background color creating a nice effect of colorizing the whole area around the input and label.

smarsh

Thanks.

Below is the code from your original demo melded into a real form I'm trying to adapt it to. Aside from the internal style sheet (at this stage), it uses your external style sheet too. It's not on-line yet so here's the code:

<!doctype html public \"-//W3C//DTD HTML 4.0 Transitional//EN\">

<html>
<head>
	<title>Contact</title>
	<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
	<meta name=\"robots\" content=\"noindex\">
	<script type=\"text/javascript\" src=\"asf.js\"></script>	
	
	<style type=\"text/css\">
	#contact {
			  position: absolute;
			  width: 380px;
			  height: 480px;
			  left: 50%;
			  top: 20px;
			  margin-left: -196px;
			  margin-top: 0px;
			}
	form.asf_form {
			width: 380px;
			font-family: Arial, Tahoma;
			font-size: 12px;
			}
	.asf_form fieldset {
			border: 1px solid #AAAAAA;
			padding: 5px;
			}
	.asf_form input {
			width: 380px;
			}
	.asf_form textarea {
		width: 380px;
		font-family: Arial, Tahoma;
			}
	.global_error {
			  z-index: 20000; display: none; border: solid 1px #AAAAAA; width: 380px; background: #EEEEEE repeat-x;
			  font-family : Arial, Helvetica, sans-serif;
			  color: #000000;
			  font-size: 12px;
			}
	.global_error .message {
			padding: 15px;
			} 
	</style>

	<script type=\"text/javascript\" src=\"js/jquery.js\"></script>

	<script type=\"text/javascript\">
		$(document).ready(function(){
			$(\"input\").focus(function() {
				$(this)
					.parent()
						.addClass(\"curFocus\")
					.children(\"div\")
						.toggle();
			});
			$(\"input\").blur(function() {
				$(this)
					.parent()
						.removeClass(\"curFocus\")
					.children(\"div\")
						.toggle();
			});
			
			$('<div class=\"tl\"></div><div class=\"tr\"></div><div class=\"bl\"></div><div class=\"br\"></div>').appendTo(\"div.single-field\");
		});
		
	</script>
</head>

<body bgcolor=\"#ffffff\">

	<div id=\"contact\" visiblity:visible; z-index:10;\">

		<form name=\"asfeedback\" class=\"asf_form\" id=\"asfeedback\" />
			<fieldset>
				<legend> <p><font face=\"\" color=\"#8f2424\"><b>all fields are required</b></font></p> </legend>
				<div class=\"global_error\" id=\"GlobalMessage\">
					<div class=\"message\" id=\"GlobalMessageContent\"></div>
				</div>
				<br />
				
				<div class=\"single-field\">
					<label for=\"your name\">your name:</label><br /><input type=\"text\" name=\"name\" />
				</div>
				
				<div class=\"single-field\">
					<label for=\"your e-mail address\">your e-mail address:</label><br /><input type=\"text\" name=\"email\" />
				</div>
				
				<div class=\"single-field\">
					<label for=\"your message\">your message:</label><br /><textarea name=\"message\" rows=\"10\"></textarea>
				</div>

				<br /><br />

				<input class=\"asf_button\" onclick=\"return SendMessage();\" type=\"button\" name=\"send\" value=\"click to send your message\" />
			</fieldset>
		</form>
	

</body>
</html>

smarsh

Any ideas guys?

treehouse : what would you like to learn today?

Forums

Problem with: Improved Current Field Highlighting in Forms