Highlight row of form when input is focussed

Posted by Jeepstone on Stack Overflow See other posts from Stack Overflow or by Jeepstone
Published on 2010-05-28T16:41:44Z Indexed on 2010/05/28 17:02 UTC
Read the original article Hit count: 201

Filed under:
|
|

I have the following piece of Mootools 1.11 code (not upgradable as this is within Joomla), which I want to highlight the form row, when an item within it is focussed. However, this doesn't work. I need to know how to access the parent div of the form item.

window.addEvent('domready', function() {
    var list = $$('#ChronoContact_lensorder div.formrow');
    list.each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#e6f0f2',
        color: '#FFF'
    });
});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#FFF',
        'color': '#2F9AD0'
    });
});

}); 
});

HTML is:

<div class="formrow"> 
<label for="ud">Uncut Diameter:</label> 
<input type="text" id="ud" name="ud" /> 
</div> 

Thanks

© Stack Overflow or respective owner

Related posts about focus

Related posts about mootools