Form Hints 1.0
Created Tuesday 16th of September 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.
What it Does
Using this plug-in you can add a descriptive hint to any form-control you may have on your site.
Add a hint by giving the form-control a title-attribute. The hint will disappear and reappear as the user clicks the control.
How to Use
jQuery(document.body).formHints(); would give every form-control with a title-attribute a hint.
Run the plug-in on a parent-element of the form-controls you want to affect. If you run it on document.body every form-control with a title-attribute will get a hint.
Example
Example Code
HTML
<div id="jquery-form-hints-example">
<form method="post" action="">
<p>
<label>
Dummy<br />
<input type="text" name="dummy" title="E.G. Dummy" />
</label>
</p>
<p><input type="submit" value="Ok" /></p>
</form>
</div>
JS
// I'm not actually running it because my site already uses formHints
// jQuery('#jquery-form-hints-example').formHints();
Source Code
jQuery.fn.formHints = function (conf) {
var config = jQuery.extend({
formControls: 'input[title], textarea[title]',
className: 'default-value'
}, conf);
return this.each(function () {
jQuery(config.formControls, this).each(function () {
var t = jQuery(this);
t.formHint = t.attr('title');
t.attr('title', '');
if (t.val() === '' || t.val() == t.formHint) {
t.addClass(config.className).val(t.formHint);
}
t.focus(function () {
if (t.val() == t.formHint) {
t.val('').removeClass(config.className);
}
});
t.blur(function () {
if (t.val() === '' || t.val() == t.formHint) {
t.addClass(config.className).val(t.formHint);
}
});
});
// Remove hints on form submission
jQuery('form', this).submit(function () {
jQuery('.' + config.className, this).removeClass(config.className).val('');
});
});
};
Random jQuery Plug-ins
Checked checkbox-parent
This tiny plug-in adds and removes a 'checked'-class to input[type=checkbox]'s parents. Very useful if you want to style the entire wrapping <label>-e...
Code Block Toolbar
If you post code-examples on your site you can use this plug-in to add some nifty buttons below each code-example that allows the user to, for example...
Equal Height
This plug-in makes HTML-elements equal height by adjusting their min-height CSS properties. Of course IE6 has no clue what min-height means so the plu...
