Responsive Javascript

[silence]

Is it possible to only load javascript if the display is NOT responsive? Some things I don't display to mobile users would be awesome to not even load them, to speed up the webpage!

 

[Chris D]

width = document.documentElement.clientWidth;

That gets the current width. At the start of your Javascript you could simply:

width = document.documentElement.clientWidth;
if (width < 750)
{
    return false;
}

 

[silence]

width = document.documentElement.clientWidth;

That gets the current width. At the start of your Javascript you could simply:

width = document.documentElement.clientWidth;
if (width < 750)
{
    return false;
}

Hmmm alright, didn't think it would be that simple lol.

 

[Chris D]

It's the same premise used for responsive ads, really.

Chances are you'll be just grabbing that width variable as the page loads so the only thing to think about is, strictly speaking it isn't entirely responsive as it is all evaluated during load time. You could get more advanced and start binding functions to various change events in the browser to detect the width dynamically and reinstate scripts that previously stopped running but for something like this it probably isn't worth it.

 

[silence]

It's the same premise used for responsive ads, really.

Chances are you'll be just grabbing that width variable as the page loads so the only thing to think about is, strictly speaking it isn't entirely responsive as it is all evaluated during load time. You could get more advanced and start binding functions to various change events in the browser to detect the width dynamically and reinstate scripts that previously stopped running but for something like this it probably isn't worth it.

Yeah I'm just getting serious page-blocking on my mobile device (none on desktop and everything is async) so I want to downsize the unnecessary js for mobile users.

 

[Dad.]

I prefer doing something like:

if (! $('html').hasClass('Responsive') ) {
//code when responsive is turned off
}

But there are many ways to do it.

ETA: Nevermind, I see what you mean now. The way Chris has it is good. But instead, use 800px as thats when XenForo (by default, but this can be changed in Style Properties) starts responsive changes.

The way I have it is for if responsive is toggled off entirely.

 

[silence]

I prefer doing something like:

if (! $(body).hasClass('Responsive') ) {
//code when responsive is turned off
}

But there are many ways to do it.

ETA: Nevermind, I see what you mean now. The way Chris has it is good. But instead, use 800px as thats when XenForo (by default, but this can be changed in Style Properties).

The way I have it is for if responsive is toggled off entirely.

Wouldn't that be more intensive since it's searching body for the class 'Responsive'?

 

[Dad.]

Wouldn't that be more intensive since it's searching body for the class 'Responsive'?

I honestly have no idea. JavaScript loads client-side of course so load times can vary quite drastically. But like I said, I misunderstood your question, my apologies.

 

[euantor]

Even better, do as Audentio said using pure JS then only load the scripts if they are required.

 

[silence]

I honestly have no idea. JavaScript loads client-side of course so load times can vary quite drastically. But like I said, I misunderstood your question, my apologies.

No you answered it just fine Sorry I'm not thinking properly today and my english is suffering.
Is there a way to benchmark JS since I would love to see if one is better than the other.

 

[euantor]

IE has a built in JS profiler, as does firebug I think. Chrome probably does too. Just check the developer tools.

 

[Chris D]

No you answered it just fine Sorry I'm not thinking properly today and my english is suffering.
Is there a way to benchmark JS since I would love to see if one is better than the other.

Then did I misunderstand your question?

The solutions that myself and Audentio provided were solutions to two completely different scenarios.

If you want to detect that someone is using a smaller screen using Javascript then my solution will work.

If you want to detect when someone is using a style where you have switched the Responsive Design off completely for that style then use Audentio's solution.

 

[silence]

Then did I misunderstand your question?

The solutions that myself and Audentio provided were solutions to two completely different scenarios.

If you want to detect that someone is using a smaller screen using Javascript then my solution will work.

If you want to detect when someone is using a style where you have switched the Responsive Design off completely for that style then use Audentio's solution.

No I got that completely, and you can use both to achieve my question (remove the ! from Audentio's solution), I'm just asking if searching through every class in <body> for 'Responsive' would have lesser performance compared to your solution.

 

[Dad.]

No I got that completely, and you can use both to achieve my question (remove the ! from Audentio's solution), I'm just asking if searching through every class in <body> for 'Responsive' would have lesser performance compared to your solution.

You will only need to check once, so you'll want that like this:

$(document).ready(function() {
// code when document is ready, asap
});

So you'll do the check. None of the code executed, from what I've read from what you're asking, should need to run multiple checks if I understand you correctly. Because an iPad or tablet will be largest under a screen or desktop device.

If you want something to happen every time the device width changes size, you can throw your code into this:

$(window).on('resize orientationchange load', function(e) {
//code will run every time someone resizes browser or changes orientation, and on load, on their device
});

Also note in my first post, its the html tag that XenForo adds class 'Responsive' to, not the body tag. Forgot single quotes as well Tough morning wheres the coffee.