XF 2.2 Condition to check screen (viewport) size

[scriptop]

Hello. Is there some way to check screen (viewport) size with xenforo 2 conditions (xf:if)?

 

[TPerry]

What exactly are you trying to do?
There is the ability to display (or not) data based upon viewport size.

This is an example from Brogan that will restrict the user banner display in the chosen viewport size.

@media (max-width: 400px)
{
    .userBanner
    {
        display: none !important;
    }
}

I'm sure in the actual templates if/then calls can be made.. the above is in extra.LESS.

 

[scriptop]

I'm asking becuase don't want to run some JS under specific size.

 

[Old Nick]

Media queries are CSS syntax, i don't think there is HTML conditional you can use in template.

 

[TPerry]

Media queries are CSS syntax, i don't think there is HTML conditional you can use in template.

ergo the request to clairfy what was trying to be attempted. EXTRA.less is still a template.

 

[Old Nick]

We spoke about HTML.

 

[TPerry]

We spoke about HTML.

Really? Can you show me where HTML is listed in the original post?

Hello. Is there some way to check screen (viewport) size with xenforo 2 conditions (xf:if)?

Seems I don't see it.
That's why clarification was asked for... there IS the ability to control by viewport in templates... for certain things.
As I said... extra.less remains a template.... it may not be a template dealing with structural layout like many others, but it is still a template processed by the system.

 

[Old Nick]

Really? Can you show me where HTML is listed in the original post?

Hello. Is there some way to check screen (viewport) size with xenforo 2 conditions (xf:if)?

 

[Old Nick]

As I said... extra.less remains a template....

In XF environment maybe (because .less files are accessible in the Template menu in ACP).
But CSS or Less files are stylesheets not template.

 

[Kirby]

This thread is confusing

It is not possible to check screen size via <xf:if> as this is executed on the server which technically never can know the current screen size used on the client.

LESS / CSS in XenForo are templates (not files!) and can use all templater features (like conditionals). As those templates are not rendered for each client request (the output is cached on both client and server), conditionals in LESS / CSS templates can usually only be used to check style properties.

Depending on the usecase, media queries can be used for conditionally executing JavaScript

<xf:js>
if (window.matchMedia('screen and (min-width:400px)').matches)
{
alert ('Screen width is at least 400px');
}
</xf:js>

Using this approach it is also possible to load external JavaScript files based on media query results.

 

[TPerry]

In XF environment maybe

Well, we aren't talking WordPress or pure HTML pages. We ARE talking about XF environment.
As @Kirby explained (and I was fairly sure I had seen similar done before) it is possible to address it via the standard templating system.
It's never been something I needed to do, so I didn't pay close attention to the examples I had seen in the past.

 

[Old Nick]

We ARE talking about XF environment.

Yes.

 

[Joe Link]

This thread is confusing

It is not possible to check screen size via <xf:if> as this is executed on the server which technically never can know the current screen size used on the client.

LESS / CSS in XenForo are templates (not files!) and can use all templater features (like conditionals). As those templates are not rendered for each client request (the output is cached on both client and server), conditionals in LESS / CSS templates can usually only be used to check style properties.

Depending on the usecase, media queries can be used for conditionally executing JavaScript

<xf:js>
if (window.matchMedia('screen and (min-width:400px)').matches)
{
alert ('Screen width is at least 400px');
}
</xf:js>

Using this approach it is also possible to load external JavaScript files based on media query results.

Any chance you could somehow use this to set a global variable which a conditional could use?

We're using @Russ's XenBase, which has a button to expand the sidebar (in a modal) on mobile devices. For tablets, the sidebar is collapsed in portrait and visible in landscape (same as low-res desktops). I'm trying to find a way to execute the sidebar ad request code only in landscape mode (when the sidebar is actually visible on the screen).

Edit: Nope

 

[Old Nick]

Back on this subject.
How can i load a template until the viewport reach 650px then load an other template above 650px ?
Is it possible ?