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
enquire
.register("(min-width: 700px)", {
match: function() {
$("#home-article").load("/blog/ #main-article");
}
})
.listen();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 =(.
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.
Thanks,
Steve.
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.
Thanks for the quick response Chris, that sounds like a simple way of doing it, I’ll go and try it out!
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… https://css-tricks.com/examples/ConditionalCSS/ – The technique on the link seems a lot more quicker and snappier.
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.
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.