Skip to main content

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Snippet

Trigger Click on Input when Label is Clicked

Labels should have "for" attributes that match the ID of the input they are labeling. This means we can snag that attribute and use it in a selector to trigger a click on the input itself. Assuming of course you have some reason to watch for clicks on inputs.

var labelID;

$('label').click(function() {
       labelID = $(this).attr('for');
       $('#'+labelID).trigger('click');
});
Read article
Snippet

Random Hex Color

Technique #1

<?php 
    
    $rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
    $color = '#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
    
?>

Then echo out the $color value anywhere you need it. For example:

<body style="background: <?php echo $color; ?>;">

Technique #2

<?php printf( "#%06X\n", mt_rand( 0, 0xFFFFFF )); ?>

There is also a JavaScript version. … Read article

Article

Quick Critiques with CritiqueTheSite.com

I made a thing. The idea is to have a super-quick, nearly mindless way to get a critique-based conversation thread going based on any URL. See:

http://critiquethesite.com/css-tricks.com (it works best with big wide monitors, since there is the fixed left comment area, then the entire site to the right)

You could even use a path to an image file for a unique critique on that.

If you want to get notifications for any new comments on your specific URL, just … Read article

Article

Gift Message Printer

We have a client who sells a product in which customers specify a gift message when they check out. The site has been very successful for them and orders are coming faster than expected. The have been hand-writing the notes thus far, which, in nerd words, doesn't scale well.

When I heard about the problem, the obvious solution was to stop handwriting them. Maybe they'll lose some of that homegrown flair, but it's also less weird. This isn't a handwritten … Read article

Video

#84: Site Walkthrough of chris-mcgarry.com

I built a site for a musician friend of mine who is putting out a new album. Clearly having playable tracks is important, but the classic issue of having those tracks stop when a new page is loaded comes up (like Screencast #81). This time instead of using AJAX, all the content on the entire site exists on one page, and things are shuffled around through jQuery animations. The result is a somewhat Flash-like website, but without all the pitfalls … Read article

Article

Child and Sibling Selectors

Do you know what the difference between these selectors are?

ul li { margin: 0 0 5px 0; }
ul > li { margin: 0 0 5px 0; }

I'll admit it took me longer than it probably should have (way back when) when I was learning the basics of CSS. In both cases, they are selecting list items that are children of unordered lists. But there is a difference between children and descendants. … Read article

Article

Why Containers Don’t Clear Themselves

One of the hurdles (and "ah-ha" moments) in learning CSS is this business about clearing floats. If you have no idea what I'm talking about, check out the classic All About Floats.

I specifically want to talk about the issues of "collapsing", that is, how elements that contain floated items don't take those floated items into account in calculating their height. For example a parent element that only contains floated items will have a zero height. This is … Read article

Snippet

jQuery Plugin Template

Replace instances of "yourPluginName" with your actual plugin name. The stuff about "radius" is just an example of an option (parameter to pass plugin).

(function($){
    $.yourPluginName = function(el, radius, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        
        // Add a reverse reference to the DOM object
        base.$el.data("yourPluginName", base);
        
        
Read article
icon-link icon-logo-star icon-search icon-star