Skip to main content

Chris Coyier

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


Triple Click Event

$.event.special.tripleclick = {

    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler)

    handler: function(event) {
        var elem = this, $elem = jQuery(elem), clicks = $'clicks') || 0;
        clicks += 1;
        if ( clicks === 3 ) {
            clicks = 0;

            // set event type to "tripleclick"
            event.type = "tripleclick";
            // let jQuery handle the triggering of "tripleclick" event handlers
            jQuery.event.handle.apply(this, arguments)  
Read article


I'll be heading down to Atlanta, Georgia to attend LessConf3010 on May 21/22, 2010. They can say it better than I can:

LessConf is a conference with talks ranging from startups to design to marketing to business. It's a casual two-day event in Atlanta Georgia with awesome speakers here to inspire you. Each speaker will have a 45 minute talk followed by a 15 minute Q/A session with Steven Bristol.

It's put on by Allan and Steve of LessEverything. … Read article


Data URIs

Did you know that you don't have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with data URIs. The end result can be a site with all the less HTTP Requests, but at what cost?


Update December 2011: This bug is fixed in Opera 11.60

This is a bit of an interesting number. Google turns up a number of bug-related threads. The reason it came up for me, is that I get a lot of emails like this:

The AnythingSlider doesn't work in Opera!!!

They were right... but it seemed to be a fairly new issue and I never could figure out why. It turns out it all comes back to 32766. … Read article


Indeterminate Radio Buttons

There is a pseudo class selector, :indeterminate, whose job it can be to select radio button inputs which are neither selected (have attribute "checked") or unselected (don't have that). This is a CSS3 selector, which may be in response to the HTML5 spec, which explicitly allows radio buttons to be in this state:

If none of the radio buttons in a radio button group are checked when they are inserted into the document, then they will all be initially

Read article

Set Expires

Setting "expires" tells browsers downloading these files that they don't need to request it again for this specific length of time. In otherwords, use the cache instead if you have it. This can reduce stress on the server for you, and speed up page load time for visitors.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 10 days"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/plain "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png 
Read article

Grid Accordion with jQuery

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.

Basic accordion from jQuery UI

One way to look at an accordion is like a collapsed single column of a table. I was recently building a page … Read article


Admin Panel Link Only For Admins

<?php if (current_user_can("manage_options")) : ?>
       <a href="<?php echo bloginfo("siteurl") ?>/wp-admin/">Admin</a>
<?php endif; ?>

If a user is logged in and they are an Admin of the site (not just an subscriber or author), then display a link to get them to the WordPress Admin area. Otherwise, display nothing.

More specific than the regular log in / log out function, which will show for everyone:

<?php wp_loginout(); ?>
Read article

Drop Caps

Cross-browser way (extra markup)

Just wrap the first character of the paragraph in a span, then target the span with CSS and style away.

<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus 
Read article
icon-link icon-logo-star icon-search icon-star