Grow your CSS skills. Land your dream job.

Bells and whistles for form

  • # September 30, 2009 at 3:40 pm

    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!

    # September 30, 2009 at 6:50 pm

    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.

    # September 30, 2009 at 9:57 pm

    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:

    Code:

    What is your First Name?



    What is your Last Name?


    Where should we send your Free Trial package?


    Which zip code do you want us to send your Free Trial package?



    Type your City here.


    Should we have more questions regarding the shipment, we will contact you.



    Should we have more questions regarding the shipment, we will contact you.

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

    Code:
    /* 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:

    Code:
    $(function (){

    $(“.hint”).hide();

    $(“input”).focus(function() {
    $(this).parent().addClass(“highlight”);
    $(“img.check”).remove();
    $(this).prev().before(‘‘);
    $(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 .

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".