We got the question how to add a hover effect to a control in Xojo for a web application. For a CSS file to the application, you can of course just use the :hover pseudo class to add whatever effects you like. But here we like to add the effect on the fly in code to a label as needed.
Here is a code snippet showing how we add three mouse event handlers in JavaScript to change the color:
Var s As String = "document.getElementById('"+Label1.ControlID+"')."
Var s1 As String = s + "addEventListener('mouseenter', function() { this.style.color='red'; });"
Var s2 As String = s + "addEventListener('mouseout', function() { this.style.color='green';});"
Var s3 As String = s + "addEventListener('mouseover', function() { this.style.color='yellow';});"
Me.ExecuteJavaScript s1
Me.ExecuteJavaScript s2
Me.ExecuteJavaScript s3
As you see we use ControlID to know what random six digit code is used internally to reference this control. With document.getElementById() we can find the control. Once we grabbed the control, we can use addEventListener to add the event and put in a function to do the style change.
Please try and let me know if this works for you.
somehow i would prefer having a JavaScript file and include it in the web app,
because its better editable in Visual Studio Code.
last few months i spend much time in JavaScript and DOM (Document Object Model) for a web project.
I like it Christian, but I’m unable to get it to work. I’m a little uncertain if this needs to be located anywhere in particular… since the idea was to be able to change the style on the fly in code… I assume that as long as the control in question exists…then it seems like it ought to work. Since this adds an event listener… can a subsequent execution override the initial values…or do I need to remove the event listener before I could re-add it with say different colors?
Nevermind…I got it to work…I had the text color property set in the IDE and that apparently will override this CSS styling. – I’m just now getting into Web 2.0 and I’m missing my Web1.0 WebStyles – I know…I know… Javascript & CSS is awesome. Now I gotta dink with that. … and it sounds like Markus edits these elements in Visual Studio Code. I hope they don’t make me start using Angular or React next.
at place of employment (non xojo) i use vs code for javascript (and html,css) it have a important outline view.
for hundreds of methods or maintenance classes its a good editor.
and that apparently will override this CSS styling
