The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Which jQuery method should be used to load in a block of markup in this conditional css function?

  • # October 23, 2012 at 3:43 am

    I am using WordPress to [load content conditionally]( “load content conditionally”) depending on the viewport size, but I need to replace the `load()` method with a more appropriate method. You can see how this works in the link above by resizing your browser and watching it load a custom value depending on the browser size.

    Example CSS:

    body:after {
    display: none;

    /* Default */
    content: “Mobile”;

    @media (min-width: 35em) {
    body:after {
    content: “Desktop”;

    To be very specific, if the JS can detect that `content: “Mobile”` is active, it will load mobile content. If it detects `content: “Desktop”`, it will load desktop content.

    Here’s the javascript I’m trying to work with:

    $(function() {
    var currentSize = “Mobile”;
    $(window).resize(function() {
    var size = window.getComputedStyle(document.body, ‘:after’).getPropertyValue(‘content’);

    /* Ridiculous thing to deal with inconsistent returning of
    value from query. Some browsers have quotes some don’t */
    size = size.replace(/”/g, “”);
    size = size.replace(/’/g, “”);

    if (size != currentSize) {
    if (size == ‘Desktop’) {
    currentSize = ‘Desktop’;



    How do I load a block with custom hooks? I obviously don’t need to use the `load()` function to call a PHP file since the content is in the database somewhere, but I don’t know how to solve this problem.

    Here is some example code I want to insert into the desktop version to replace the mobile version code:

    < ?php the_block('One'); ?>

    < ?php the_block('Two'); ?>

    < ?php the_block('Three'); ?>

    As you can see, there are 3 custom hooks that contain more markup and code. I don’t know how to properly load this into the javascript so that it will replace the mobile version code.

    # October 23, 2012 at 10:13 am

    This reply has been reported for inappropriate content.

    php is executed server side before the dom is available, if you want to manipulate the page without redirecting (just on resize) you can use $(window).width() and store your relevent html in variables. appending those variables to dom elements based on what screen width you have.

    Also, do you know about wp_is_mobile() ?

    # October 23, 2012 at 2:22 pm

    @elneco, thanks for your feedback. I understand that php is executed server side which is one reason why I don’t know how to insert this block of code or store it as a variable. I don’t need to use the `width()` function since this method already works great.

    But, that `wp_is_mobile()` function is new to me. That might change what I’m trying to do! Thanks. :)

    # October 23, 2012 at 6:08 pm

    Hmm, after reviewing how `wp_is_mobile()`, I don’t think it’s as useful for what I’m trying to do. It’s a blanket for anything mobile and I need something that’s more specific to individual viewports, not devices.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed