Skip to content

Instantly share code, notes, and snippets.

Avatar
💩
@sonos is garbage

Steven Black StevenBlack

💩
@sonos is garbage
View GitHub Profile
@StevenBlack
StevenBlack / filledIn.js
Created Jan 31, 2010
jqueyt.filledin.js
View 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 ){
@StevenBlack
StevenBlack / jquery.headersAboveBelow.js
Created Mar 15, 2010
:headerBelow and :headerAbove
View 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;
View 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>
View 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>
View 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.
@StevenBlack
StevenBlack / roundCorner.js
Created Apr 9, 2010
Round corners plugin
View roundCorner.js
/*
Rounded-corners plugin.
Origin: http://css-tricks.com/jquery-css-abstraction/
Usage:
$(function() {
$("p").roundCorner('50px');
});
View 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' );
View 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];
@StevenBlack
StevenBlack / jquery-tmpl comment by BorisMoore
Created Jun 29, 2010
jquery-tmpl comments by BorisMoore
View 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
@StevenBlack
StevenBlack / scrollbarWidth.js
Created Sep 27, 2010
Calculate scrollbar width
View 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);