Streaming live at 10am (PST)

Interaction only on mobile device


#1

Hi smile

How can I apply interactions only on mobile device ?

Thanks smile


Show/hide Interactions based on breakpoints
#2

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


#3

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>

#4

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


#5

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


#6