Grow your CSS skills. Land your dream job.

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]( http://css-tricks.com/examples/ConditionalCSS/ “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’) {
    $(“.content”).load(‘file.php’);
    currentSize = ‘Desktop’;
    }
    }

    }).resize();

    }

    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

    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() ?

    http://codex.wordpress.org/Function_Reference/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.

*May or may not contain any actual "CSS" or "Tricks".