Skip to main content

Chris Coyier

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

Article

The difference between ‘return false;’ and ‘e.preventDefault();’

Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:

$("a").click(function() {
   $("body").append($(this).attr("href"));
   return false;
}

That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:

$("a").click(function(e) {
   $("body").append($(this).attr("href"));
   e.preventDefault();
Read article
Video

#89: Organizing a Photoshop Document

If you are like me, you are both guilty of seriously unorganized Photoshop documents and appreciate well organized ones. The disorganization isn't intentional, it's just born of (if you'll pardon the likely-inaccurate cliché) being in right-brained creative mode and caring about what you are looking at not the left-brained organizational stuff. Then it compounds itself as you go in and out of the file for days on end. If you are handing this file off to someone else, or are … Read article

Article

CSS Media Queries & Using Available Space

We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that.… Read article

Article

CSS Content

CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page. This is what it looks like:

.email-address:before {
   content: "Email address: ";
}

With this CSS in place, we could have this HTML:

<ul>
   <li class="email-address">[email protected]</li>
</ul>

And … Read article

Article

Happy Fourth!

Today is America's birthday and also (more importantly) the birthday of CSS-Tricks, which turns 3 today. If it was a human being, that means it would be starting to string together sentences of five words or more, socializing well with others, and not wetting himself most nights. I guess it still has some work to do.… Read article

Article

Five Questions with Jeff Starr

I first knew of Jeff through his website Perishable Press, which has long been a fantastic web design resource blog focusing on CSS, WordPress, and a lot of hard-to-find-elsewhere .htaccess stuff along with a good amount of Jeff's personality (which I consider to be a prerequisite of any good blog) . As you may know, Jeff and I co-author Digging Into WordPress together, both the book and the blog. Jeff is really a get-things-done kinda guy and I've always … Read article

Article

Illustrators I Like

If there is one (non-superpower) skill I wish I could acquire without having to spend thousands of hours practicing, it's illustration. I took a bunch of drawing in college but I was never that great and I've let myself go out of practice. I look at a lot of illustrators work today and it makes me jealous! Illustration can really kick up the awesomeness level of any project.

I also find that Illustrators tend to take good care of their … Read article

Snippet

jQuery Duplicate Plugin

$.fn.duplicate = function(count, cloneEvents) {
       var tmp = [];
       for ( var i = 0; i < count; i++ ) {
               $.merge( tmp, this.clone( cloneEvents ).get() );
       }
       return this.pushStack( tmp );
};

The .clone() function of jQuery will duplicate a set once, but what if you need multiple copies of the same set? You would have to do:

$(elem)
   .clone()
   .appendTo(otherElem)
   .clone()
   .appendTo(otherElem)
   .clone()
   .appendTo(otherElem);

Now you can just:

$(elem)
   .duplicate(n)
   .appendTo(otherElem);

The first parameter is the number of … Read article

Article

New Poll: Action Verb Clarity

Let's say you were writing some text-only documentation describing how to do something on a website. The idea was that you came to a point where someone was presented with a list of users and their job was to select one, then there was a button below that they needed to interact with in order to get the job done. You decided "Select a user" was clear enough because of good user interface. But what is the best way to … Read article

Article

Poll Results: How Many Websites Do You Launch Per Year?

  • 20+ (14%)
  • 10-20 (12%)
  • 5-10 (24%)
  • 2-4 (31%)
  • 1 (13%)
  • 0 (6%)

I'm probably in the 2-4 camp myself, which is the winning choice. I don't freelance, but I do do sites for family and friends once in a while. Even when I was at Chatman Design the vast majority of work we did was on sites that already were launched. This data would be more interesting if it was cross referenced with what kind of job you have. I … Read article

icon-link icon-logo-star icon-search icon-star