Change CSS on User Interaction

What is the best way to achieve a CSS change on User Interaction?


For example when the user clicks on a container, it changes background-color.

Hi Gama,

You can use the advanced JS section to write custom CSS changes on user event.

For instance onClick event on any element say div named commentSection

$('#commentSection').click(function() {
    $('#foo').css({
        'background-color': 'green',
        'color': 'black',
        'font-size': '26px'
    });
});

Regards,

Swatantra


Hi, friend!

Use the Extended Properties to set the JavaScript event and change the class dinamically:

onclick / onchange / onblur etc.

" document.getElementById(' " + MyContainer.Id + " ').className = ' TheClassYouWant ' ; "


That way you cand change between classes accordingly to user interaction. 


Hi,

if you want this in Reactive Web or Mobile App it is even simpler, you can just and if in the expression on the classes property and define which CSS classes should be applied.

For the extended property solution as described by others, you cal also set the class property and use the assign statement to set the proper class, rather than specific CSS elements.

Regards,

Daniel

You can do it using normal javascript using this in your code

if(value<10){
       document.getElementById("sample").style.color="blue";
}

OR You can do it using jQuery:

if(value<10){
       $("sample").css("color","blue");
}

Choose whichever appeals to you.

Of course you must have IDs as @Barmar suggested:

<td id='sample'>Ca</td> <td><INPUT TYPE=TEXT NAME="Ca" DISABLED></td>

The above code now changes the style of Ca alone as the id exists for that tag.

And you can make changes to any of the css properties:

Smith Clarkson wrote:

You can do it using normal javascript using this in your code

if(value<10){
       document.getElementById("sample").style.color="vlc"; 
}

OR You can do it using jQuery: 9Apps & VidMate

if(value<10){
       $("sample").css("color","blue");
}

Choose whichever appeals to you.

Of course you must have IDs as @Barmar suggested:

<td id='sample'>Ca</td> <td><INPUT TYPE=TEXT NAME="Ca" DISABLED></td>

The above code now changes the style of Ca alone as the id exists for that tag.

And you can make changes to any of the css properties:


will anyone bother to tell if this works.?

Gama wrote:

What is the best way to achieve a CSS change on User Interaction?


For example when the user clicks on a container, it changes background-color.


Hi Gama,


Please see the attached oml with minimum effort

Gama wrote:

What is the best way to achieve a CSS change on User Interaction?


For example when the user clicks on a container, it changes background-color.

Hi Gama,

You can also go by the styling way instead involving the JS or OS flags :)

define a CSS as below:

.gal-cont{ 
  background:#fff
}

.gal-cont:focus{ 
  background:#0a9c2d
}

Now apply this class to your container

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus


Hope it helps,

Assif


Swatantra Kumar wrote:

Hi Gama,

You can use the advanced JS section to write custom CSS changes on user event.

For instance onClick event on any element say div named commentSection

$('#commentSection').click(function() {
    $('#foo').css({
        'background-color': 'green',
        'color': 'black',
        'font-size': '26px'
    });
});

Regards,

Swatantra


I like this idea, and I feel bad for not knowing this but what should be the value of #foo ? css filename ? if so which one ?


Solution

Gama wrote:

Swatantra Kumar wrote:

Hi Gama,

You can use the advanced JS section to write custom CSS changes on user event.

For instance onClick event on any element say div named commentSection

$('#commentSection').click(function() {
    $('#foo').css({
        'background-color': 'green',
        'color': 'black',
        'font-size': '26px'
    });
});

Regards,

Swatantra


I like this idea, and I feel bad for not knowing this but what should be the value of #foo ? css filename ? if so which one ?


#foo is the id of any element.

In the example I illustrated, #commentSection is one container and on click of it I am changing the css properties of another element #foo. This could be even be the same container as #commentSection


Solution

Salman Ansari wrote:

Gama wrote:

What is the best way to achieve a CSS change on User Interaction?


For example when the user clicks on a container, it changes background-color.


Hi Gama,


Please see the attached oml with minimum effort

It works really well in such a simple way. Thanks man


Thank you for the answers. 

Really useful, and now I have at least 3 different ways to implement CSS changes on user interaction.


I would like to mark at least 3 answers as the solution, but OutSystems still does not allow me to do that. I marked the one I find most complete for the most case scenarios (that is being able to change CSS of an element by interacting with another element)

Gama wrote:

Salman Ansari wrote:

Gama wrote:

What is the best way to achieve a CSS change on User Interaction?


For example when the user clicks on a container, it changes background-color.


Hi Gama,


Please see the attached oml with minimum effort

It works really well in such a simple way. Thanks man


Good to hear.It helped

Happy coding

Glad Gamma that the issue got solved :)

Cheers!

Swatantra