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"
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….)
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)