Skip to content

Instantly share code, notes, and snippets.

View joecritch's full-sized avatar

Joe Critchley joecritch

View GitHub Profile
/* A few random ideas I've just had. Might not actually work. */
/* You know the CURRENT situation (overriding the first one because it's often not applicable)... */
.exampleList > li { margin-left: 100px; }
.exampleList > li:first-child { margin-left: 0; }
/* With a similar level of browser support, this could be achieved by ...*/
.exampleList > li + li { margin-left: 100px; }
/* Or how about negative margins on the parent? */
// Limit character lengths on textareas using jQuery and metadata
// ////////////////////////////
// Store the metadata in data() for quicker access on the event.
var textboxesToLimit = $('textarea.character_limit');
textboxesToLimit.each(function() {
$(this).data('maxlength', $(this).metadata().maxlength);
}).keyup(function() {
var len = this.value.length;
var maxlength = $(this).data('maxlength');
@joecritch
joecritch / super_simple_gallery.js
Created December 1, 2010 10:26
Just a super simple jQuery closure-style gallery that's not a plugin...
@joecritch
joecritch / scrollable.lockable.js
Created December 1, 2010 12:10
Custom jQuery Tools Scrollable plugin for making sure it doesn't pass the end.
/**
*
* jQuery Tools / Scrollable **Lockable** Plugin
* @author Joe Critchley, Motionlab Marketing Ltd.
*
*/
(function($) {
var t = $.tools.scrollable;
@joecritch
joecritch / gist:723632
Created December 1, 2010 15:29
Console profiling test of looping through an array in jQuery to check a property
/// This...
if(featuredItems.filter(':animated').length) {
return false;
}
/// ... is twice as fast as this...
featuredItems.each(function() {
if($(this).is(':animated')) {
@joecritch
joecritch / taco.css
Created December 27, 2010 23:06
The Taco grid system by @joecritchley
/** -------------------------------------
* Taco. By Joe Critchley (@joecritchley)
*/
.c { width: 978px; margin: 0 auto; }
.c .c { margin: 0 -20px; width: auto; }
.g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 { margin-left: 30px; float: left; display: inline; }
.c .c .g1, .c .c .g2, .c .c .g3, .c .c .g4, .c .c .g5, .c .c .g6,
.c .c .g7, .c .c .g8, .c .c .g9, .c .c .g10, .c .c .g11, .c .c .g12 { margin-left: 10px; }
.g1 { width: 54px; } .c .c .g1 { width: 74px; }
@joecritch
joecritch / slantednav.css
Created January 16, 2011 21:12
"A quick example of how to create slanted navigation that uses CSS3 transforms.
#main-nav > ul { overflow: hidden; margin-top: 50px; }
#main-nav > ul > li { float: left; overflow: hidden; padding: 20px; font-size: 18px; margin-left: -35px; }
#main-nav > ul > li:first-child { margin-left: 0px; border-radius: 10px; }
#main-nav > ul > li > a { color: #444; text-decoration: none; overflow: hidden; display: block; -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -webkit-transform: rotate(20deg); background: #bbb; margin-bottom: -100px; margin-top: -70px; height: 150px; border-left: 1px solid white; }
#main-nav > ul > li:first-child > a { border-radius: 10px; border-left: 0; }
#main-nav > ul > li > a > span { overflow: hidden; display: block; -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); padding: 0 20px; margin-top: 57px; }
#main-nav > ul > li > a:hover { background: #aaa; }
#main-nav > ul > li.current > a { background: #000; color: #fff; }
@joecritch
joecritch / fallback-methods.js
Created March 15, 2011 22:03
Just asking which is the better way..
// Method 1 - how i would do it (although i've only used other lazy loaders before)
if(!Modernizr.inputtypes.date) {
yepnope({
load : [
'scripts/jquery.js',
'scripts/jquery-ui.js',
'css/jquery-ui.css',
'scripts/datepicker.js'
]
@joecritch
joecritch / ocanvas-experiment.js
Created March 26, 2011 13:27
Experiments with the new oCanvas library
/* Author: Joe Critchley
oCanvas Experiments
*/
var canvas = oCanvas.create({
canvas: '#canvas',
background: '#222',
fps: 60
});
@joecritch
joecritch / gist:929062
Created April 19, 2011 18:04
Creating a closure
(function($) {
// The plugin will go here
}(jQuery);