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

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

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

<?php
    	if ( !is_admin() ) wp_deregister_script('jquery');
?>

jQuery won’t be linked anymore. Writing this post has made me start wondering if I should write a more detailed post about WP_Scripts to show how to create dependancies and registering your own scripts. Any interest?

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.

WTFramework is a dead simple, and well designed way to detect which framework a site is using as well as version. Being primarily a JavaScript developer I was always looking through the source to find which framework a certain site was using. Or to see if the developer had done something particularly cool with my favorite framework MooTools.

It was developed by Oskar Krawczyk and is implemented as a bookmark for any A grade browser. You simply drag it into your bookmarks bar and its installed. You can now use it on any site you visit. The notifications are “Growl” like and are very well designed.

Kudos to Oskar on this one, a dead simple, but time saving tool.

Installation

1. Visit The Site
2. Drag the big red icon into your bookmarks.
3. It is now installed.

Fortunately For Us

Oskar has a public Git Hub repository for this. So if needs be you can change it to suit your needs.

Gallery

Usage

JavaScript

var ajax_request = new Request(
{
	onSuccess: function(responseText, responseXML)
	{
		$('message').set('html', responseText);
	}
});

$$('.ajax').each(function(item){
	var url = item.get('href');
	item.addEvent('click', function(event){
		ajax_request.options.url = url;
		ajax_request.send();
		return false;
	});
});

HTML

Sent Via AJAX
Also Sent Via AJAX
I am filled with the results of our AJAX requests.

Its incredibly simple so no demo for this. The important concept here is that we are using the same request and pulling the href attribute base on a class selection. So changing something from AJAX to regular is as easy as adding or removing the class “ajax”. Pretty cool eh?