Button inside a link-card/Interactions

Ask us anything
1

Hi, I hope you guys are having a great day, I have 2 questions.

  1. I have a button inside a card that is also a button, if I click at the button inside it triggers the card action also. How can I make it so that it doesn’t work that way using no-code/custom javascript,

  2. What is the best approach to make interaction in WeWeb? i.e. if something goes from no display to display it fades in or the sidebar slides in and out when on click.

Thank you.

2

For your point 1), you can use custom JS and event.stopPropagation(), which will stop the event so the action on the parent button will not trigger.
For your point 2) you can use the transform/animation property to have animation activated.

3 Likes
3

Sorry for 1 actually I don’t understand javascript much, can you show me an example how to do it for my case? On the 2nd I also don’t understand how to properly setup the animation in weweb. I hope you can clarify

4
  1. on the button workflow as your first action add a custom javascript action
    image
    image1005×526 41.8 KB

    result:
    chrome_Vu2W0j7IRD
1 Like
5
  1. For animatable properties you can use transitions
    image
    image687×557 48.1 KB

for example you can animate the transition of opacity binding it to a variable and then adding a transition.

result:
chrome_7C6S42q0st

3 Likes
6

Thank you, 1 works perfectly, on the 2nd, I try to bind the opacity of a card to a variable called ‘opacitycard’, which is default at 0, and made a workflow for a button to change the variable to 1, the transition I put for the card doesn’t seems to be working.

7

how is your transition?

8

still haven’t figure it out

9

try this:

  • the opacity of the element should be bound to a dynamic value between 0 and 1 (eg. bind it to a variable)
  • on the same element in the style panel create a transition as the picture of the previous post
  • with a workflow change the value of the opacity
1 Like
10

doesn’t work I don’t know why. Nvm I used the modal kit for the previous use case. Btw can I make an animation like svelte where if a user searches a table, the results/table row kinda blinks/or changes opacity u would say

11

indeed the modal element has builtin animations for transitions between show and hide. If you are using another element and still need help add some screenshot about your setup (eg. forbula of the binded opacity, transition property, workflow actions changing the transition)

12

do you need to animate a table specifically?
Sure it should be doable with a custom plugin.

13

I’m facing this exact issue (#1), but my parent card is linking to something rather than a workflow being triggered.

image

When I click on the button in the card, the parent card link is being triggered but I don’t want that, just want the button workflow to be triggered. How do I do that? The eventpropogation JS code doesn’t work in this case.

How do I “disable” the parent card’s link if I’m clicking the button inside the card?

14

Have you added a js action with the code event.stopPropagation() as the first action in the button workflow?

15

My bad, that actually works for links too, thank you!

16

Ok, the code stopped working in the live app for some reason. :frowning: Works in the editor but not the published app!

17

I am having this same issue! It doesnt work on the live app anymore @aurelie would you know anything about this?