WebContainer hover style

Targets Web
1

I am displaying an array of WebContainers (each with a WebImageViewer Picture) on a Flex Layout WebPage and I want to have the Container currently under the mouse to indicate it is available to be clicked. WebButtons do this automatically.

As there is no WebStyle Hover property and no MouseEnter/Exit Event, how could this be achieved?

  1. Via some JavaScript magic?
  2. Use a large transparent WebButton on the Container (assuming I can assign it a Picture)
  3. Some missing WebStyle property I haven’t found?
  4. Some missing Event I haven’t found?
2

You can change the cursor for a control with CSS:

3

I can get you the mouse events but it’s a hack. Fair warning about hacks and framework support and all that. I stopped selling TP_WebKit publicly, but you can send a private message if still interested.

The less Xojo-code-y way is to use CSS which will give a better response, but I’m not sure if you can use classes as designed or if you’ll have to use a Javascript injection for each container.

Any way you approach the problem it seems that this isn’t in the framework :frowning:

4

If you just need to change how the cursor looks like, then it’s easy.

Opening event:

Me.Style.Cursor = WebStyle.Cursors.Pointer

If you want to change a background color, for example, then you’ll have to either create a hover CSS class and assign it with JS, or use some JS. Combined with AddTransition it will look great.

This is an example using jQuery (place it in a constant, replace the IDs and colors, then call it using ExecuteJavascript):

$('#{{controlID}}')
  .mouseenter(function() { $('#{{targetID}}').css('backgroundColor', '{{hoverInColor}}'); })
  .mouseleave(function() { $('#{{targetID}}').css('backgroundColor', '{{hoverOutColor}}'); });

Please notice the “controlID” could be something different to the “targetID”, for example if you just need to modify the background of a specific child element.

The same example, but using CSS instead, would be adding the following code to the App → HTML Header:

<style>
.example-class { background-color: #ffaa00; }
.example-class:hover { background-color: #aaff00; }
</style>

Then, you can add that class just to the elements you need, using ExecuteJavascript, in the Opening event of the control:

Me.ExecuteJavaScript("$('#" + Me.ControlID + "').addClass('example-class');")
6 Likes
5

I fixed it using a GraffitiStyle. There is no need for a MouseExit style, but I added a pointer Cursor:

Var MouseEnter As GraffitiStyle = GraffitiStyle.Create(Session, "CubeHover", "background-color: #CCCCCC", GraffitiStyle.States.Hover)

Me.Style.Cursor = WebStyle.Cursors.Pointer
MouseEnter.AddTo(Me)

Thank you all!

2 Likes