boedesign - canadian based web developer eh

Using Delegate and Undelegate in jQuery 1.4.2

Jordan Boesch — Fri, 05 Mar 2010 14:13:51 +0000

View the article at http://www.learningjquery.com/2010/03/using-delegate-and-undelegate-in-jquery-1-4-2

Hijacking JavaScript/jQuery methods

Jordan Boesch — Sat, 13 Feb 2010 17:13:05 +0000

Some people often wonder: “Hey, when a user calls $(’body’).css(’background’, ’something-awesome’); is there a way I can run some code before that happens?”. The answer is yes and it’s not very hard to do. If there is a name for this technique, I’m not aware of it so I’m just going to call it “hijacking”.

UPDATE: I have an expanded version of this technique. It includes a destroy() method to restore the original function/method. Check out the gist on github.

The process would be to create a function that returns the method along with some custom arguments that have been tampered with (scary, I know). Here is something basic to achieve this effect:

jQuery.fn.css = (function(_jQueryCSS){
 
	return function(){
		// Run some custom code here and alter the arguments passed in
		return _jQueryCSS.call(this, arguments);
	}
 
})(jQuery.fn.css);

This technique has been done before by other developers. James Padolsey implements this technique in his cross-domain-ajax plugin and over-writes the jQuery.ajax method.

Normally I would stay clear of methods under another namespace (Don’t modify objects you don’t own -Nicholas Zakas) but sometimes it makes sense to over-write them to add your own custom bits like in James’ case (just be careful , he’s not hurting the current functionality of jQuery.ajax, he’s simply augmenting it. I’ve created a simple function to handle this type of hijacking.

The hijack function

/**
* Allows you to alter with arguments before the method is actually called
* @param {Function} method A method/function to call after doing some tampering
* @param {Function} cb A callback that is passed the arguments for you to play with
*/
function hijack(method, cb){
 
	// A function needs to be passed or there will be hell to pay
	if(Object.prototype.toString.call(cb) !== "[object Function]"){
		throw new Error('An anonymous function must be passed as the second parameter!');
	}
 
	return function(){
 
		// Turn arguments into a true array
		var args = Array.prototype.slice.call(arguments);
 
		// Call the copied method and pass it some 'tampered' arguments from our callback
		return method.apply(this, cb.call(this, args) || args);
 
	};
 
}

Usage

Here is a simple use-case of how you would hijack the CSS method in jQuery.

// Hijack the CSS method in jQuery
jQuery.fn.css = hijack(jQuery.fn.css, function(user_args){
 
	// Now store the arguments passed in by the user
	var args = user_args;
 
	// Do some checking and alter the arguments
	if(args[0] == 'background' && args[1] == 'this-will-be-replaced-with-green'){
		args[1] = 'green';
	}
 
	return args;
 
});

So now when I call:

$('body').css('background', 'this-will-be-replaced-with-green');

It will run through my hijacked function and replace ‘this-will-be-replaced-with-green’ with ‘green’. And voila, your background is green.

JavaScript: Configs for Different Environments

Jordan Boesch — Fri, 22 Jan 2010 04:41:49 +0000

When you’re developing a website, you typically have a development version of the site running locally (localhost), a staging version and a production version. Normally you would set up something that would automatically grab the necessary settings to use for that specific environment.

Here’s what my CakePHP’s config/database.php file looks like (PHP4 unfortunately). You’ll notice I have a set of options for my development environment ($dev) and one for my production environment ($prod). You’ll notice that when new DATABASE_CONFIG() is called, the __contruct method will fire and set $this->default to the appropriate environment that we’re in. It does this by checking to see if the domain that we’re on is the production domain.

class DATABASE_CONFIG {
 
	var $default = array(); // overridden
 
	// debugging enabled - development site
	var $dev = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'localhost',
		'port' => '',
		'login' => 'root',
		'password' => 'root',
		'database' => 'polly_pocket',
		'schema' => '',
		'prefix' => '',
		'encoding' => ''
	);
 
	// debugging disabled - live site
	var $prod = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'localhost',
		'port' => '',
		'login' => 'root',
		'password' => 'asodij390284niusofdiuh3823_SUPER_SECURE!!!',
		'database' => 'polly_pocket',
		'schema' => '',
		'prefix' => '',
		'encoding' => ''
	);
 
	function __construct(){
 
		$this->default = (str_replace('www.', '', $_SERVER['HTTP_HOST']) == 'prod-live-site.com') ? $this->prod : $this->dev;
 
	}
 
}

I’m sure there is a simpler way of doing this, maybe merging in the necessary key/values with array_merge instead of re-writing the entire array – but you get the idea.

Now I want to talk about accomplishing the same sort of idea but with JavaScript. I recently had to work on a project that was largely front-end. Different configurations had to be used for different environments. Here is what I came up with:

/**
* Fire it up and set options
* @constructor
*/	
var SiteName = function(){
 
	/**
	* We check the config host to load in and over-write the default settings
	* @private
	*/
	function setOptions(){
 
		var clean_host = (window.location.hostname).replace(/www./, '');
		if(config[clean_host] && typeof(config[clean_host]) === 'object'){
			this.opts = jQuery.extend({}, config.default, config[clean_host]);
		}
 
	}
 
	/**
	* Here is where we define our default set of options and our options to be merged/over-written with
	* options specific to the host name
	* @private
	*/
	var config = {
		"default" : {
			cache: true,
			backgroundAnimated: true,
			allowIE6Users: false,
			blowUpMachineIfIE6User: true,
			storeURL: '',
			blogURL: ''
		},
		"localhost" : {
			backgroundAnimated: false,
			blogURL : "http://localhost/blog",
			storeURL: "http://localhost/store"
		},
		"prod-live.com" : {
			blogURL : "http://prod-live.com/blog",
			storeURL : 'http://store.prod-live.com/main'
		}
	};
 
	/**
	* Once the configs are merged from setOptions, it puts it in this new clean options object
	* @public
	*/
	this.opts = {};
 
	setOptions.call(this);
 
}
 
var MySite = new SiteName();
console.log(MySite.opts);

All this is doing is running a check to see if the config exists for the domain that we’re on and if so, merge it with the defaults. It’s important to note that this technique uses jQuery’s extend method. If we are on the localhost domain then our SiteName.opts will look now like this:

{ 
	cache: true,
	backgroundAnimated: false,
	allowIE6Users: false,
	blowUpMachineIfIE6User: true,
	blogURL : "http://localhost/blog",
	storeURL: "http://localhost/store"
}

I’m sure storing config in an XML file and parsing it would be a logical approach as well. I’m open to any suggestions and thoughts on this approach.

Keystrokes for jQuery

Jordan Boesch — Wed, 30 Dec 2009 21:34:11 +0000

Background

First off, I hope everyone had fun over the holidays – I certainly did! With the release of jQuery 1.4 ~~jQuery 1.4 on the horizon for early in the new year~~, I decided I wanted to try out some of its new functionality. I’ve been reading blogs of some of the jQuery core developers and I found a post by Brandon Aaron to be very interesting. He talks about adding custom events to jQuery using its special event API. So I started making my custom event plugin and then realized that you could not bind the event to the same element twice. Meaning, you can’t do this:

$(document).bind('myevent', { data: ['some data'] }, function(event){ });
$(document).bind('myevent', { data: ['more data'] }, function(event){ });

So I tried using namespaces and it still would only fire the first event bind, not the second. Wow, what a drag. Then I found that Brandon wrote a new article about two new methods that were added to the custom event hook: add and remove . They both get fired on an event “bind” and “unbind” – perfect! Uh oh, these two methods are not available in the latest stable release of jQuery (1.3.2). They are only available in the release of jQuery 1.4! So yes, unfortunately, you have to upgrade to jQuery 1.4.2 (or greater) to use this plugin.

What is Keystrokes? (Hot keys)

Keystrokes is a jQuery plugin that can capture a sequence of keys that are pressed. It would come in pretty handy if you were doing a web application and wanted to allow the users to use hot keys. It can even detect combo keys like ’shift+ctrl’. It would operate exactly as you type it. In this case, the user would hold down shift, hit ctrl and the event you specified would fire.

This plugin has been tested in: Firefox 3.5, Safari 4, Opera 10 and IE 7+. It might work in IE 6 but I’m not promising anything.

Download It! (v2.0)

Demo It!

Setting it up

Make sure these are in the head of your document

Adding a basic event

$(document).bind('keystrokes', {
	// The key pattern you set your element to listen for
	keys: ['i', 'p']				
}, function(event){
	// Throw a notification to the user what keys they successfully typed
	alert('You typed : ' + event.keystrokes.stack_item.keys.join(', ') + '');
 
});

If this is done correctly, when the user hits i then p, you will get an alert notification. See the demo page for a full the full effect.

Adding a basic event that unbinds itself upon successful key strokes

$(document).bind('keystrokes.SingleItem', {
	// The key pattern you set your element to listen for	
	keys: ['m', 'arrow down+r']		
}, function(event){
	// Unbind this event after it's been successfully typed
	$(this).unbind(event.keystrokes.stack_item.name);
	alert('You typed : ' + event.keystrokes.stack_item.keys.join(', ') + '.  You cannot type it again because it has been unbound!');
});

Adding a more complex notification that contains multiple key sets

$(document).bind('keystrokes.OtherNameSpace', [		
	{
		// Define typed keys in sequence
		keys: ['h', 'shift+p+o'],
		// If false, this will not execute the main callback, only the "success" callback on this stack item
		proceedToMainCallback: false,
		// The callback bound to this specific stack item
		success: function(event){
			alert('You typed : ' + event.keystrokes.stack_item.keys.join(', ') + '.  This has "proceedToMainCallback: false" so it will not call the main callback for this bound event.');
		}
 
	},
	{
		// Define typed keys in sequence
		keys: ['j', 'k'],
		// The callback bound to this specific stack item
		success: function(event){
			alert('You typed : ' + event.keystrokes.stack_item.keys.join(', ') + '');
		}
	},
	{
		// Define typed keys in sequence
		keys: ['arrow up+comma+k', 1, 2, 3],
		// The callback bound to this specific stack item
		success: function(event){
			alert('You typed : ' + event.keystrokes.stack_item.keys.join(', ') + '');
		}
	}			
// The main callback that gets called with every successful key sequence
// This can be skipped by setting 'proceedToMainCallback: false' as an option in a stack item
], function(event){	
		// Maybe get the whole stack.. if you want?
		var stack = event.keystrokes.stack;
		// Get the specific stack item that was successfully typed
		var data_keys = event.keystrokes.stack_item.keys.join(', ');
		// Shout it out!
		alert('This is the main callback for selected successful keystrokes. To skip this call, just set "proceedToMainCallback: false" in your stack item:  ' + data_keys);
 
	}
);

Key set options

Below is a list of all possible options that go with a key set.

Key	Default Value	Type	Description
keys	[] (required)	Array	The specified key sequence you wish to listen for. Example: ['shift+ctrl', 'o', 1, 5, 'space']
customValidation	null	Function	You can run your own validation and decide whether the user completed the key sequence the way you wanted them to. See the demo for an example.
success	null	Function	If you are using an array of key sets as seen in the advanced example, you can specify a callback unique to that key set.
proceedToMainCallback	true	Boolean	If you’ve specified a ’success’ callback (see above) and you don’t want to have the main callback executed, set this to false. This is more commonly used in the advanced example.

String list

Below is a table of all possible key strings you can enter in your keys array.

Key Code	String
8	backspace
9	tab
13	enter
16	shift
17	ctrl
18	alt
19	pause/break
20	caps lock
27	escape
33	page up
32	space
34	page down
35	end
36	home
37	arrow left
38	arrow up
39	arrow right
40	arrow down
44	print screen
45	insert
46	delete
48	0
49	1
50	2
51	3
52	4
53	5
54	6
55	7
56	8
57	9
59	semi-colon
61	add
65	a
66	b
67	c
68	d
69	e
70	f
71	g
72	h
73	i
74	j
75	k
76	l
77	m
78	n
79	o
80	p
81	q
82	r
83	s
84	t
85	u
86	v
87	w
88	x
89	y
90	z
91	left window key
92	right window key
93	select key
96	numpad 0
97	numpad 1
98	numpad 2
99	numpad 3
100	numpad 4
101	numpad 5
102	numpad 6
103	numpad 7
104	numpad 8
105	numpad 9
106	multiply
107	add
109	subtract
110	decimal point
111	divide
112	f1
113	f2
114	f3
115	f4
116	f5
117	f6
118	f7
119	f8
120	f9
121	f10
122	f11
123	f12
144	num lock
145	scroll lock
182	my computer (multimedia keyboard)
183	my calculator (multimedia keyboard)
186	semi-colon
187	equal sign
188	comma
189	dash
190	period
191	forward slash
192	tilde
219	open bracket
220	back slash
221	close bracket
222	single quote
224	command

You can also add/modify to the string list by adding this line above your event calls:

// Simply supply the key code and the string you wish to use.
$.extend($.event.special.keystrokes.codes, { 13 : 'my enter key' });

If you have something like Firebug and you want to do some debugging, you can add this line above your event calls:

$.event.special.keystrokes.debug = true;

Now, if you open up your console, you will be able to see what keys the script thinks you’re typing. If you hit a key that’s not registered in our string list, it will output that key code to the console and notify you. This makes it easy for you to do your own customizations.

By default, Keystrokes ignores when you’re typing keys in any input/textarea field. If you want to track keys on an input field you have to bind it directly to that input element.

Dissecting jQuery.noConflict

Jordan Boesch — Mon, 07 Dec 2009 07:57:33 +0000

Most jQuery users love it for its easy CSS selectors, DOM manipulation and slick effects. We don’t normally think about what happens behind the scenes when we call our favorite jQuery methods, we just naturally expect they work as desired.

I’m going to start off my dissecting and explaining a relatively simple method called noConflict. If you want to follow along you can download a development copy of jQuery. As of this post, we’re using version 1.3.2.

Open up the file and go to line 19. You’ll see the code below

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
 
jQuery = window.jQuery = window.$ = function( selector, context ) {
	// The jQuery object is actually just the init constructor 'enhanced'
	return new jQuery.fn.init( selector, context );
},

Right away you’ll notice that 2 variables are created with an underscore, this is to hold a reference to the old namespaces that might be in use. For example, if we load the Prototype JavaScript framework before jQuery, it uses the $ function, so jQuery makes a copy of that reference before it over writes it with it’s own below. Now if we ever want to get back to the Prototype $ reference, we can get at it with the _$ variable.

Note: If you load the jQuery library before Prototype, there is no need to call noConflict(). But you will have to set up a new way to target elements – see below.

This now brings us to the noConflict method. If you go to line 619 you’ll see our lovely method:

noConflict: function( deep ) {
	window.$ = _$;
 
	if ( deep )
		window.jQuery = _jQuery;
 
	return jQuery;
},

Remember that _$ variable that get’s set at the top of the jQuery file? There it is! If you remember, we copied an existing $ reference (Prototype) into the _$ variable to get at it later if we wanted. In this method we return the $ sign to it’s owner, which in this case is the Prototype $ function. It’s set by the line that says window.$ = _$. We use the window prefix to reference the global namespace. Now we want our $ function back so we can use it for Prototype, you can do this by calling the noConflict() method:

jQuery.noConflict();
$('someid').hide(); // The $ function is now using Prototype to target elements
jQuery('#someid').hide() // The jQuery function is used instead of the $ function

But I hate typing jQuery each time I target some elements, what can I do? Simple. Since the noConflict() method returns the jQuery object, we can store that in a variable.

var jQ = jQuery.noConflict();
$('someid').hide(); // The $ function is now using Prototype to target elements
jQ('#someid').hide() // The jQ function after we set it above

The noConflict() method also accepts one boolean parameter called deep. For the most part, this does not need to be set unless you’re working in a high conflict environment. For example, you might have 2 versions of jQuery running or something else using the jQuery namespace (god I hope not). That might be grounds for setting the deep parameter to true. For example you could move the jQuery object to an entirely new namespace:

<script type="text/javascript" src="js/jquery-1.3.1.js">script>
<script type="text/javascript" src="js/prototype.js">script>
<script type="text/javascript" src="js/jquery-1.3.2.js">script>
var myNamespace = {};
myNamespace.query = jQuery.noConflict(true);
myNamespace.query('#my-id-with-new-version-of-jquery'); // This will execute using jQuery 1.3.2
jQuery('#my-id-with-old-version-of-jquery'); // This will execute using jQuery 1.3.1
$('my-id-with-prototype'); // This will execute using Prototype

View the the demo I made of jQuery.noConflict(true) in action.

Serverside JavaScript Minifying

Jordan Boesch — Wed, 02 Dec 2009 10:52:20 +0000

JSMIN is a JavaScript minifying library that was founded by Douglas Crockford. Minifying is the act of taking your JavaScript code and stripping out unneeded white space and comments to reduce file size. Douglas Crockford offers a set of packages in common server side languages to accomplish this – whether it be PHP, Python or Java. It’s important to note that there are other JavaScript compression and compiling tools out there, I am just giving an example of one that I use frequently.

I’m going to show you what I’ve done with the PHP package of JSMIN.

If you download the PHP package you’ll see how to use is simple:


require 'jsmin-1.1.1.php';
echo JSMin::minify(file_get_contents('example.js'));
?>

Brilliant! It will output a bunch of ugly code right? Well who cares if it’s ugly, it’s only for production. What I wanted to do with this is have something that takes multiple JavaScript files, minifies them and then outputs it to 1 JavaScript file that’s all tightly bundled. Here’s how to do that.

First, you’ll want to make sure that the jsmin-1.1.1.php class is included. Then write a function to handle the minifying of multiple JavaScript files.


/********************************************
* Handle an array of JavaScript files, minify them and output them into 1 file.
* @param string $final_file The path to the final JavaScript file that will contain all minified contents
* @param array $js_files The array of JavaScript files to minify
* @return string The script tag including the path to the final JavaScript file
*/
function drawMinJS($final_file, $js_files){
 
	$contents = '';
	foreach($js_files as $src){
		// We use a semicolon at the end to safely separate the files
		$contents .= JSMin::minify(file_get_contents($src)) . ';';
	}
	$str = '';
	file_put_contents($final_file, $contents);
 
	return $str;
 
}
?>

Then put the snippet below where ever you would like the script tag to appear. Sometimes people put it in the of the document and sometimes right before the


// Not to worry, this outputs the actual

To initiate jSquares simply wrap it in the jQuerys document ready function like so.

<script type="text/javascript">
$(document).ready(function(){
	$('#js-container').jsquares();
});
script>

The default chunk of HTML will look something like this:

	
			
		
		
			Howlla at cha boy!
		
		
			You can't hide from wolf boy.
			
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elementum arcu non orci fermentum nec suscipit neque dignissim... Read more »

Optional parameters

Parameters can be added when you call jsquares like so:

$('#js-container').jsquares({ 
	shuffle_in: false, // have the pictures all fade in on page load?
	fade_on_hover: false, // do we want the images to fade on hover or just change opacity?
	caption_slide_down: false // do we want the caption to slide down or just appear?
});

Here’s a list of all of the options it can take:

Key	Default Value	Type	Description
image	.js-image	String	The target element holding all of the info (image/caption). View the source of the demo for a better understanding.
caption	.js-small-caption	String	The target element holding the caption. This element is found within the element specified as js_image.
caption_overlay_spacing	12	Integer	This is the padding on the caption that pops up on hover.
caption_width	400	Integer	This is the width of the caption that pops up on hover.
caption_height	130	Integer	This is the height of the caption that pops up on hover.
fade_to	.3	Integer \| Float	This is the opacity that you want the images/captions to fade to when you roll over an image.
fade_start	1	Integer \| Float	This is opacity that images/captions are sent back to after you roll off the image set. This normally shouldn’t be altered.
shuffle_in	true	Boolean	By default the images will shuffle in (fade in) randomly. If you don’t want any effects and to have them just appear, change this to false.
shuffle_in_speed	130	Integer	If js_shuffle_in is set to true, you can set the speed in which images appear one after the other.
fade_on_hover	true	Boolean	By default the images fade to a value set by js_fade_to, if you just want them to change opacity then change this to false.
caption_slide_down	true	Boolean	The caption has a slide down effect when you hover over an image. If you just want it to appear instead of sliding down, change this to false.
caption_slidedown_speed	fast	String \| Integer	If the option key js_caption_slide_down is set to true, you can change the speed that it slides down at.

Any comments/suggestions are definitely encouraged. Enjoy!

Auto-activate widgets in WordPress MU

Jordan Boesch — Sat, 15 Aug 2009 16:45:36 +0000

I was recently involved in a project where it was required that each time you add a new blog on WordPress MU, that it automatically assigns a set of default widgets and activates all the plugins. Finding a plugin that activates all plugins on blog creation was easy, there’s one out there called Plugin Commander and it’s awesome – you can also mass activate and deactivate plugins on all your blogs.

After some googling for a widget activation plugin I came across this forum. The people seemed to know the hooks and calls to activate widgets but of course I ran into problems – mainly with widget ids.

Here is the code I had in my theme/functions.php file:

// Can we register sidebars?  Hopefully!
if(function_exists('register_sidebar')){
        // Give your sidebar a unique id and a name, the name will display in the WP control panel
        register_sidebar(array('id' =>'my-sidebar', 'name' => 'My Sidebar'));
}
// We'll want to assign widgets to the sidebar
if(function_exists('register_sidebar_widget')){
        // Give your widget a name and provide a callback function
        register_sidebar_widget('My Calendar', 'widget_my_calendar');
}
// Our callback from the calendar widget above
function widget_my_calendar(){
        echo 'This is my calendar widget being outputted to sidebar.php
';
}

Then I found out that to automatically register these widgets to a sidebar on blog creation, that you need to know their unique widget id. I then had a peek in the database in “wp_options”, browsed by “option_name” and found “widget_my-calendar”. WordPress automatically generated a slug for me based on my widget title “My Calendar”. Now I was kind of iffy about that since it’s obviously better to provide your widget with an id, that way you know how to target it automatically via WordPress’ built-in “update_option” function.

I did some quick searching through the WordPress core files and saw where it was generating the slug. I had then seen that it returns an generated slug (id) along with params from “register_sidebar_widget” to “wp_register_sidebar_widget“… DUH! So the wp_register_sidebar_widget function actually lets you pass your id as the first parameter – awesome.

Enough of my blabbering – here’s the plugin I came up with for auto-activating widgets:

// Put this in wp-content/mu-plugins/auto-widget-activate.php
/*
Plugin Name: Auto-assign widgets to blog
Version: 1.0
Plugin URI: http://boedesign.com/2009/08/15/auto-activate-widgets-in-wordpress-mu
Author: Jordan Boesch
Author URI: http://boedesign.com
Description: When you create a new blog on MU, have it automatically assign widgets.
*/
 
define('WIDGET_INFO', serialize(array(
    'sidebar' => array('id' => 'my-sidebar', 'name' => 'My Sidebar'),
    'widgets' => array(
        'my-subscribe',
        'my-search',
        'my-calendar',
        'my-poll',
        'my-recent-comments',
        'my-more-blogs',
        'my-categories'
    )
)));
 
// Everytime you create a new blog, enable all the widgets.
function add_default_widgets($blog_id)  {
 
    $widget_info = unserialize(WIDGET_INFO);
 
    // We are simply putting the widgets into the table when a blog is created
    foreach($widget_info['widgets'] as $widget_id){
        update_option('widget_' . $widget_id, array());
    }
 
    // Tell what sidebar to have what widgets
    update_option('sidebars_widgets', array($widget_info['sidebar']['id'] => $widget_info['widgets']));
 
    return;
 
}
 
// Call the populate_options action on blog creation
add_action('populate_options', 'add_default_widgets');

Now that you’ve inserted them into the database on blog creation, you need to provide their callbacks and output.
Put the following code in the functions.php file (theme directory).

// All widget info is set in wp-content/mu-plugins/assign_widgets.php
$widget_info = unserialize(WIDGET_INFO);
 
// This needs to be called to tell WP that we want to use widgets for this theme
if(function_exists('register_sidebar')){
   register_sidebar(array('id' => $widget_info['sidebar']['id'], 'name' => $widget_info['sidebar']['name']));
}
 
// Our own custom widgets with callbacks
if(function_exists('wp_register_sidebar_widget')){
 
    foreach($widget_info['widgets'] as $widget_id){
        // first param is our widget id, second param is a humanized version of the widget id (My Calendar) and the third param is the function that we call to display the widget
        wp_register_sidebar_widget($widget_id, ucwords(str_replace('-', ' ', $widget_id)), 'widget_' . str_replace('-', '_', $widget_id));
    }
 
}
 
// Now you need to create a function for each widget that you assigned in that array, remember "my-calendar", "my-subscribe" etc?  Those functions will look like this now:
function widget_my_calendar(){
        echo "I'm a calendar widget!
";
}
 
function widget_my_subscribe(){
        echo "I'm a subscribe widget!
";
}

Now put this code in sidebar.php (theme directory) to call your sidebar.

dynamic_sidebar($widget_info['sidebar']['id']);

Happy Mu-ing!

Gritter for jQuery (Growl)

Jordan Boesch — Sat, 11 Jul 2009 23:09:37 +0000

I’ve been hunting for a good jQuery Growl look-a-like plugin for some time, but I just can’t seem to find one that looks the exact same as the one for Mac OS, so like most web dabblers would do, I decided to roll my own.

For those who don’t know what Growl is, it’s basically a notification bubble/popup that appears in the top right of your desktop – examples can be found here. Think of it as calling the alert() function in JavaScript, only it’s not a modal, it’s subtle and it doesn’t look like dog shit.

Download It! (v1.6)

Demo It!

The example above is also included in the download

Note: If you’re wanting to know how to integrate Gritter with CakePHP as a flash message, read this article. It’s in Spanish, I know, but if you’re slightly familiar with CakePHP, the code is what really matters.

Usage

First, make sure the folder structure is in place (images/js/css).

Now add this to the head of your document:



<script type="text/javascript">google.load('jquery', '1.3.2');script>

Adding a simple notification

$.gritter.add({
	// (string | mandatory) the heading of the notification
	title: 'This is a notice!',
	// (string | mandatory) the text inside the notification
	text: 'This will fade out after a certain amount of time.'
});

Adding a more complex notification

$.gritter.add({
	// (string | mandatory) the heading of the notification
	title: 'This is a regular notice!',
	// (string | mandatory) the text inside the notification
	text: 'This will fade out after a certain amount of time.',
	// (string | optional) the image to display on the left
	image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
	// (bool | optional) if you want it to fade out on its own or just sit there
	sticky: false, 
	// (int | optional) the time you want it to be alive for before fading out (milliseconds)
	time: 8000,
	// (string | optional) the class name you want to apply directly to the notification for custom styling
	class_name: 'my-class',
        // (function | optional) function called before it opens
	before_open: function(){
		alert('I am a sticky called before it opens');
	},
	// (function | optional) function called after it opens
	after_open: function(e){
		alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
	},
	// (function | optional) function called before it closes
	before_close: function(e){
		alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
	},
	// (function | optional) function called after it closes
	after_close: function(){
		alert('I am a sticky called after it closes');
	}
});

If you wanted to use the “sticky: true” option but still be able to delete it later, you can create a variable that will hold a unique identifier.

var unique_id = $.gritter.add({
	// (string | mandatory) the heading of the notification
	title: 'This is a sticky notice!',
	// (string | mandatory) the text inside the notification
	text: 'This will not go away until the user has hit the (x) button because sticky has been set to true.',
	// (string | optional) the image to display on the left
	image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
	// (bool | optional) if you want it to fade out on its own or just sit there
	sticky: true
});

Now to delete that specific notification you can call:

$.gritter.remove(unique_id, { 
	fade: true, // optional
	speed: 'fast' // optional
});

To remove all Gritter notifications you can call:

$.gritter.removeAll();

As well as

$.gritter.removeAll({
        before_close: function(e){
		alert("I am called before all notifications are closed.  I am passed the jQuery object containing all  of Gritter notifications.\n" + e);
	},
	after_close: function(){
		alert('I am called after everything has been closed.');
	}
});

If you want you can setup global defaults (optional)

Setting up global defaults is handy if you don’t want to specify a ‘time’ attribute for each $.gritter.add call.

$.extend($.gritter.options, { 
	fade_in_speed: 'medium', // how fast notifications fade in (string or int)
	fade_out_speed: 2000, // how fast the notices fade out
	time: 6000 // hang on the screen for...
});