Jquery or Javascript call/trigger interaction

[aesoppang]

Could someone know how to through Jquery or Javascript call Webflow interaction? I discover when I change the viewport size from the physical mobile devices that the slider will not show image properly. I tried to use jquery load the page from the other page, the image show correct, but I have to click the button (trigger default interaction), then the slider can be able to start the slide show automatically.

Could some help and hit the same issue? Please let me know. Thanks!!

[aesoppang]

Exactly same my issue:

Sliders not initialised after screen rotate on mobile device

Hey Gurus, I have different set of sliders for phone portrait and landscape mode on my single page site. Everything works as expected on PC/Chrome/preview However, once I export code, host it, and view it on mobile phone the following happens: page loaded in a specific mode (say portrait) works fine but if phone is rotated afterwards, all sliders are not functional (arrow clicks do nothing) plus slider navs (dots) disappear. way to hack it: reload page in new orientation. or just open/clo…

[cyberdave (Dave S.)]

Hi @aesoppang, could you please help to share the link to your site, where it is being hosted, to take a look?

[AlexManyeki]

Hey @aesoppang

You will need to use your browser’s dev tools to locate the interaction you want in your site’s js file, usually at the bottom lines of the file. Looks something like this;

{"slug":"interaction-slug-name","name":"interaction-name","value":{"style":{"height":"0px"},"triggers":[{"type":"click","stepsA":[{"height":"0px","transition":"height 300ms ease 0"},{"wait":"50ms"},{"display":"none"}],"stepsB":[{"height":"0px","transition":"height 200ms ease 0"}]}]}},

The only part you will need to call the interaction is the section starting from type to stepsB as follows;

{"type":"click","stepsA":[{"height":"0px","transition":"height 300ms ease 0"},{"wait":"50ms"},{"display":"none"}],"stepsB":[]};

You can then call this interaction in a function (e.g. click) like this;

$(“.your-element-class”).click(function() {

var ix = Webflow.require(‘ix’);

var $target = $(‘.your-element-class’);
var trigger = {“type”:“click”,“stepsA”:[{“height”:“0px”,“transition”:“height 300ms ease 0”},{“wait”:“50ms”},{“display”:“none”}],“stepsB”:};

ix.run(trigger, $target);

return false;
});

@danro has written a very nice explanation on running webflow interactions via code below. Definitely very interesting once you get a working understanding (Interactions 2.0 stuff);

How to trigger Webflow interactions using JavaScript

How to run webflow actions (animations) from code. As I understood binding is in “Webflow: Interactions: Init”. But how to run this actions by code?

[aesoppang]

Hi AlexManyeki,

Thanks for your reply.

That’s good suggestion for calling the interaction in a function, but it has a bit different in my case. In my case, when I click on the button, the slide will show smoothly and correctly. Actually, I would that action run automatically as I click the button (Trigger the slide run, not trigger by hand manually). May I know your suggestion how to trigger (call function) automatically like I click on the button? Becase I tried to use jquery ready function (when page run), it seems not work. Do you have any other suggestion and advice. Thanks!!

[aesoppang]

May I have another advice, Alex?