Container Hover Action Linking?

Ask the community
1

What I try to manage to do for one of our websites is, that these 5 containers (4 picture/text, 1 text/button) become interactive.

For example:
If someone hovers on the far-left one (the one with the passport picture) that this one either moves or moves and expands. At the same time, the far-right one (Header/Paragraph) should show a text and paragraph for the picture that the customer hovered over.

Question:
Is there currently a way to do this in EditorX? Can I somehow put two containers together to give them individual hover actions or link the hover actions together so that if someone hovers the far-left container and it does its thing so that the far right one does its thing as well?

2560×1278 463 KB

Thank you very much in advance.

2

I think these two resources will show you how to accomplish what you’re trying to do:

First, this video shows you how to use code to get text to appear and disappear when the user hovers over an element on your page:

Second, this prior question / answer show you how to stack containers so that they appear to occupy the same space when they are expanded / collapsed.

3

Thank you very much. I will definitely give this a look and try it out.

4

Okay found out how to code that parts in. Now I would just like to add an effect to this code. I know what it should be, but for some reason if I try to code it into the “transition” it doesn’t let me or doesn’t show me the options of effects that are available. Any idea why?

5

What’s the effect you’re trying to implement? What’s the code you’re using?

6

I currently use code to generate “effects” and “transitions” that are not being able to be done by the normal interface. The collapse and expansion, as well as the hide and show effect is kind of “rough” and “direct”. I’d like to smooth them down by an ease_in and ease_out like you could do in the hover actions.

2560×1335 461 KB

7

Ah, ok. Two things I’d suggest:

  1. Post this question on the Velo forum, where it will be seen by people with coding expertise. I’m going to play with this and will let you know if I come up with something, but I’m a beginning coder, so you won’t want to count on me for an answer. Here’s a link to the Velo forum: https://www.wix.com/velo/forum/coding-with-velo

  2. When you post your code on the Velo forum, you should copy the code from your site editor and paste it into your post as text. Don’t post an image – it’s hard to see and can’t be copied and edited. The Velo experts will appreciate that.

Good luck! And I’ll get back to you if I find a solution I’m confident in.

8

@medtrade-kaiser . I just tried adding an effect, and it worked for me.

Are you sure you’re specifying it correctly? Below is the code I used on my sample page. Are you putting the ‘fade’ effect in quotes? It will fail if you omit the quotes. (I note that the code image you posted doesn’t have a transition specified at all)

$w ( “#box1980” ). show ( “fade” );

9

FYI, just in case you haven’t looked at it, here are the Velo API specifications for using transitions with ‘.show’:

10

Thanks. The “fade” part was what I couldn’t figure out. I know there were effects but not sure how to incorporate them in it. Hopefully, I can figure out how to add the “speed” of which it fades.

11

Check out the documentation in my link, above. It includes examples.

Below is the code I wrote after reading those examples. First I set the options into a variable fadeOptions . Then I used that variable to pass the options into the effect.

I set the duration to one second and the delay to zero. It worked. I played around setting to different delays and durations, and it all worked well.

let fadeOptions = {
    "duration":   1000,
    "delay":      0
};

export function button11980_mouseIn(event) {
    $w("#box1980").show("fade", fadeOptions);
}
12

Thanks. In the meantime, I already found it.

Sadly, there seem to be no option for implementing a delay or effect in a collapse or expand yet. And what I like to do visually does not work with show/hide ^^.

13

@medtrade-kaiser Have you tried doing both?

That is, hide AND collapse the element. Then, when you want to expose it:

  1. First expand it

  2. Then show it, with fade

I tried that, and it worked for me. I got the benefit of expand / collapse, but I was able to get the fade effect from show. The result is an effect that is equivalent to expand with fade.

export function button11980_mouseIn(event) {
    $w("#box1980").expand();
    $w("#box1980").show("fade", fadeOptions);
}
14

How much Duration or other parameters did you use to make it a properly visible fade effect and not just an instant pop up of the part of the page?

15

Currently working with the following:

let fadeOptions4 = {
“duration” : 1500 ,
};

export function IntEduBox_click ( event ) {
$w ( ‘#SectionOverviewService’ ). collapse ();
$w ( ‘#SectionOverviewService’ ). hide ( “fade” , fadeOptions4 );
$w ( ‘#InternationalEducationSection’ ). expand ();
$w ( ‘#InternationalEducationSection’ ). show ( “fade” , fadeOptions4 );
}
export function IntEduBox_mouseIn ( event ) {
$w ( ‘#InternationalEducation’ ). show ( “fade” , fadeOptions );
}
export function IntEduBox_mouseOut ( event ) {
$w ( ‘#InternationalEducation’ ). hide ( “fade” , fadeOptions );
}
export function InternationalEducationButtonCollapse_click ( event ) {
$w ( ‘#InternationalEducationSection’ ). collapse ();
$w ( ‘#InternationalEducationSection’ ). hide ( “fade” , fadeOptions4 );
$w ( ‘#SectionOverviewService’ ). expand ();
$w ( ‘#SectionOverviewService’ ). show ( “fade” , fadeOptions4 );
}

For some reason it works if I collapse/hide the section (last export function) but it doesn’t work for me in the first export function when clicking on the container. It doesn’t show the fade effect. Am I missing something?

16

Interesting is also that if I delete:
$w ( ‘#InternationalEducationSection’ ). hide ( “fade” , fadeOptions4 );

the whole effect stops working ^^.

17

I’m a bit confused by the mix of click actions with mouseIn and mouseOut actions. You originally described hovering over an image and having some text appear. You didn’t mention clicks. I don’t know the relationship among all the elements, so I don’t know if the click and hover interactions might be interfering with one another.

To get some clarity, I put together a simplified example of what I thought you were originally trying to accomplish – and made it work.

Here’s the original state – a pair of photos, side by side. No text appears.

1844×652 117 KB

When I hover over the photo on the left, matching text appears and the photo grows a bit larger:

2082×708 150 KB

And when I hover over the photo on the right, matching text appears and the photo grows a bit larger.

2072×682 143 KB

The change in the photo size was simply a hover interaction – no code required – so lets ignore that (other than to say that the photos are in containers, because hover actions must be applied to containers).

As for the text, here’s the layout. The two text boxes are in a container that’s got a two-row grid. One text box appears in each row. Each row is set to fit its content and will collapse when the content collapses.

2080×1256 919 KB

And here’s the code.

let fadeOptions = {
    "duration":   1000,
    "delay":      0
};

export function leftPhoto_mouseIn(event) {
    $w("#leftBox").expand();
    $w("#leftBox").show("fade", fadeOptions)
}

export function leftPhoto_mouseOut(event) {
    $w("#leftBox").hide();
    $w("#leftBox").collapse()
}

export function rightPhoto_mouseIn(event) {
    $w("#rightBox").expand();
    $w("#rightBox").show("fade", fadeOptions)
}

export function rightPhoto_mouseOut(event) {
    $w("#rightBox").hide();
    $w("#rightBox").collapse() 
}

Using this example, can you explain where the clicks come into play? Or can you tell me what I’ve misunderstood about what you’re trying to do.

btw, @medtrade-kaiser, as I mentioned in my first post, this is really a question you should post on the Velo forum, because that’s where the coding experts hang out. I’m just learning, and while it’s interesting for me to work on your problem, I’m not your best resource.

On the positive side, however, maybe I can help you clarify your questions so you get better answers from the experts. They can’t help much if your problem isn’t clearly defined.