Forums

rjmccollam

I need to find something that will allow a couple bells and whistles for a form. The client is wanting two things: 1 when a field is highlighted on a form for the field to be green and to have a check next to it. I know how to make the field green, but inserting the green check I am not sure of. 2 when a field is selected I am also wanting a "field description" to pop out to the right of the field (see example http://www.trymusclemight.com/1/).

I am assuming a nice piece of jQuery can do this, but I have yet to find one, and I am not sure if both can be done together. The more important one is the "field description"

Thanks for your help!

blue642

For the description, see example 5a here... http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

You would need to tweak it as far as positioning it to the left/right instead of above the element.

As for the thumbnail, you could just append the image with the jquery append method.

I'll be back with more in depth in a bit.

blue642

I uploaded one version, but quickly decided I'd rather try harder, best way to learn is by doing right?
So here is the new version (v.2 if you will.)

Demo: http://dingledoodle.com/Project1/start.html

Html:


            <form action=\"#\" method=\"post\" name=\"myform\" id=\"myform\">
                      <fieldset>
                        <label for=\"firstName\" class=\"lbl1\">First Name</label>
						<input type=\"text\" class=\"information_text\" name=\"firstName\" id=\"firstName\" value=\"\"/>

                        <span class=\"hint\">What is your First Name? </span>
                      </fieldset>
                      <fieldset>
                        <label for=\"lastName\" class=\"lbl1\">Last Name</label>
                        <input type=\"text\" class=\"information_text\" name=\"lastName\" id=\"lastName\" value=\"\"/>
                        <span class=\"hint\">What is your Last Name? </span>
                      </fieldset>

                      <fieldset class=\"top8\">
                        <label for=\"address\" class=\"lbl1\">Address</label>
                        <input type=\"text\" class=\"information_text\" name=\"address\" id=\"address\" value=\"\"/>
                        <span class=\"hint\">Where should we send your Free Trial package? </span>
                      </fieldset>
                      <fieldset>
                        <label for=\"zip\" class=\"lbl1\">Zip</label>

                        <input type=\"text\" class=\"zipcode_txt\" name=\"zip\" id=\"zip\" value=\"\"/>
                        <span class=\"hint\">Which zip code do you want us to send your Free Trial package?</span>
                      </fieldset>
                      <fieldset>
                        <label for=\"city\" class=\"lbl1\">City</label>
                        <input type=\"text\" class=\"information_text\" name=\"city\" id=\"city\" value=\"\"/>
                        <span class=\"hint\">Type your City here.</span>

                      </fieldset>
                      <fieldset class=\"top8\">
                        <label for=\"phone1\" class=\"lbl1\">Phone</label>

                        <input type=\"text\" class=\"information_text\" name=\"phone\" id=\"phone1\" value=\"\" />
                        <span class=\"hint\">Should we have more questions regarding the shipment, we will contact you. </span>
                      </fieldset>
                      <fieldset>
                        <label for=\"email\" class=\"lbl1\">Email</label>
                        <input type=\"text\" class=\"information_text\" name=\"email\" id=\"email\" value=\"\" />
                        <span class=\"hint\">Should we have more questions regarding the shipment, we will contact you. </span>
                      </fieldset>
                      <fieldset>
                        <input type=\"submit\" value=\"Submit!\" id=\"submit\"  />
                      </fieldset>

                </form>

The form follows a structure just like the one in the link you posted.
CSS:


/* Styles */ 

body {
	background: #595959;
	color: #ffffff;
	font-family: \"georgia\", serif;
	font-size: 14px;
}

fieldset {
	border: none;
	padding: 10px;
	height: 29px;
	overflow: hidden;
	position: relative;
}

label {
	display: block;
	width: 80px;
	position: absolute;
	left: 70px;
	line-height: 29px;
	
}

input {
	height: 29px; 
	width: 170px;
	border: none;
	position: absolute;
	left: 150px;
	line-height: 29px;
	font-size: 20px;
	font-family: \"georgia\", serif;
}

.check {
	float: left;
}

.highlight {
	background: #00FF7F;
	color: #000000;
}

.hint {
	position: absolute;
	left: 395px;
	line-height: 29px;
}

Some positioning to setup the form layout, and allow for the image to be plopped in front. (probably a better way to accomplish this, but it works. (I tested it in Firefox Win/Mac, Safari Mac, and IE Win. In IE it works but it the fields droop when focused, not sure why....)

JQuery:


$(function (){

	$(\".hint\").hide();

	$(\"input\").focus(function() {
		$(this).parent().addClass(\"highlight\");
		$(\"img.check\").remove();
		$(this).prev().before('<img class=\"check\" src=\"img/check.gif\" />');
		$(this).siblings(\"span.hint\").animate({opacity: \"show\"}, \"slow\");
	});
	
		$(\"input\").blur(function() {
		$(\"img.check\").remove();
		$(this).parent().removeClass(\"highlight\");
		$(this).siblings(\"span.hint\").animate({opacity: \"hide\"}, \"fast\");
	});

});

Here's how it works,

It starts by hiding any hint elements that may be showing (just to be safe.)

It waits for the user to focus on an input field, once found it does the following:

-Adds a "highlight" class to the parent (fieldset in this case)
-removes any lingering check-mark images (just to be safe)
-Adds an image before the label of the input that is focused.
-displays the "hint" via an animation (this could be styled to look like a box, pop-up bubble, sticker, or anything you want really.)

It also checks for a blur event (when the user click out of the focused input) and runs the following:

-removes and lingering check-mark images. (double safe here)
-removes the parent's "highlight class"
-hides the "hint" span

Also, it degrades much nicer than my previous attempt. (all the way to bare HTML in fact)

Hope I helped, I know I learned something :D .

treehouse : what would you like to learn today?

Forums

Bells and whistles for form