Just a quick note to bring attention to a small update made to the jQuery Popup plugin posted back in June.

The update addresses a small issue when the plugin was targeted to multiple elements or no elements at all. Updating to this version is recommended as it doesn’t change any features or break any previously existing functionality.

Head over here to read more about the plugin or go straight to the download page to pick it up.

Last week, John showed a technique for enabling a popup anchor to degrade gracefully for users who do not have Javascript enabled. Inspired by his technique, I decided to throw together a jQuery plugin that implements this technique, without having the event attached inline.

It weighs in at just under 1k minified, so it shouldn’t be too tough on your page weight. Feel free to download it and use it for any kind of project.

Usage

Include the plugin as you would any jQuery plugin (where “/path/to/file” is specific to your instance).

Next, put the HTML markup in place (of course the href, target and class can be what you want):

Open Google in a new window.

Then, just call popup() on the desired elements:

$(".popup-link").popup();

Additionally, you can provide the desired size of the popup window like so:

$(".popup-link").popup({
    width: 320,
    height: 240
});

Download it here.

Update

We have posted a new version of the plugin that addresses a small bug. The download link above takes you to the demo/download page which contains the new version. Read more about it on this page.

As I am sure everyone is aware by now, jQuery provides a fantastic interface for developing plugins. Here I’ll share the the typical jQuery plugin structure as well as some best practices.

First, we need to define the plugin, we will call ours “colorize”… pretty simple. You’ll want to use the full “jQuery” function call throughout the plugin, as opposed to the “$” alias in the event this plugin gets used in a situation that alias has changed. In short, $ = bad.

jQuery.fn.colorize = function()

That gives us the ability to do something like:

$("#selector").colorize();

Next, we should come up with some sensible default settings for our plugin while also providing a way for users to provide their own settings.

jQuery.fn.colorize = function(options) {
    var defaults = {
        textColor: "green"
    };
    var options = jQuery.extend(defaults, options);
};

Now, we have one option, “textColor”, in our plugin, which defaults to green. We make use of jQuery’s extend() function to smash the two objects (options and defaults) together. So, usage of our plugin looks like this:

$("#selector").colorize({
    textColor: "red"
});

By calling our plugin in this manner, we override the default “green” setting with “red”. Next, let’s add some code so our plugin actually does something. All we’re going to do is apply the CSS property “color” to the selected element. Note that inside a plugin “this” assumes the role of the selected element.

    $(this).css({
        color: options.textColor
    });

Now, admittedly this plugin is awful in terms of provided functionality. But, at least it does something now. One last tidbit that’s important to include, though.

return this;

It is important to return this if at all possible so as to maintain the chaining ability of jQuery. For example, our plugin supports chaining so we can do this:

$("#selector").colorize({textColor: "blue"}).show(500);

Done.

So, all put together we’ve got something that should look like this:

jQuery.fn.colorize = function(options) {
    var defaults = {
        textColor: "green"
    };
    var options = jQuery.extend(defaults, options);

    jQuery(this).css({
        color: options.textColor
    });

    return this;
};

That concludes the basics for jQuery plugin authoring. For more information you can always check out the awesome-packed jQuery documentation.