Text underline hover effect

Hello,
Im stuck at this, there is no much information or codes to get this working , I found one code for underline effect it works ok for one of the texts.

but in the same page i have other text i would like to have the same effect but once i copy past it for second text it won’t work.

Anyone know what would be best code to write for this problem. Can I add #text20 & #text24 in the same code maybe?

2 Likes

Hi,
Looks like you have 2 onReady functions!

Hi,
Thank you very much for the reply. I am trying to add this effect to more then one text in one page but I am not sure how can I do that in one function code. I have #text20 which is working fine now but I have #text24 I also need the same effect.

Hi,
As i see, you still have 2 onReady in your code!
So, from what i understood, your default onReady case is to have the text with no underline, which make since to remove all the lines from the two texts onLoad.
Also try to click on the Text Element and assign the mouseIn function .

Here is a snippet code you can use for your case :

$w.onReady(function () {
removeUnderline();  
});


function removeUnderline() {
let text1 = $w("#text20").html;
let text2 = $w("#text24").html;
$w("#text20").html = text1.replace("underline","none");
$w("#text24").html = text2.replace("underline","none");
}

function addUnderline(text) { // it takes the hovered text and apply the effect
let oldHtmlStr = text.html;
let newHtmlStr = oldHtmlStr.replace(/none/i, 'underline');
text.html = newHtmlStr;
}

export function text20_mouseIn(event, $w) {
let text = $w("#text20");
    addUnderline(text);
}

export function text20_mouseOut(event, $w) {
 removeUnderline();
}

export function text24_mouseIn(event, $w) {
 let text = $w("#text24");
    addUnderline(text);
}

export function text24_mouseOut(event, $w) {
    removeUnderline();
}

Hope this helps!
Best,

Mustafa

Hi Mustafa,
Thank you so much for looking into this problem I really appreciate it.
I have copied your code but no success for other text it works for #text20 but no changes for #text24 I am afraid.
I tried to switch text functions and its strange because it still did make underline on #text20 no luck getting underline for #text24

Can i see the full code after copying/pasting my code?
thank you

Thank you for reply Mustafa. I have no other codes there.

Hi,

Suddenly, you missed to add the onClick function in the properties tab for the text24 .

Hi Mustafa, thank you so much, I deleted function for text24 and put it manually in property option. It works now :slight_smile:
Would you mind share your email address because I still got some things what I am not clear of but I can not get any information, and here it takes ages to get responses, I would really appreciate your help.

Thank you so much for help so far.
Regards,
Sandis

Hi Mustafa, i got the same Problem like MyFBAJourney but i cannot solve the problem somehow. Actually i just have 1 textbox where i want to apply this but it is still not working.

$w.onReady(function () {
removeUnderline();
});

function removeUnderline() {
let text1 = $w("#text1").html;
$w("#text1").html = text1.replace("underline","none");
}

function addUnderline(text) { // it takes the hovered text and apply the effect
let oldHtmlStr = text.html;
let newHtmlStr = oldHtmlStr.replace(/none/i, 'underline');
text.html = newHtmlStr;
}

export function text1_mouseIn(event, $w) {
let text = $w("#text1");
addUnderline(text);
}

export function text1_mouseOut(event, $w) {
removeUnderline();
}

do you might have a suggestion for me? I already implemented every function via properties-panel so this should´nt be the problem.

Appreciate it!
Marian

@marianklose Did you get this working? I figured it out if you still need to know.

@jackachenbach You can try to me :slight_smile:


Hello, friends, I had marked a red box on the attached jpg. I need a menu in text underlines after mouseover. I made a recent website but I don’t have any idea about Html coding,
I hope you, friends, what I need.

please help me I will pay for this work

Mustafa Hammouz let me know, please.

www.kncadservice.com is my website.