We end up with a really simple test which loads in an article from the blog to display if there is room:

// Load additional content if enough room
  .register("(min-width: 700px)", {
    match: function() {
      $("#home-article").load("/blog/ #main-article");

jQuery makes Ajax super easy, and even easier with the .load() function. The only little trick here is where we've added #main-article to the end up the URL which limits what it injects onto the page to that CSS selector. It would be more perfect if we engineered some solution to only return the content we need to add, but this is a such a quick and easy solution it's kind of beautiful.

Sorry about the not-great sound on this one =(.


  1. Steve Vaughan
    Permalink to comment#

    Hey Chris,

    Great video. Do you have any recommendations for pulling in content that isn’t displayed elsewhere on a site? For example an extra section of markup or sidebar.



    • Chris Coyier
      Permalink to comment#

      Content definitely doesn’t need to be displayed on the site in the “normal” way to be Ajax’d in. You could drop an .html file at the root of the site and hit that URL and bring it in. Since this is WordPress-land, the approach I’d probably take is to make a page template called Ajax and publish it at /ajax/ which takes query parameters and runs a DB query with them and returns whatever you want as (pretty raw) content.

    • Steve Vaughan
      Permalink to comment#

      Thanks for the quick response Chris, that sounds like a simple way of doing it, I’ll go and try it out!

  2. Amrit
    Permalink to comment#

    Great Video Chris, just a quick question.

    Using enquire, I understand as you enlarge the browser window, the content appears automatically, but if you reduce the browser window, is the content still there in the DOM? In your example it disappears but that is because you are using display: none. Is it still in the DOM?

    Secondly, why would you use this technique over this one… http://css-tricks.com/examples/ConditionalCSS/ – The technique on the link seems a lot more quicker and snappier.

  3. Chris Coyier
    Permalink to comment#

    In the video I go over a number of different ways you can go about the testing. Conditional Content is another one. I stuck with Enquire here because I think it’s a great option for people who want a slightly more complex framework with callbacks for how to handle multiple scenarios.

    For instance, we do simply display: none; in this example because, frankly, it just isn’t that big of a deal. If we were concerned about the weight of the DOM as we might be on a larger site, we could then use Enquire’s unmatch callback to .remove() the content from the page.

  4. Shawn Stringfield
    Permalink to comment#

    Is the homepage not in the WordPress system? I’m just trying to figure out why you are not including the latest blogpost using native wordpress queries vs Ajax. I kinda skipped around videos and did not watch them one by one so sorry if this was covered under some other previous video.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.