Skip to content

Instantly share code, notes, and snippets.

Joe Critchley joecritch

Block or report user

Report or block joecritch

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
View layoutmargins.css
/* 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? */
View limitcharacters.js
// 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 Dec 1, 2010
Just a super simple jQuery closure-style gallery that's not a plugin...
View super_simple_gallery.js
@joecritch
joecritch / scrollable.lockable.js
Created Dec 1, 2010
Custom jQuery Tools Scrollable plugin for making sure it doesn't pass the end.
View scrollable.lockable.js
/**
*
* jQuery Tools / Scrollable **Lockable** Plugin
* @author Joe Critchley, Motionlab Marketing Ltd.
*
*/
(function($) {
var t = $.tools.scrollable;
@joecritch
joecritch / gist:723632
Created Dec 1, 2010
Console profiling test of looping through an array in jQuery to check a property
View gist:723632
/// 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 Dec 27, 2010
The Taco grid system by @joecritchley
View taco.css
/** -------------------------------------
* 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 Jan 16, 2011
"A quick example of how to create slanted navigation that uses CSS3 transforms.
View slantednav.css
#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 Mar 15, 2011
Just asking which is the better way..
View fallback-methods.js
// 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 Mar 26, 2011
Experiments with the new oCanvas library
View ocanvas-experiment.js
/* Author: Joe Critchley
oCanvas Experiments
*/
var canvas = oCanvas.create({
canvas: '#canvas',
background: '#222',
fps: 60
});
@joecritch
joecritch / gist:929062
Created Apr 19, 2011
Creating a closure
View gist:929062
(function($) {
// The plugin will go here
}(jQuery);
You can’t perform that action at this time.