Steven Black StevenBlack

## filledIn.js
/**
jQuery custom selector that filters for input elements that have values, are checked, or are selected.
Usage:
  // Count the number of input items that are filled-in
  $(":filledIn").length;
*/

( function( $ ){
  // custom selector determines if an element is filled-in, checked, or selected.
  $.expr[":"].filledIn = function( a ){

## jquery.headersAboveBelow.js
// jQuery custom selectors for headers above (lower <h> tag) or below (higher <h> tag) given an arbitrary level
(function( $ ) {
  $.extend($.expr[':'],{
    // selects all the headers below the passed index.  So 2 matches <h3>, <h4>, <h5>.
    headerBelow: function( elem, i, match ) {
      if ( /h\d/i.test( elem.nodeName ) )  {
        var level= parseInt( match[ 3 ], 10 ) + 1,  str = "h["+ level +"-5]", re = new RegExp( str, "i" ), ret ;
        return re.test( elem.nodeName );
      }
      return false;

## jQuery-UI page template
<!DOCTYPE html>

<html lang="en">
<head>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" />
	<style>
    body{ font: 75% "Trebuchet MS", sans-serif; margin: 50px;}
	</style>
</head>
<body>

## jQuery page template
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

## jquery.pluginOutline.js
// Skeleton jQuery plugin

function($)
{
	$.fn.myPlugin = function( options )
	{
		// options.
		$.fn.myPlugin.settings = $.extend( {}, $.fn.myPlugin.defaults, options );

		// Go through the matched elements and return the jQuery object.

## roundCorner.js
/*

  Rounded-corners plugin.
  Origin: http://css-tricks.com/jquery-css-abstraction/
  Usage:

  $(function() {
    $("p").roundCorner('50px');
  });

## jquery.specialEvents.Example.js
// Special events
(function($){

  // Special event definition.
  $.event.special.click = {
    setup: function() {
      // This is only done the first time a "click" event handler is bound,
      // per-element.
      $(this).css( 'cursor', 'pointer' );


## jquery.between.js
// Source: http://www.ferretarmy.com/2010/05/10/extending-jquery-selectors-between/

$.expr[':'].between = function(
    objNode,
    intStackIndex,
    arrProperties,
    arrNodeStack)
{
    var args = arrProperties[3].split(",");
    var startSelector = args[0];

## jquery-tmpl comment by BorisMoore
A template context corresponds to an instance of a rendered template, in the HTML DOM. It has fields:
 'data' - the data item that was rendered using the template,
 'tmpl' - the template that was used, 'nodes' - the HTML elements that were created and were inserted into the DOM,
 'parent' - the parent template context, in the case of nested templates, e.g. using the {{tmpl }} tag.

tmplcmd provides the following commands:
'update' - re-render the template. The data, tmpl, or expandos on the template context, may have been modified, so the resulting HTML may be different than the previously rendered HTML. - Use update(ctx) to update (i.e. refresh/render the HTML in the DOM) a template context 'ctx' - or update(dataItem, contexts) to find the template context within an array 'contexts' that corresponds to that dataItem, and update that one. - You can also pass an array of contexts or data items as first parameter, and update them all at once.

'remove' - removes the rendered elements from the DOM. - Use remov

## scrollbarWidth.js
// from http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
function scrollbarWidth() {
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
    // Append our div, do our calculation and then remove it
    $('body').append(div);
    var w1 = $('div', div).innerWidth();
    div.css('overflow-y', 'scroll');
    var w2 = $('div', div).innerWidth();
    $(div).remove();
    return (w1 - w2);
	/**
	jQuery custom selector that filters for input elements that have values, are checked, or are selected.
	Usage:
	// Count the number of input items that are filled-in
	$(":filledIn").length;
	*/

	( function( $ ){
	// custom selector determines if an element is filled-in, checked, or selected.
	$.expr[":"].filledIn = function( a ){
	// jQuery custom selectors for headers above (lower <h> tag) or below (higher <h> tag) given an arbitrary level
	(function( $ ) {
	$.extend($.expr[':'],{
	// selects all the headers below the passed index. So 2 matches <h3>, <h4>, <h5>.
	headerBelow: function( elem, i, match ) {
	if ( /h\d/i.test( elem.nodeName ) ) {
	var level= parseInt( match[ 3 ], 10 ) + 1, str = "h["+ level +"-5]", re = new RegExp( str, "i" ), ret ;
	return re.test( elem.nodeName );
	}
	return false;
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" />
	<style>
	body{ font: 75% "Trebuchet MS", sans-serif; margin: 50px;}
	</style>
	</head>
	<body>
	// Skeleton jQuery plugin

	function($)
	{
	$.fn.myPlugin = function( options )
	{
	// options.
	$.fn.myPlugin.settings = $.extend( {}, $.fn.myPlugin.defaults, options );

	// Go through the matched elements and return the jQuery object.
	/*

	Rounded-corners plugin.
	Origin: http://css-tricks.com/jquery-css-abstraction/
	Usage:

	$(function() {
	$("p").roundCorner('50px');
	});
	// Special events
	(function($){

	// Special event definition.
	$.event.special.click = {
	setup: function() {
	// This is only done the first time a "click" event handler is bound,
	// per-element.
	$(this).css( 'cursor', 'pointer' );
	// Source: http://www.ferretarmy.com/2010/05/10/extending-jquery-selectors-between/

	$.expr[':'].between = function(
	objNode,
	intStackIndex,
	arrProperties,
	arrNodeStack)
	{
	var args = arrProperties[3].split(",");
	var startSelector = args[0];
	A template context corresponds to an instance of a rendered template, in the HTML DOM. It has fields:
	'data' - the data item that was rendered using the template,
	'tmpl' - the template that was used, 'nodes' - the HTML elements that were created and were inserted into the DOM,
	'parent' - the parent template context, in the case of nested templates, e.g. using the {{tmpl }} tag.

	tmplcmd provides the following commands:
	'update' - re-render the template. The data, tmpl, or expandos on the template context, may have been modified, so the resulting HTML may be different than the previously rendered HTML. - Use update(ctx) to update (i.e. refresh/render the HTML in the DOM) a template context 'ctx' - or update(dataItem, contexts) to find the template context within an array 'contexts' that corresponds to that dataItem, and update that one. - You can also pass an array of contexts or data items as first parameter, and update them all at once.

	'remove' - removes the rendered elements from the DOM. - Use remov
	// from http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
	function scrollbarWidth() {
	var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
	// Append our div, do our calculation and then remove it
	$('body').append(div);
	var w1 = $('div', div).innerWidth();
	div.css('overflow-y', 'scroll');
	var w2 = $('div', div).innerWidth();
	$(div).remove();
	return (w1 - w2);