joecritch

/* 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? */

joecritch

// 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

var productGallery = $('.productGallery');
	if(productGallery.length) {
		(function() {
			
			// Define some dynamics and cache selectors
			
			var largeContainer = productGallery.find('.caraLarge').eq(0),
				thumbContainer = productGallery.find('.caraThumbs').eq(0),
				currentIndex = 0,
				prev = productGallery.find('.prev').eq(0),

joecritch

/**
 *
 * jQuery Tools / Scrollable **Lockable** Plugin
 * @author Joe Critchley, Motionlab Marketing Ltd.
 *
 */
 
(function($) {		

	var t = $.tools.scrollable; 

joecritch

/// This...

if(featuredItems.filter(':animated').length) {
  return false;
}

/// ... is twice as fast as this...

featuredItems.each(function() {
  if($(this).is(':animated')) {

joecritch

/** -------------------------------------
 * 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

#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

// 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

/* Author: Joe Critchley
oCanvas Experiments
*/

var canvas = oCanvas.create({
	canvas: '#canvas',
	background: '#222',
	fps: 60
});

joecritch

(function($) {

// The plugin will go here

}(jQuery);