Category Archives: jQuery

This jQuery plugin will add a background color to text, password, and textarea input fields in forms when focused, and then revert to the original background color on blur. It is a one line call, with one (optional) parameter, the background color.

You can target all forms on the page with this simple line:

$('form').formFocus();

This will default the focused background color to: #f0f0c0

You can specify the background color as follows:

$('form').formFocus({backgroundcolor:'#ff0000});

which would make the focused background color a very bright red. You can also target forms specifically, whether you only want to use it on a single form, or if you want to specify different background colors for each.

$('#demo1').formFocus({backgroundcolor:'#ff0000});

$('#demo2').formFocus({backgroundcolor:'#0000ff});

Download jQuery Form Focus Plugin

jQuery has a plethora of selectors, two of which being :last and :last-child. It should be very obvious that these do not achieve the same goal. Well, I spent the better part of an hour figuring that out. I went down the page of selectors knowing jQuery has a selector for :last-child, and saw :last first. I toyed around with it a bit to no avail. I finally did a couple searches on jQuery last selectors and found out that jQuery also has a :last-child selector, which is what I was really looking for.

The :last selector selects the last element on the page matching the entire selector. The :last-child selector selects all last children matching the entire selector.

$(‘div p:last’) would select the paragraph highlighted in red:

<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>

while $(‘div p:last-child’) would select the paragraphs highlighted in red:
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>