Interaction only on mobile device

Hi :slight_smile:

How can I apply interactions only on mobile device ?

Thanks :slight_smile:

Hi, at the moment, it is not possible to set interactions to trigger only on mobile device. You might try a workaround, to set the element having the interaction to display:none until you get to mobile viewport size and then change to display:visible when on mobile. Keep in mind, if you have interactions that are set to trigger when page loads, those interactions will trigger as soon as the page loads, whether the user is on desktop view or mobile view. If the user then resizes to mobile view, the animation will not play (unless the interaction is set to loop), as the page has already loaded.

Cheers

Thanks.

I used this jQuery script :

<script>
	$(document).ready(function () {
		// check the width of the browser
		function checkWidth() {
			// store the width of the browser
			var windowWidth = $(window).width();
			if (windowWidth < 321) {
				// my 1st instruction ;
			} else {
				// if > 321
				// my 2nd instruction ;
			}
		}
		// load the function
		checkWidth();
		// detect the resizing of the browser
		$(window).resize(checkWidth);
	});
</script> 
3 Likes

Nice one @thierry_vilaysi, yes, I should have mentioned there is other ways too, that are custom and this is a good example of some custom jQuery that can be put to your “Add code before tag:” section of the Custom Code panel in Site Settings to override how certain things work. :smile: Thanks for sharing this

hey @thierry_vilaysi. how exactly did you add the interaction to the script then?