mouseover event

Use this board to ask questions or have discussions with other Genie users.
Post Reply
Wayne C.
Experienced User
Posts: 139
Joined: Mon Aug 16, 2010 12:04 pm
First Name: Wayne
Last Name: Colasinski
Company Name: Sofworx / Tantara Transport
Contact:

mouseover event

Post by Wayne C. »

I had a request to highlight some fields on a screen when the mouse/cursor hovers over. I tried using the following script in the mouseover event in 2 fields on a random screen rendering.

script: document.getElementById("I_8_21").style.backgroundColor = "red"; (I've hard coded the field Id's in this case but I will convert the script to a function at some time so I can pass Id's as parameters.)

It only works if I "click" on the field. Or if I tab from field to field using the tab key. The original background color is restored when I move the cursor outside the field. Is there something I'm missing? The cursor does change to crosshair when the mouse goes over the fields. This is not an emergency but this feature may come in handy down the road. Thanks for any help.
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: mouseover event

Post by Scott Klement »

Wayne, I tried this and it worked fine. I did the following:

onmouseover event:

Code: Select all

getObj("I_18_7").style.backgroundColor="red"
onmouseout event:

Code: Select all

getObj("I_18_7").style.backgroundColor="white"
Note: getObj() is just a shortcut for document.getElementById()

As expected, it changes the background color to red when the mouse is over the field, and changes it back to white when the mouse is not.

Possibly the problem is tht you have "script:" in front of yours. That normally is used for a property that takes a value to tell it the data is JavaScript to be run, rather than a character string. Since the "onXXX" events are ALWAYS javascript, you never code "script:" in them. I can't see how clicking the field or tabbing to it would work around that problem, though? That doesn't make much sense. But, in my tests, it worked fine with the code above.
Wayne C.
Experienced User
Posts: 139
Joined: Mon Aug 16, 2010 12:04 pm
First Name: Wayne
Last Name: Colasinski
Company Name: Sofworx / Tantara Transport
Contact:

Re: mouseover event

Post by Wayne C. »

Thanks Scott for the code.

I've got 3 fields that I made the change for. One's an output field and 2 are input fields. The code works wonderfully for the output field and the input field that has the cursor located in that field. The input field that DOES NOT have the cursor located in itself seems to be unaffected by the code... unless I tab to that field, in which case the mouseover code works perfectly.
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: mouseover event

Post by Scott Klement »

I think by default, these widgets have the "input" CSS class on them. This CSS class sets a background image to give the field a certain look.

Since background images take precedence over background colors, you won't see the mouseover effect.

When you put focus in a field (i.e., tab to it or click on it) it applies a different CSS class to make it stand out that the cursor is in the field. It looks like this replaces the input class -- that's why the mouseover works when you tab to it.

Try using the visual designer to remove the "input" class from the widget. Does your mouseover work now?
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: mouseover event

Post by Scott Klement »

Maybe an easier workaround than removing the input class is just to remove the image in the onmouseover event. For example, set your onmouseover to this:

Code: Select all

getObj("I_18_12").style.backgroundColor="red";
getObj("I_18_12").style.backgroundImage="none";
Wayne C.
Experienced User
Posts: 139
Joined: Mon Aug 16, 2010 12:04 pm
First Name: Wayne
Last Name: Colasinski
Company Name: Sofworx / Tantara Transport
Contact:

Re: mouseover event

Post by Wayne C. »

Thanks Scott. This morning, I tried your second suggestion and that worked like a charm! I may try your first suggestion just so I can get a better lay of the land.

Thanks again.
Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests