Add :nth-of-type to jQuery

$.expr[':']['nth-of-type'] = function(elem, i, match) {
    var parts = match[3].split("+");
    return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};

See the original article for more info on adding the other “of type” selectors.…

Avatar of Chris Coyier
Chris Coyier on

Art and the Web

Direct Link

My buddy Nick Pettit is writing a book called Art and the Web which is going to cover the fundamentals of art (well some of the big ones anyway: Line, Shape, and Form) and how they relate to the web. …

Avatar of Chris Coyier
Shared by Chris Coyier on

Fluid Width YouTube Videos

YouTube now gives you iframe code for embedding videos hosted there onto your own page. This article offers a jQuery JavaScript based solution for making them work in fluid width environments, which they inherently do not.
Avatar of Chris Coyier
Chris Coyier on (Updated on )

Color Animate Any Shape with a Knockout PNG

Using a graphic where the solid parts match the background of a site and the transparent parts make the shape, we can let a background color bleed through. This allows us to set that color through CSS, and do any fancy thing CSS can do, like say animate that color.
Avatar of Chris Coyier
Chris Coyier on

Namespaced Javascript Template

Self invoking anonymous function assigned to the yournamespacechoice global variable. Serves the effect of keeping all functions and variables private to this function. To expose a function or variable we must explictly return it at the bottom of the function. …

Avatar of Chris Coyier
Chris Coyier on

Recent Bits

I was out last week getting my bluegrass festival thing on. I’m just catching up with the ol’ internet and thought I’d recap the interesting bits: …

Avatar of Chris Coyier
Chris Coyier on

#98: Playing with Body Borders

Putting a border around the inside of the browser window is such a simple little idea and can be a nice design effect. But how do we do it so that the borders don’t scroll away as the page scrolls? …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Styling List Markers

Direct Link

Have you ever tried to style the numbers in an ordered list? You end up doing dumb stuff like wrapping the insides in spans, styling the list items, then removing that styling with the span. Or using background images in …

Avatar of Chris Coyier
Shared by Chris Coyier on

Creating a Body Border

A border that goes all the way around the browser window and stays there when you scroll. In this article we cover a few different techniques to get it done, from the deepest browser support to the most progressive.
Avatar of Chris Coyier
Chris Coyier on