Skip to main content

Chris Coyier

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

Article

Pointer Events & Disabling Current Page Links

It is a long-standing web design standard that the logo in the header area links to the homepage of the site. Another standard is that when displaying the navigation of a site, to highlight in some way the “current” page, if it is present in the navigation. I think those are great standards. The logo-link thing is so ubiquitous that your users will likely automatically try it if you’ve coded it that way or not. The current navigation thing is … Read article “Pointer Events & Disabling Current Page Links”

Snippet

Bloginfo Shortcode

The bloginfo() function in WordPress gives you access to lots of useful information about your site. See the complete list. To access all these values from inside Page/Post content itself, we can make a shortcode to return the values. Add this to your functions.php file in your theme:

function digwp_bloginfo_shortcode( $atts ) {
   extract(shortcode_atts(array(
       'key' => '',
   ), $atts));
   return get_bloginfo($key);
}
add_shortcode('bloginfo', 'digwp_bloginfo_shortcode');

Now you can output any of the values by calling that shortcode with “key”. For … Read article “Bloginfo Shortcode”

Video

#85: Best Practices with Dynamic Content

One of the articles I updated during “May is Maintenance Month” was an article about dynamic content. The idea was a simple website where clicking a link would fade out the existing content and fade in new content that it fetched via AJAX. The old article didn’t encompass what I now consider to be best practices for this kind of thing. 1) Works fine with JavaScript disabled. 2) It is possible to “deep link” to specific content. 3) The browsers … Read article “#85: Best Practices with Dynamic Content”

Article

Circulate

I had the occasion come up recently where I needed to animate something in a circle. It never occurred to me until then that there wasn’t an obvious solution to this already with jQuery. So I figured out a way, and made a plugin out of it.

This unicorn can fly friggin backwards with this plugin.

View Demo   Download FilesRead article “Circulate”

Article

Reduced Test Cases

If you are having trouble with something while building a webpage, the most helpful thing you can possibly do is start building a reduced test case. “Trouble” could be anything: the CSS isn’t doing what you think it should, the JavaScript isn’t behaving right, there are cross-browser issues, etc. In the process of creating a reduced test case, you will either:

  • Find out it was a mistake you made, help you isolate it, and fix it (or have a great
Read article “Reduced Test Cases”
Article

Specifics on CSS Specificity

This article was originally published on August 11, 2008. I am updating it now to fix some inaccuracies in how this concept was presented.

I’ve never specifically covered this subject before. (rimshot!)

The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn’t behave like you would expect. Then we’ll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence.… Read article “Specifics on CSS Specificity”

Article

Dynamic Page / Replacing Content

This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices. This new demo is much cleaner, up to date, and fuller featured. Because the old article was a bit of a different scope, I’ll leave it alone, just refer to this one. Update January 2013: There are better practices now, detailed here.

Let’s say you wanted to make a website where … Read article “Dynamic Page / Replacing Content”

Snippet

Cufon 101

1. Include the JavaScript for Cufón and the Cufón font

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/TitilliumMaps.font.js"></script>

2. HTML

Normal tags

<h1>Business Solutions</h1>
<h2>Business Insurance</h2>

3. Tell Cufón to replace the fonts for the specified CSS selectors

<script type="text/javascript">
    Cufon.replace('h1, h2', { fontFamily: 'TitilliumMaps26L', hover: true });
</script>

4. Add JavaScript error handling in case there is an error loading

function handleError() { return true; }
window.onerror = handleError;

5. CSS

The font color, size and hover color is controlled via … Read article “Cufon 101”

Article

Organic Tabs

Have you ever seen a tabbed content area in a sidebar that was a little “jerky”? The jerkiness can be caused by a bunch of things, like the content in the tabbed areas are of different heights, or maybe the way the switch happens the current one is hidden for a brief second before the new one shows up and the content below it jumps up and back down quickly. For lack of a better term, I’m calling tabs that … Read article “Organic Tabs”

Article

Table Row and Column Highlighting

In mid-2009 I did a screencast about tables which featured how to do row and column highlighting with jQuery. The method in the video isn’t nearly as efficient as it could be, so this is an update to that. Shout out to Bronislav Klucka who contacted me about the idea.

Attaching events to table cells is the quintessential example, and also read like a history for event handling in jQuery.

Read article “Table Row and Column Highlighting”