Articles by

Chris Coyier

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

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 …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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 
Avatar of Chris Coyier
Chris Coyier on (Updated on )

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 …

Avatar of Chris Coyier
Chris Coyier on

Loading Dots jQuery Plugin

Loading.... It's a design pattern we've all seen before, because it's just good user feedback. This is a quick jQuery plugin to apply it to any element when called (exactly in the middle of it).
Avatar of Chris Coyier
Chris Coyier on (Updated on )

#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 …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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 …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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'
        
Avatar of Chris Coyier
Chris Coyier on

jQuery CSS Abstraction

It should be said, first and foremost, that you should try to keep your styling and your JavaScript away from each other. If you want to change the style of an element with JavaScript, add (or remove) a class name …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Reset Admin Password in Database

Forget your admin password and don’t have access to the email account it’s under? If you can get access to phpMyAdmin (or anything you can run mySQL commands), you can update it there.

UPDATE `wp_users` SET `user_pass` = MD5( 'new_password_here' 
Avatar of Chris Coyier
Chris Coyier on