Context messages when mouse is over a element

Ask the community
,
1

I`m new using code so I need your help.
Passing the mouse over a field that is marked as read only, or clicking on it pretending to enter data, I would like a message to appear with the appropriate indications, to prevent the user from claiming that can not edit it. For example, as it may seem, “This field can not be edited” or something like that.
I’ve seen the onClick, onDblclick and onMousein events of Corvid Reference, but I’m not able to write the correct code so that messages appear.

Thank’s

2

This must be deja vu, this question was posted a few days ago…

Use onClick, onDblclick, onChage or onMouseIn and onMouseOut to show an element that says whatever message you want to be shown using show and hide.

Have it set to be hidden on load when the page first loads and then in whatever function you use, then add the your element show code underneath it.

Akthough note that onMouse will not work on mobile so for that you have to use onClick and you can still have onMouse on desktop versions with onClick being used for mobile versions only by using the form factor command for desktop or mobile use only.

3

Hi, thanks for your response.

I had tried many times already, but it didn’t occur to me that Show() or Hide(), in collaboration with a text element, were worth it.

In other languages, you usually write the message as a property of the element that is shown when the mouse event you determine occurs, and that confused me.

I think I have done what you tell me, it seems really simple, but it doesn’t work for me, so my clumsiness is multiplied by a thousand right now.

In the above image, you can see marked as 1, the read-only field whose onMousein event I want to show the message that is marked as 2.

In the properties of text 2 (# text19), I marked the hide box when loading, and in the properties of field 1 (# input1) I created an onMousein event so that when I mouse over it, with the function show () show the message.

I do not know why, but it does not work

What am I doing wrong?

Thank you

This is the code at the top of the code editor:

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;

export function page1_viewportEnter(event) {
$w(“#input2”).focus();
}

//---------------------------------------------
export function input1_mouseIn(event) {
if ( $w(“#text19”).hidden ) {
$w(“#text19”).show();
}
else {
$w(“#text19”).hide();
}
}
//------------------------------------------

$w.onReady( function () {

let user = wixUsers.currentUser;

user.getEmail().then((email) => {
let userEmail = email;
})
})
.
.
.

4

Move this part of your code above the exports and below the imports, as onReady call should be at top underneath your import calls.

Have a read here about onReady.
https://www.wix.com/corvid/reference/$w.html#onReady

 $w.onReady(function () {
 
 let user = wixUsers.currentUser;
 user.getEmail()
 .then((email) => {
 let userEmail = email;
 })
 })

Plus you seem to have found the api reference already for hidden(show and hide) and if you need it, collapse and expand too.

Finally just double check to make sure that you have matching pairs of ‘(’ and ‘)’ and ‘{’ and ‘}’.
The same amount of open and closed parentheses and curly brackets in your code.

5

Just thinking too, that if you have the text 2 already set up in the properties panel as hidden on load, then you only really need to have the show call included in the mouseIn function.

Also, before I forget too, you have done your mouseIn, so you will probably also need a mouseOut if you want the text 2 element to be hidden again.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut

The same with your onViewportEnter call too, do you want it to be blurred again when you do onViewportLeave?
https://www.wix.com/corvid/reference/$w.ViewportMixin.html

Plus, for mobile or desktop only code, then use form factor.
https://www.wix.com/corvid/reference/wix-window.html#formFactor

With a tutorial from Wix too.
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only

Although, remember that if you use this, you can’t preview it to test it, it will only work properly when viewing on a live and published site.

I’ve used this myself to change the menu button on my mobile version to another icon that I wanted to use instead, going off topic now!
https://www.wix.com/corvid/forum/corvid-tips-and-updates/introducing-the-new-mobile-menu
https://www.wix.com/corvid/reference/$w.MenuContainer.html

6

Hi, thanks for your response.

I tried to do what you recommended, but it did not work.

“Export function”, inside onReady (), gives an error in the editor indicating that this function has to be at the highest level.

I tried putting it at the end, out of onReady (), there is no error, but it did not work.

So, after many tests changing the position without any success, I decided to cover the code with “//” line by line to see which part of the code was interfering, because the function was correct (I tried it in a new page without more code than itself).

And after so much work and bothering you with my little problems as a beginner, the solution could not be simpler (in my land there is a poular saying “If it was a dog he would have bitten you” because you have it in front of your nose and you do not see it).

Well, the solution was simply to change the order of the two “Export” functions. It’s that simple:

  • Putting " export function input1_mouseIn(event) {" first and below it " export function page1_viewportEnter(event) {" it worked.

I don’t really know what the reason is, although I suppose that force the focus
In a certain field as a first option when entering the page, obviously has had something to do.

I couldn’t relate it, because knowing that requirement, I clicked with the mouse in field “2” to put the focus on it, and I didn’t realize that the focus was not in “1” when entering the page.

When I discovered that latter, I simply changed the order of these two functions and it worked.

Excuse me for extending so much. I thank you very much for your contribution, because it has helped me to reinforce my ideas about it, to focus on the problem and to stop giving “sticks of blindness”.

Thank you.

7

@opadia2019

Glad to hear that you got it working, it always tends to be something simple for the answer too!
:+1:

Plus there is never a beginner problem as it is just another solution to many ongoing issues that all users will come across using whatever form of code that they are using.

Everybody has problems sometimes and the answer is most often staring them back right in the face, even experienced coders get things wrong or have better ways of working suggested to them, just read the replies from others in other forum posts.

Many times I’ve got my code working fine, only to have a little fiddle somewhere to supposedly make it better and muck it all up, then having a complete brain freeze as to how to put it to rights again!