Skip to main content
CSS is fun and cool and I like it.

Open External Links In New Window

$('a').each(function() {
   var a = new RegExp('/' + + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
 , '_blank');

You can do this straight with HTML, but that is invalid markup, this takes care of business without invalid code and unnecessary markup.

Or, you can still avoid the validation problems and just append the class target=_blank thing to any links with href attributes starting with http://. The example below only targets links in a #content area. … Read article “Open External Links In New Window”


Automatically Discover Document Links And Apply Class

$('a[href]').each(function() {
   if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {

This will look through every a element on the page. If the href attribute of it has a .doc, .xls, or .pdf in it, it will apply the appropriate class name to it (e.g. class="doc")… Read article “Automatically Discover Document Links And Apply Class”


The Clearfix: Force an Element To Self-Clear its Children

This will do you fine these days (IE 8 and up):

.group:after {
  content: "";
  display: table;
  clear: both;

Apply it to any parent element in which you need to clear the floats. For example:

<div class="group">
  <div class="is-floated"></div>
  <div class="is-floated"></div>
  <div class="is-floated"></div>

You would use this instead of clearing the float with something like <br style="clear: both;" /> at the bottom of the parent (easy to forget, not handleable right in CSS, non-semantic) or using something like … Read article “The Clearfix: Force an Element To Self-Clear its Children”



var host = (("https:" == document.location.protocol) ? "https://secure." : "http://");document.write(unescape("%3Cscript src='" + host + "' type='text/javascript'%3E%3C/script%3E"));

var q7p4k1 = new WufooForm(); q7p4k1.initialize({ 'userName':'chriscoyier', 'formHash':'q7p4k1', 'autoResize':true, 'height':'650', 'ssl':true}); q7p4k1.display(); … Read article “Submit”


The Heating Company Analogy

What helps a design business stay healthy and successful over time is having regular clients with regular monthly billable work. The one-off jobs might be more glamorous and more fun, but in the long run it’s probably your regulars that keep the lights on.

With print work, projects are absolute. Once ink hits paper, you bill, and that’s that. But with the web, projects remain malleable indefinitely. This is an opportunity for you as a web design business to offer … Read article “The Heating Company Analogy”


Clear Default Search String on Focus

    .css("color", "#ccc")
        $(this).css("color", "black");
        if ($(this).val() == "Search...") {
        $(this).css("color", "#ccc");
        if ($(this).val() == "") {
  1. Set value of field to “Search…”
  2. When field comes into focus, set color to black.
  3. If value is default, remove it.
  4. When field goes out of focus, set color back to light gray.
  5. If value is empty, put back default value
Read article “Clear Default Search String on Focus”

Find ID of Top-Most Parent Page

This will find what the ID is of the top-most parent Page, in a nested child page. For example, this page you are literally looking at is nested under


if ($post->post_parent)	{
	$parent = $ancestors[$root];
} else {
	$parent = $post->ID;


$parent will be the correct ID. For example, for use with wp_list_pages.

Source: CSSGlobeRead article “Find ID of Top-Most Parent Page”