Streaming live at 10am (PST)

Trigger Interaction on INPUT - Calling all JS & CSS ninjas


#1

Hi guys,

First of all here's my site link:
https://preview.webflow.com/preview/cvpro?preview=4421e2575d221bf3f2b6a04f43012080

So I've hit a dead end trying to trigger an interaction when 2 fields have a user input > 0.
I'm using Vue.JS for most of my app functionality and I've tried using Vue's Transition Effects with no luck (as documented here: https://vuejs.org/v2/guide/transitions.html ).

Am I right in thinking that Webflow uses Tram.JS to trigger CSS interactions and stored server side as JSON? Maybe Tram.js has an on input trigger?

If you take a look at my project link above then you'll see I currently have the interaction fire on click for the Current / Last Title field. This isn't enough as I need it to be tab-friendly for accessibility and UX reasons.

I've put together a working JSFiddle for my desired outcome using a simple Vue example - link below. I would like a similar kind of functionality but instead of a Vue transition I would like to trigger the same interaction used on input click currently (so the transition isn't linked to render but instead uses the same kind of Step A and Step B approach which the Webflow IX currently does).

https://jsfiddle.net/UXMike/50dp5wjs/2/

Any help or advice would be much appreciated!!
I'm still a JS baby and my wording will likely be terrible so if you need anything else in order to understand my question properly then please let me know and I'll be happy to give you an answer ASAP.

Any thoughts guys?
@Revolution
@brryant
@callmevlad

Cheers,
UXM


#2

I think what you want to look at it is either the focus() and blur() event handlers, or if you need the inputs to have value you could use an onChange event handler and check if target.value > 0.

I've never worked with vue.js before tho, but I know this can be done pretty easily with js or jquery.
What are you trying to trigger exactly when the case matches?

Best, Sid


#3

Hey Sid,

Cheers for the quick response bro.
I'm actually not too sure as I've been cherry picker learning, just what and when I need it. To my understanding after some research, I need to trigger some Tram.JS. I believe that's what Webflow use for the IX transitions.

I can see that the interaction is linked to the element via the attribute:
data-ix="example"

...and a trigger type (currently click) in the JSON:

{
    "slug":"example",
    "name":"example",
    "value":{
        "style":{},
        "triggers":[
            {
                "type":"click",

Does changing the type to load mean that it triggers on page render or object render? If it was the object render then I could surely use simple JS to trigger render on both inputs being > 0?
But I very much doubt it'll be this easy ay?

I'm not even sure what data-ix=" " is, maybe Angular?

Cheers for you help though man, we're getting there.

UXM


#4

Interaction identifier.


#5

Thanks Sam!

Do you know how I would change the trigger to an on input trigger with custom code?

Cheers,
UXM


#6

HTML 5 identifier. Use by libraries for various purposes.
Webflow uses it to connect the interaction to the element.

Take a look a this page: (the pen is written by callmevlad:

Note that code in line 2 is
<div class="header" data-ix="show-nav">

Scroll down the demo page and locate this element... it will scroll onscreen when you get to a certain point on the page.

Now... go scroll back up - and modify the above mentioned code to be:

<div class="header" data-ix="show-nav1">

Then scroll back down the demo page. Notice that the element / interaction is now gone...
the connection between the element and interaction code (in webflow.js) is no longer there.

Not sure if this helped... have been out-of-pocket / mostly off-forums due to project timelines.

Anyways - I've been moving away from Webflow - it's great for creating pretty / shiny objects... but for business applications - Webflow has limitations. Ask anyone who's moved into AngularJS / Vue / React.

For now... I'm primarily using Webflow to prototype - and that's it
... then when completed
- I run site through a converter that I wrote...
- outputs 100% bootstrap code with AngularJS and connects my php ajax / mysql.

Here's another decent write-up for data-*

https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/


#7

Thanks Revolution, really appreciate that pal.

I see now, it's then referenced within the CSS I can see. So in terms of a coded workaround, would I be better looking to duplicate the relevant CSS for the elements then linking them to a :valid selector or something like that. That way firing the interaction when a certain input is valid, do I follow correctly?

Cheers,
UXM


#8

I've just worked it out. It was my lack of CSS knowledge which has done me wrong. I thought for some reason that I'd need to use JS as I'd never delved into interactions past using the Webflow UX for it. It might be useful for other beginners to know so please find my solution below...

So I'm going use the following CSS:

#requiredField:valid + #requiredField2:valid ~ #parent2 #parent1 #target {
 
}

This means, when both fields have a user input then my interactions will fire and anything within those curly braces will become the end-state for the interaction.
(eg. transform: rotateZ(-60deg); )

The HTML would look something like this:

    <input id="requiredField" type="text" required>
    <input id="requiredField2" type="text" required>
    <div></div>
    <div id="parent2">
      <div id="parent1">
        <div id="box"></div>
      </div>
    </div>

+ means the element directly after hence the fields are one after the other in the HTML.
~ means an element with the same parent but further down in the HTML

Cheers for your help guys,
UXM