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

[technogeek]

I am using WordPress to [load content conditionally]( https://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:

One

Two

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.

[technogeek]

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

[technogeek]

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.

[Author]

Posts