Skip to content

Instantly share code, notes, and snippets.

View StevenBlack's full-sized avatar
🇨🇦

Steven Black StevenBlack

🇨🇦
View GitHub Profile
@StevenBlack
StevenBlack / addEvent.js
Created September 27, 2010 20:13
generic addEvent listner
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
@StevenBlack
StevenBlack / scrollbarWidth.js
Created September 27, 2010 13:12
Calculate scrollbar width
// 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);
@StevenBlack
StevenBlack / jquery-tmpl comment by BorisMoore
Created June 29, 2010 15:04
jquery-tmpl comments 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
// 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.specialEvents.Example.js
Created April 10, 2010 01:51
jQuery special events example
// 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' );
@StevenBlack
StevenBlack / roundCorner.js
Created April 9, 2010 22:24
Round corners plugin
/*
Rounded-corners plugin.
Origin: http://css-tricks.com/jquery-css-abstraction/
Usage:
$(function() {
$("p").roundCorner('50px');
});
@StevenBlack
StevenBlack / jquery.pluginOutline.js
Created April 6, 2010 22:41
Skeleton jQuery plugin
// 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 / jQuery page template
Created March 26, 2010 14:21
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>
@StevenBlack
StevenBlack / jQuery-UI page template
Created March 26, 2010 14:20
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>
@StevenBlack
StevenBlack / jquery.headersAboveBelow.js
Created March 15, 2010 17:19
:headerBelow and :headerAbove
// 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;