Hi,
I have a situation and I dont know if it should be an image or not.
I have this rat image and chicken for instance. they have an event OnClick with a handler client action. But there is a point that I wish that if a variable called money(the number 0 on the left) is lower than the cost of the rat or chicken, the image would be less saturated like fade color, and it should be not clickable. But I dont know if this is the right way to do it.
As an example I took this from another website:
Thank you in advance.
Kind regards,
Pedro Boffa
Hi Pedro I put together a quick .oml for you to try.Note that the images are in Link elements and I gave the links a style class name.And I set the Enabled to true or false depending on how my coins there are and how much an item cost (in my example I am using a static entity. In your case you should either use a normal entity or just fixed items. I am doing it this way to cut some corners and show you the concept)
my css looks like this
You can open and play around with the oml attached to see how it works and adapt it for your application
img{ pointer-events: none; }
pointer-events: none;
}
I would do like this, but it's good to get a parent class because if you use just img it will make that style to any image.
So with a parent class would be like this.
.parentclass img{ pointer-events: none; }
Are you building in Reactive or Traditional?
In both cases:
I would create a web block for this.
Its rather easy, because it works like the current button widget: you have a property Enabled. If this is false you can put in the right css to get this less saturated look and in the click you can just do nothing when enabled is false (or even remove the event with javascript).
Hi Pedro,
Rather than have the onclick event on the image I would put the images in links. Then in your link you can set some logic in the enabled property like this:
Then in your css you can add :
a[disabled] > img { opacity: 0.3 }
(or filter:saturate(50%) ) depending on the effect you are looking for.Rather than
a[disabled]
you could also be more specific by giving those links a class of items for example
a.items[disabled]
this prevents other disabled links to follow the same rules
Do keep in mind to verify the Coins < Cost in your action to make sure no-one tempered with the code
Hi, thank you very much for all the help and time you guys are giving to help me.
@Eric Bulters your options its really what I need.
I will try it and give the feedback.
I never created a class and all those stuff.
Just started working with Outsystems 1month ago, so still fresh.
I will look into it for sure.
As it is the first time I am doing it using outystems, can you provide me the whole css block?
Would be something like that?
I just did not yet understand where can I say something like:
if(money < chicken.cost){
Apply the saturated css.
Thank you again for everyones time and help.
Kind regards.
Hey,
Amazing !!
Thank you very much again for the help.
Worked like a charm.
Great to hear so! You are very welcome