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

So with the help of Jacob O’Neal for the images I created a modified version of Andy Budd’s bookmarklet. You can now turn off the grid by pressing “G”. There is also a white and black version available.

The solid lines represent every 100 pixels. The dotted lines represent every 10 pixels.

To install just drag the below links into your bookmarks bar.

White Grid Black Grid

Note: Due to an immense amount of laziness the toggling is only supported in Webkit.

Ruby on Rails 3 makes huge use of custom attributes using the data-* from the HTML 5 spec. This is a miniature class that will grab all anchor tags with “data-confirm”, pull that attributes value and stop the default event from firing till after they click “Ok”. If they click “Cancel” nothing happens.

John Resig has great post on these custom attributes. You can find it on his blog here.

Usage

JavaScript

var confirmations = new Confirmootion({
     attribute: 'data-confirm'
});

HTML

Google

Demo and Download

View Online Here
Download Here

Let it be known. This class doesn’t have a lot of options but it is fairly dynamic. If people actually use this class I will make it more customizable to the options and not just the class itself.

While this is nothing special and there are plenty of great MooTools graphing systems out there I wanted to build one that animated up and down as well as side to side. I’m sure there are others that do this but I was curious to learn how and dove in. Any advice, tips, improvements, or feedback is greatly appreciated.

Usage

JavaScript

var myGraph = new Grapher('element_id',{
	json : 'json.php',
	total : '100'
});

JSON

The JSON productivity number in this case is based on 100 but this class will support any value. When you initiate your graph you set the total option to calculate the percentage. If you are just comparing to other employees you would take the top sells man and calculate the percentage on a bell curve.

{"graph": [ { "name" : "insert name", "key" : "1", "productivity" : "92" } ] }

CSS

The element container that you pass into the initiating function of this graph will be the total set width for the bars at 100%. Make sure you keep that in mind.

.graph{
	/* This contains everything in a particular object. The name, and the bar.*/
}

.graph_bar{
	/* This is the actual bar the width changes based on the JSON calculated percentage. You need a background image or color to show the bar as well as a height. */
}

.label{
        /* This is just the place the name is inserted. */
}

Demo and Download

Please wait at least 5 seconds to see the graph refresh and animate. These numbers are being dynamically created via PHP into a JSON file.

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

Credits

Big thanks to these guys:

• Gabe Barrientos – Original Idea
• David Walsh – Converting percentage to pixels.

For Example: A company has a page full of images of employees that work for them with links to their Facebook accounts or personal websites. What if I’m not a member of Facebook? What if I prefer following them on Twitter? Or maybe I want all of those options. Well this is where my idea came into play. It works like a right-click menu (sort of). When you click the image a styled menu appears with all of the links available. If you leave the menu fades out and lets you continue browsing as normal. This is completely customizable and style able so please feel free to make it blend with your site.

Usage

JavaScript

var myMultipleLink = new MultipleLinks('element_id',{
	'links' : [
			['url','target','title'],
			['url','target','title'],
			['url','target','title']
	]
});

CSS

.multiple_link{
	/* This is the ul */
}

.multiple_link_item{
	/* This is the actual  li item */
}

Obviously those are injected with the actual anchor tags and those can be selected using standard selectors.

Demo and Download

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

Usage

new Fader(elements);

Parameters and Options

elements: Parameter. This is a CSS selector that will be used to select your items.
fadeTo: Option. This is the decimal value that your item will be faded to. E.G. 0.3
fadeFrom: Option. This is the decimal value that your item will be faded back to. E.G. 1
duration: Option. The speed of the animation in milliseconds. E.G. 250
transition: Option. The transition of the animation. E.G. Fx.Transitions.Sine.easeOut

Demo and Download

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

Usage

new ContentSlider(element, sliderTrack, sliderKnob, options);

Parameters

The element parameter needs to be an element that is wrapped within a viewport div. The viewport div’s width will be what is seen. While the element div’s width will be set using Javascript. In order for this to happen your item_list li element needs to have a set width. While the getSize() method of MooTools works dynamically in Firefox it only counts set properties in Safari and Internet Explorer. Dear MooTools Team, if it is possible please fix this.

The sliderTrack parameter is the background of the slider. The track if you will. It will wrap around the sliderKnob.

The sliderKnob parameter is the actual knob of the slider. The knob or controller needs to have a set width or else it won’t work in Safari or IE.

The option for itemList is very important as well. It takes an ID of an element and is absolutely necessary. By default it looks for a ul tag with and id of ‘item_list’.

Important thing about this class is it absolutely requires that your HTML markup is properly set up. While something with this many variants is difficult to write a blueprint for, I tried anyway. Reason for this is I have seen this done a lot, mostly in jQuery. I wanted to show that the same effect could be done in a reusable manner with minimal code. I hope someone out there is able to use this.

jQuery Users

For those of you who are looking to accomplish this effect in jQuery check this out.

Demo and Download

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

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.