How to add link to iFrame?

Ask the community
, ,
1

Question:
How can I add a link to my iFrame?

Product:
Wix Studio

What are you trying to achieve:
I want to have a customized horizontal menu: like on this website (top left): https://melaniebrandel.ch/

I was not able to create this underline-animation with a default text-element & CSS/JS…
So I create an iFrame and the animation works!
But now I cannot link the text (iFrame) to another page…
Anyone know how this custom horizontal menu can be achieved in Wix Studio?

What have you already tried:
I tried to create the underline-animation with the code-panel, but couldnt find a solution.
I then created the text with an iFrame (animation works this way, but not the link…)

Additional information:
Im thinking about switching to reakt or webflow, because I feel like Wix was not created to customize a website in such detail through code, opinions?

Anyway thanks in advance! :slight_smile:

2

Hi, Raffael_Kramer !!

The iFrame element provided as a built-in feature in Wix essentially functions as a separate layer of HTML that floats on top of the Wix site. Because of this, directly linking to another page on the Wix site from within the iFrame can be challenging. To achieve this, you may need to use .postMessage to notify the Wix site (main site) when something is clicked inside the iFrame, then handle that with .onMessage on the Wix site (main site). From there, you can use wixLocationFrontend.to("/somepage"); to navigate to a different page.

Alternatively, going back to the original point, it’s likely that the text animation you’re aiming for can be implemented solely within Wix Studio. While the built-in animations in the editor don’t seem to include that specific reveal animation, you could write a CSS animation similar to what you used inside the iFrame in the global.css file. :wink:

You would then write Velo code to attach the class containing the CSS animation to a line element positioned below the text element when you hover over the text. This should achieve the desired effect without the need for an iFrame. :raised_hands:

like this … ( Please pre-attach the line class to the line1 element.)

// global.css

.line {
    width: 0;
    transition: width 0.8s ease-in-out;
}

.line.expand {
    width: 300px;
}

// pageCode

$w("#text1").onMouseIn(() => {
    $w("#line1").customClassList.add("expand");
});

$w("#text1").onMouseOut(() => {
    $w("#line1").customClassList.remove("expand");
});
3

Hey Onemoretime!

Thanks alot for the reply!
I will try this out in the next few days!

I’ll let you know if it worked :slight_smile:

1 Like