As we were desktop-izing the site, we moved the homepage navigation over to the right side of the page to open up a hole on the left side for more content. We'd like to add this content only when the screen is large enough. Not just load it all the time and hide it on mobile. That wouldn't be very mobile-first thinking, would it?

We essentially need to test the windows width, then if it is wide enough, ajax in some content. How to we find out the windows width? We look at a whole bunch of ways. We measure it straight up. We use matchMedia() to test a media query. We end up using a little library called Enquire.js to give us media query callback functions.

Comments

  1. User Avatar
    mpgilbertusa
    Permalink to comment#

    It’s nice that Digby keeps you company while you record your screencasts (I’m assuming that’s her dog tags jingling in the background). My dog used to sleep under my desk while I worked. Great work companions.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag