Skip to content

Instantly share code, notes, and snippets.

😬
Getting pucks deep

Steven Black StevenBlack

😬
Getting pucks deep
Block or report user

Report or block StevenBlack

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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);
You can’t perform that action at this time.