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 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.

The JavaScript Blog » Plugins