jQuery plugin to center an element on the Screen

You can see the power of jQuery plugin below. The following code will extend the jQuery $ and center whatever element you are selecting.

\\ 
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
 
//Use the above function as:
$(element).center();
\\

Note: Not tested in all browsers.

jQuery plugin – Default value for input fields

Default value for input fields
HTML markup
<form action=”#” method=”post”>
name:<input name=”name” type=”text” value=”Always cleared” />
add1:<input name=”add1″ type=”text” value=”clear once” />
</form>

<script src=”JavaScript/jquery-1.3.2.js” type=”text/javascript”></script>
<script src=”JavaScript/jquery.default.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function(){
$(“form input”).defaultValues();
});
</script>
Plugin code

//
// create closure
//
(function($) {
	//
	// plugin definition
	//
	$.fn.defaultValues = function(options) {
		debug(this);
 		// build main options before element iteration
	 	var opts = $.extend({}, $.fn.defaultValues.defaults, options);
 		// iterate and reformat each matched element
	 	return this.each(function() {
			$this = $(this);
   			// build element specific options
   			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
			// use the data function to save the data
			$this.data( "txt", $.trim($this.val()) );
			$this.focus(function(){
				// On focus test for default saved value and if not the same clear it
				if ( $.trim($(this).val()) === $(this).data("txt") ) {
					 $(this).val("");
				}
			}).blur(function(){
				// Use blur event to reset default value in field that have class clear
				// but ignore if class once is present
				if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
					//Restore saved data
					// call our format function
					var markup = $(this).data("txt");
					markup = $.fn.defaultValues.format(markup);
					$(this).val(markup);
				}
			});
 		});
  	};
	//
	// private function for debugging
	//
	function debug($obj) {
		if (window.console && window.console.log)
			window.console.log('count: ' + $obj.size());
	};
	//
	// define and expose our format function
	//
	$.fn.defaultValues.format = function(txt) {
		//return '' + txt + '';
		return txt;
	};
	//
	// plugin defaults
	//
	$.fn.defaultValues.defaults = {
		text: 'Input only alphabets',
		number: 'Input only numbers'
	};
//
// end of closure
//
})(jQuery);

plugin which can list all event handlers for any given element/event

http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Here's a plugin which can list all event handlers for any given element/event:

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

Use it like this:


// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});