The JavaScript Blog » jQuery

jQuery UI Close Dialog on Overlay Click

Merrick Christensen — Sat, 09 Jul 2011 19:16:00 +0000

I have seen a lot of overly complex solutions for this simple problem and none of them have been valid solutions, here is a snippet that accomplishes it in an unambiguous manner.

$('#el').dialog({
open: function(e){
          var self = this;
          $('.ui-widget-overlay').bind('click', function(){
            $(self).dialog('close');
          });
        },

        close: function(){
          $('.ui-widget-overlay').unbind('click');
        }
});

When Percents Just Don’t Cut It

Merrick Christensen — Wed, 02 Mar 2011 16:46:57 +0000

The Code

$.fn.fill = function(options){
	var settings, container, el, calculateHeight, calculateWidth;

	settings = {
		fill: window,
		margins: {
			x: 0,
			y: 0
		}
	};

	if(options){
		$.extend(settings, options);
	}

	container = $(settings.fill);
	el = $(this);

	calculateWidth = function(){
		return (container.width() - settings.margins.x);
	};

	calculateHeight = function(){
		return (container.height() - settings.margins.y);
	}

	el.css({
		width: calculateWidth(),
		height: calculateHeight()
	});

	container.resize(function(){
	       el.css({
	       width: calculateWidth(),
	       height: calculateHeight()
		});

	});
};

Usage

$('#dashboard').fill({
	margins : {
		x: (80 + $('#sidebar').width()),
		y: 100
	}
});

This snippet fills the entire window with the dashboard minus the sidebar and 100 pixel padding on the y axis.

The jQuery Comment Previewer

Merrick Christensen — Thu, 13 Aug 2009 07:08:07 +0000

This is a small piece of code that is mostly the brain child of the incredible David Walsh. His version is written in MooTools and you can see it here. There are a few differences however, I removed some of the basic form validation, I set up a Gravatar function to be called onBlur rather then keyUp because the flashing Gravatar on each key stroke just got really annoying. While I prefer MooTools I did this in jQuery because:

David Walsh already did an excellent MooTools version.
Depending on its popularity I might make this into a WordPress plugin. And since most themes and WordPress are already using jQuery I figured that was the largest market.
Some of his commenters were requesting a jQuery version.

Demo and Download

You can see it in action here.
Download a zip here.

The Quotator – The JSON Driven HTML Rotator

Merrick Christensen — Thu, 06 Aug 2009 21:17:14 +0000

Hopefully the plug-ins and classes I write are simple enough to figure out and manipulate. Its an extremely simple and customizable little testimonial rotator that also supports HTML. So yes your quotes can have links, logos or even avatars. It will support as many quotes or testimonials you may need. The options that can be set are speed (number), json (JSON file URL), and what quote you want to start from (number).

If you have any feature requests, questions, or issues please drop me a comment and I would love to help you out. Here are the details and usage for each of the particular frameworks.

jQuery

$('#container').quotator();

MooTools

var myQuotes = new Quotator('container');

The JSON

By default it looks for a file called quotes.js which is a simple JSON file that looks something like this:

{"quotes":
[{
"quote" : "Quote 1",
"author" : "Author 1"
},{
"quote" : "Quote 2",
"author" : "Author 2"
}]}

Demo and Download

You can see it in action here.
Download a zip for jQuery here.
Download a zip for MooTools here.