This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
O'Ryan McEntire
Posted Jul 22 - Read on Facebook

So I am building a prototype that pulls in data via json object and constructs a series of layers based on that content. I'm using HTML to build out some "templates" that gets used for the different types of content sourced from the json.

The difficulty that I am running into is how the get the HTML to interact with framer on user input.

For example: If I am constructing a layer that contains HTML which might look like:
<p>Do you like doges?</p>
<button>yes</button> <button>no</button>
Each of those buttons would have a value that tells me what I need to know to move forward in the prototype in a dynamic way.

Getting onClick info from a layer is straightforward, but How would I listen for the click on a specific HTML element inside a layer?

In javascript I would assign a data attribute to the clickable element and just read that off the element.

<button data-whatever="yes">yes</button>
this.getAttribute('data-whatever')

7 Comments

George Kedenburg III

try to use framer layers as much as possible instead of writing your own HTML... so instead of doing <button> have those be layers which you can then add events to like any other framer layer

O'Ryan McEntire

Unfortunately that makes creating a dynamic flow of elements much more difficult. Creating a bunch of framer layers that parent to a bunch of other framer layers to try to mimic what is done in a few lines of html only to have it converted to html anyways seems silly to me.

Even if I was using framer layers I'd still have to add click events to every instance of the dynamic layers and keep an array of the indexes and the data I need. :\

Isa Bison

O'Ryan McEntire

Isa looks like that only works if the html element is the only content of the layer. But thanks, that gives me other idea.
Cheers!

Sigurd Tapio Mannsåker

You should be able to use document.getElementById() and the usual bag of tricks for fetching DOM elements, although I haven't tested getElementById specifically myself.

O'Ryan McEntire

Sigurd, That's basically what I ended up doing.
Because this was a time sensitive project, I gave in and dropped jQuery into the project and used their selector syntax and the 'on' function to bind new dynamically loaded content.

I'll try to get a cleaned up/simplified version and add it here incase it helps anyone else. (even though it's probably not "the framer way")

Jordan Robert Dobson

So you might have to mess with the layers ignoreEvents property or set the layer.style.pointerEvents = "all" for the events to pass through.

Read the entire post on Facebook