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!!
Hi @aesoppang, could you please help to share the link to your site, where it is being hosted, to take a look?
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);
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!!
May I have another advice, Alex?
This topic was automatically closed after 60 days. New replies are no longer allowed.