Skip to main content

Chris Coyier

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

Snippet

jQuery JSON getting with error catching

jQuery has a built in function called getJSON() to help making AJAX requests for JSON data easier. It normally works great, but if that function gets invalid data (or nothing) back, the callback function will not fire. If there is a legitimate risk of that, you can do this instead to catch for those errors.

$.get('/path/to/url', function (data) {
  if( !data || data === ""){
    // error
    return;
  }
  var json;
  try {
    json = jQuery.parseJSON(data);
  } catch (e) {
    
Read article
Article

Google Maps Slider

Google Maps has a JavaScript API now in it's third version. I remember playing with some version of the API back in v2 and thought it was kinda cool but a bit obtuse. For one thing, v3 no longer requires applying for an API key which is nice.

I'm sure it's partly me getting better at JavaScript, but I found the API quite well done and easy to work with. For one thing, it's fully evented. That means you can … Read article

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