Add own CSS properties to a style / web control possible?

Targets Web
1

Hello,

Summery: Is it possible to add additional css properties to a webcontrol in addition to what comes from the assigned style?

Detail explanation of what I want to do:
I have a bunch of overlapping webimages on a page which I want to animate (move a bit when mouse is over one of them and move it back when mouse is not over the image anymore.)

I thought of using a animator. Unfortunatelly it seems to be the case, that mouseenter and mouseexit events are not so well recognized. Although Xojo correctly detects which is the frontmost of the overlapping images, the mousenter event is not always triggered. Especially when slowly moving the mouse (coming from another image). It works better, in case of quick mouse movements.

To make a long story short, I am thinking of letting the browser do what I need. So instead of an animator, I want to use CSS (hover state) of the control.

I have not yet tested, if that will correctly identify the correct frontmost image, but should do.

I would change margin value of the css (using a style with hover settings). But I am wondering if it is possible to add additional CSS properties beside the ones of the style such as css transitions

That would allow to “animate” the changed bottom Margin, when hovering over a image.

Thanks for reading

Stefan

1 Like
2

If you’re already using the WebSDK, you might as well create your own imagewell control that allows this.

3

OK, but this does not answer my question :slight_smile:

I feel, that I am in the wrong sub forum. Please move to GettingStarted or General :slight_smile:

In a WebApplication, how do I assign additional CSS to Webcontrols beyond to what a Style can add?

4

Ah, I thought you were working with the WebSDK.

While there is no built-in mechanism for doing so, some users have found ways to make this work, including creating your own section and sending it to the browser in app.HTMLHeader.

Now that we’re in the correct category, someone will probably pipe up :slight_smile:

5

It is possible to add to an existing WebStyle by adding the proper CSS in App.HTMLHeader.

For instance with the WebStyle Style1 :

<style> .Style1{ border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } </style>