Skip to main content

Chris Coyier

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

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
Snippet

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.

# BEGIN EXPIRES
<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
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

Snippet

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
Snippet

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.

<p>
<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
Snippet

Text Dripping Blood

.blood {
       color:silver;
       text-shadow:
       4px 4px 1px #300000,
       4px 6px 1px #400000,
       4px 8px 1px #500000,
       4px 10px 1px #600000,
       4px 12px 1px #700000,
       4px 14px 1px #800000,
       4px 16px 1px #900000,
       4px 18px 1px #A00000,
       4px 20px 1px #B00000,
       4px 22px 1px #C00000,
       4px 24px 1px #D00000,
       4px 26px 1px #E00000,
       4px 28px 1px #F00000,
       4px 30px 1px #FA0000,
       4px 32px 1px #FB0000,
       4px 34px 1px #FC0000,
       4px 36px 1px #FD0000,
       4px 38px 1px #FE0000,
       4px 40px 2px #FF0000;
Read article
Snippet

Exclude $(this) from Selector

Let's say you want to attach a click handler to every link on a page. The function for that click handler turns all the other links a different color.

var $allLinks = $("a");

$allLinks.click(function() {

     $allLinks.not(this).css("color", "red");

});

You can use the .not() function to remove elements from a set, so padding this to that function will remove the current element before the color change. … Read article

Snippet

Fixing .load() in IE for cached images

The .load() function fires when the element it's called upon is fully loaded. It is commonly used on images, which may not be fully loaded when the JavaScript originally runs, and thus would return incorrect information about themselves (e.g. height/width). Most browsers deal with this fine. IE can cause problems, when images on the page are cached.

Selecting the image and changing it's src attribute to append a random parameter (based on the date). This will trick IE into firing … Read article

Article

The Hard Part First

I like the submit form on Art in my Coffee. It packs a lot of features into a compact space and is clear about what you are able to do and what is required of you. But best of all, I like how the very first thing it asks of you is the hardest part of the whole form.

It's just a simple file input box, why is that the "hardest part"? Think what that input box represents.

  1. User
Read article
Snippet

List Posts, Highlight Current

WordPress lacks a wp_list_posts() function that might seem logical go with the robust and useful wp_list_pages() function. You can simulate it though, by using the get_posts() function and running your own loop through the results.

The parameters for get_posts() below are just examples, replace with your needs.

<ul>

    <?php
        $lastposts = get_posts('numberposts=5&orderby=rand&cat=-52');
        foreach($lastposts as $post) :
        setup_postdata($post); ?>

        <li<?php if ( $post->ID == $wp_query->post->ID ) { echo ' class="current"'; } else {} ?>>
            
            <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
            
        </li>

    
Read article
icon-link icon-logo-star icon-search icon-star