<style>
.copy, .reg {font-size:xx-small;vertical-align:text-top;}
</style>

<script>
$(function(){
var copy = new RegExp(‘\u00a9′,’g');
var reg = new RegExp(‘\u00ae’,'g’);
var newBody = $(‘body’).html().replace(copy, ‘<span class=”copy”>&copy;</span>’).replace(reg, ‘<span class=”reg”>&reg;</span>’);
$(‘body’).html(newBody);
});
</script>

1. A normal form field watermark that empties on focus and refills on blur.
2. A value that is set by the server trumps anything that the plugin does. (Note: this way, if a user has to fill out the form again because one of the fields didn’t validate, the server can send values so that the user doesn’t have to refill the whole form)
3. There may be a time when you want to ignore the plugin and keep your label visible. Just add a ‘ignore’ class to your label and the plugin doesn’t touch it.
4. This is an extra couple of lines written so that validation works correctly. What it does is it empties the fields that have not been touched by the user on submit. That way, we can run our validation against those fields, and we don’t submit our label.

This solution focuses on accessibility as it does not remove the label, just moves it off the viewport. This way, if a user does not have Javascript, CSS, or uses a screen reader, they will still get normal labels.

View a demo
Download plugin (link to jQuery plugins)

Please let me know what you think about it, or if there is anything I should do to improve.

maxImage is a jquery plugin that I wrote a few months ago that automatically scales images based on how much room they have in the browser window. The image will always fill your browser window. I have built a basic demo mini site for the plugin.

Note: For some reason I have lost the post that originally contained the release of my plugin. I would like a place for users of the plugin to contact me and let me know how use of the plugin is going. Please use this space, the comment area to let me know how using maxImage is going, what you would like to see added or changed.