Posts Tagged ‘plugin’

JQuery Plugin: Simple Textbox Watermark

In a previous post, I’ve written about creating a simple JQuery watermark. The code I wrote in that post is simple, and breaks down how a watermark really works. I expanded on that simplicity with this plugin, but not too far. Most watermark plugins I’ve seen are overly complex, attempting to account for all usage scenarios, when a majority of people only need to handle a small subset of those scenarios. So, I built a light plugin (under 1.3KB) that handles those basic scenarios well and implements easily. Here’s how it works:

Here’s how to implement it:

  1. Add in the most recent version of JQuery and the plugin code.
  2. In a document ready function, bind the plugin to any inputs and textareas you want with a single line of JQuery.
  3. Add the watermark text you want into the title property of the appropriate inputs and textareas.
  4. Apply any CSS you want to style your watermark text (suggested), and that’s it!
  5. Dependent on your usage scenario, call the function to clear out the watermarks before submitting the form.

The javascript:

$(document).ready(function(){
     $('.watermark').watermark();
});

The plugin applies a class of ‘marked’ to inputs and textareas when the watermark is active:

input.watermark, textarea.watermark { color: #000; }
input.marked, textarea.marked { color: #999; }

You’ve got to include your title property and the watermark class for the plugin to bind to the form item:

<input type="text" title="WATERMARK_TEXT class="watermark" />
<input type="text" title="WATERMARK TEXT" class="watermark" val="PREPOPULATED_VALUE" />
<input type="password" title="WATERMARK_TEXT" class="watermark" />
<input type="email" title="WATERMARK_TEXT" class="watermark" />
<textarea title="WATERMARK_TEXT" class="watermark"></textarea>

Here’s the javascript function to call if you want to clear out the watermarks before a form submission (just make sure to use the same JQuery targeting you used to bind the plugin to your form elements so you don’t miss anything):

$('.watermark').watermark('clearWatermarks');

It is as simple as that. Did I sell you on it? If so, download the plugin and enjoy! Here are links to both the unminimified and minified versions.

Download Full (1.66KB)Download Minified (1.26KB)

This plugin has been tested in the following browsers:

Chrome Firefox Internet Explorer Safari Opera

If you have any questions or comments on the plugin, please share. I may release more versions if there are specific feature requests that can be implemented without using a heavy amount of code. I want to keep this light, so if you want really advanced features, then this isn’t the plugin for you. But who knows, maybe I’ll write a more advanced one later…

JQuery Plugin: Hide And Show “N” List Items

My previous post was on using JQuery to hide and show part of a list. The javascript was simple and clean, but it was also a little hacky, because it required a hard-coded height to collapse your lists to. I felt it would be a little more appropriate to go further in depth and actually take a parameter for the number of list items you want to show by default. Notice in my sidebar, I automatically hide list items in my categories and popular post lists. I used the first version with a hard-coded height, to handle those. Here’s a really simple plugin that takes an optional number of list items to show, on page load, collapses lists to that number, and appends a link to toggle the list display.

Here’s an example of how it looks after you’ve applied it to multiple lists. You can apply it to both ordered and unordered lists. You can apply a different collapse number to individual lists, or the same number to them all. You can also change the text of the toggle link. As you can see below, there are two completely different implementations, using default settings on the left, and custom settings on the right.

  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7
  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7

To implement the JQuery plugin, just bind the collapseList function to any ordered or unordered list. To stick with the default settings, use the first line of code in a document ready function. To customize the collapse number, and the toggle link text, use the second example.

$('ul.collapse').collapseList();
$('ul.collapse').collapseList({
	'collapseNum' : 4,
	'moreLinkText' : 'custom show text',
	'lessLinkText' : 'custom hide text'
});

Now to the goodies. Download the plugin! Here are links to both the unminimified and minified versions.

Download Full (1.39KB)Download Minified (790B)

This plugin has been tested in the following browsers:

Chrome Firefox Internet Explorer Safari Opera

I’m thinking a more robust version 2 could be in the works, but I don’t know what kind of customization would be needed. There are a lot of possibilities, and I’m just trying to decide what would help more. Feel free to put in requests so I can start working on putting something out.