group highlighting for a form using jQuery

Question

Working on group highlighting for a form based on this tutorial I found: http://www.jankoatwarpspeed.com/examples/ContextHighlighting/

Right now I have a part of the form built out but group highlighting doesn't work. Any help would be greatly appreciated: http://jsfiddle.net/coachpacman/pYEBZ/

I think the problem is in my jQuery, but I can't seem to find a problem when comparing to the tutorial syntax.

Answer 1

Make sure you set the JavaScript framework to jQuery, on the left-side pane. When you do that, the entire form highlights when you click inside a form field.

If you wished to just highlight an individual row then you need to change your HTML to match:

<div class="content">   
    <div class="row">
        <div class="left">First name</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="left">Last name</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="left">Email</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>

    <div class="row">
        <div class="left">Password</div>
        <div class="right"><input name="Text1" type="text" class="text" /></div>
        <div class="clear"></div>
    </div>
</div>

Because in your current code you are missing each individual row.

At this point you will have to use the other piece of the JavaScript to highlight an entire section of code:

$('.content .left, .content input, .content textarea, .content select').focus(function()
{
    $(this).parents('.content').addClass("over");
}).blur(function(){ $(this).parents('.content').removeClass("over"); } );