Interaction conditions: desktop or mobile

How To
1

How do I indicate in interactions that they should only be active in desktop mode?
or if not possible, at least indicate the resolution?

image
image651×926 44 KB

1 Like
2

At present you cannot.

Which is weird and makes animations unuseable in most cases.

2 Likes
3

ok, avoid using them for now

4

i unload css in mobile…

function rimuovi_css_dispositivo_mobile() {
if ( wp_is_mobile() ) {
wp_dequeue_style( ‘bricks-animate’ );
wp_deregister_style( ‘bricks-animate’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘rimuovi_css_dispositivo_mobile’, 9999 );

2 Likes
5

Nice solution :slight_smile: - I may have to steal it… :wink:

1 Like
6

I had this issue so duplicated the item with the interactions on and removed the interactions on the duplicate. I then showed one on desktop and one on mobile

7

Thanks a lot for sharing!! I just tried it and it works perfectly!!

8

will share this if anyone searches finds it…

this js script deletes the bricks animation attributes and classes when the page loads.

use it for all site or for some pages change the breakpoint depending on your setup

<script>
// Set the breakpoint for mobile devices
const MOBILE_BREAKPOINT = 767;

// Function to remove data attributes and a specific class
const removeAttributesAndClass = () => {
  // Check if the current window width is less than or equal to the breakpoint
  if (window.innerWidth <= MOBILE_BREAKPOINT) {
    // Select all DOM elements on the page
    const allElements = document.querySelectorAll('*');

    // Iterate over each element and remove the specified attributes and class
    allElements.forEach(element => {
      // Remove data attributes
      if (element.hasAttribute('data-interactions')) {
        element.removeAttribute('data-interactions');
      }
      if (element.hasAttribute('data-interaction-id')) {
        element.removeAttribute('data-interaction-id');
      }
      if (element.hasAttribute('data-interaction-hidden-on-load')) {
        element.removeAttribute('data-interaction-hidden-on-load');
      }

      // Remove the class if it exists
      if (element.classList.contains('brx-animated')) {
        element.classList.remove('brx-animated');
      }
    });
  }
};

// Listen for the DOMContentLoaded event to ensure the DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  removeAttributesAndClass();
});

// Also listen for the resize event to handle changes in window size
window.addEventListener('resize', () => {
  removeAttributesAndClass();
});
</script>
1 Like
9

I’ve found a small workaround that works perfectly.

You need to add the following code in Bricks → Custom Code → Head scripts:

<script>
!function(){function i(){window.innerWidth<768&&(window.mobile=!0)}i(),window.addEventListener("resize",i,{passive:!0})}();
</script>

This adds a mobile key to the window object if you are on a mobile device (for me, I consider mobile as width < 768px).

Then, when you create a new interaction for your component, you simply need to set the condition:

  • Windows storage
  • mobile
  • is set or is not set (I’m not sure about the exact English wording in Bricks, but this is the translation).

And voilà! You can now have interactions that are specific to mobile or desktop. You can also set one interaction for desktop and another for mobile.

Enjoy!

1 Like
10

I’ve just given your solution go (arnaudlip) - and it works great dude, thank you so much for taking the time to share it! It’s a real life saver!!