The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #40421

    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:

    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.


    @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. :)


    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 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.