Log in to AnswerLog in to Follow
UserImage.jpg
Ronivil
20Views
19Comments
Solved
How to rotate arrow icon 180 degrees onclick
Question
JavaScript
Reactive
CSS
Application Type
Reactive

Hello! I'm working on an app where i need to rotate an basic arrow icon 180 degrees when user clicks it. I have tried javascript solutions and css but none of them are working for me. 

Any ideas?

0
0
04 Mar
2019-09-24 18-41-25
Jorge Martins
mvp_badge
MVP
Solution

Hi Roni,

If all you need is rotation (no animation involved) you can achieve that with a simple CSS class.

Create a CSS class similar to this one:

.rotate180 {
  transform : rotate(180deg);
}

Then it's a simple matter of deciding if you should apply that CSS class or not to the icon based on a variable that you toggle to between True and False when the user clicks the icon.

You can use If(IsRotated, "rotate180", "") in your Style Classes property.

See solution in context
2
0
04 Mar

Cleaner, simple and right.

0
0
04 Mar

Hello and thanks for your answer. Being relatively new to outsystems, i need help implementing this solution. Could you explain how and where to implement the if sentence?

0
0
04 Mar
2020-09-15 13-07-23
Kilian Hekhuis
mvp_badge
MVP

Replying to Ronivil's comment on 04 Mar 2022 10:53:57

Hi Ronivil,

As Jorge wrote, it should go in the Style Classes property of the element.

0
0
04 Mar

Replying to Kilian Hekhuis' comment on 04 Mar 2022 10:55:14

Thanks, it works now. However, i have the arrow on a list item within an accordion, if i click the list item to open the accordion, arrow doesnt change. I tried to put the screen action where im defining the boolean value in to the onToggle event handler but then clicking the arrow doesnt do anything.

0
0
04 Mar

Replying to Ronivil's comment on 04 Mar 2022 11:16:25

Please check this OML, it has 2 implementation, let me know if you have questions

Regards,

CR

RotateClick.oml

0
0
04 Mar

Hi Roni,

do you want an instant rotate or do you want to see the full movement until it reaches the end?

If you want an instant rotate you can just use 2 icons, 1 in original position and another one rotated. Use a status variable to control the position displayed:

Regards

0
0
04 Mar

Hello Roni,

I've done some research on this and found this piece of code: https://stackoverflow.com/questions/26173376/rotate-font-awesome-icon-on-click

It worked for me when I was trying to find a way to help you! You can try it here: https://laurafidalgo.outsystemscloud.com/Rotate_Icon/Rotate_Icon?_ts=637819826240693284

I'm leaving here an oml, if you want to look at the code. This gives you full movement and requires 2 clicks.

Hope this helps you!

Rotate_Icon.oml

1
0
04 Mar

Hey and thanks for your answer! I have tried a similar solution to yours and i got "$ is not defined" on button click. I got the same error when i tried to implement your solution.

0
0
04 Mar

Replying to Ronivil's comment on 04 Mar 2022 09:39:55

Hey Roni, 

I believe you need to have jQuery reference, and add it as a required script to your screen. Do you have it?

0
0
04 Mar

Replying to Laura Fidalgo's comment on 04 Mar 2022 09:41:38

Well that seems obvious, no i dont have this. Neither this was not mentioned in any docs i have read, correct  if im wrong of course.

I added it to the dependencies but im still getting the same error.

0
0
04 Mar

Replying to Ronivil's comment on 04 Mar 2022 09:44:54

Sorry, I edited my comment with a bit more information. Please try adding it as a required script

0
0
04 Mar
2020-09-15 13-07-23
Kilian Hekhuis
mvp_badge
MVP

Replying to Laura Fidalgo's comment on 04 Mar 2022 09:46:13

Note that jquery is deprecated, and you shouldn't use it for new projects. Using CSS transform is a way better alternative (see Jorge's answer below).

0
0
04 Mar

Replying to Laura Fidalgo's comment on 04 Mar 2022 09:46:13

Thanks, i got it working now! Could you tell me how to remove the 2 click option? I would like the rotation to be instant with one click

0
0
04 Mar

Replying to Ronivil's comment on 04 Mar 2022 09:53:24

Sure Roni,

If you add the JS node to the OnReady event of the screen, it works with one click :)

0
0
04 Mar
2020-09-15 13-07-23
Kilian Hekhuis
mvp_badge
MVP

Replying to Ronivil's comment on 04 Mar 2022 09:53:24

Roni,

Please also try Jorge's answer. jquery is deprecated, don't use it unless you really need to.

0
0
04 Mar
2019-09-24 18-41-25
Jorge Martins
mvp_badge
MVP
Solution

Hi Roni,

If all you need is rotation (no animation involved) you can achieve that with a simple CSS class.

Create a CSS class similar to this one:

.rotate180 {
  transform : rotate(180deg);
}

Then it's a simple matter of deciding if you should apply that CSS class or not to the icon based on a variable that you toggle to between True and False when the user clicks the icon.

You can use If(IsRotated, "rotate180", "") in your Style Classes property.

2
0
04 Mar

Cleaner, simple and right.

0
0
04 Mar

Hello and thanks for your answer. Being relatively new to outsystems, i need help implementing this solution. Could you explain how and where to implement the if sentence?

0
0
04 Mar
2020-09-15 13-07-23
Kilian Hekhuis
mvp_badge
MVP

Replying to Ronivil's comment on 04 Mar 2022 10:53:57

Hi Ronivil,

As Jorge wrote, it should go in the Style Classes property of the element.

0
0
04 Mar

Replying to Kilian Hekhuis' comment on 04 Mar 2022 10:55:14

Thanks, it works now. However, i have the arrow on a list item within an accordion, if i click the list item to open the accordion, arrow doesnt change. I tried to put the screen action where im defining the boolean value in to the onToggle event handler but then clicking the arrow doesnt do anything.

0
0
04 Mar

Replying to Ronivil's comment on 04 Mar 2022 11:16:25

Please check this OML, it has 2 implementation, let me know if you have questions

Regards,

CR

RotateClick.oml

0
0
04 Mar

please check this JSfiddle 

I've created a pure Javascript method that dosen't require JQuery, and is based on CSS

you have 2 classes one that rotates with animation and another one that does a imediate rotation without animation.

you can tweek it to your own taste.


Regards

CR

0
0
04 Mar
2020-09-15 13-07-23
Kilian Hekhuis
mvp_badge
MVP

Hi Carlos,

Why would one use JavaScript instead of pure CSS?

0
0
04 Mar

Replying to Kilian Hekhuis' comment on 04 Mar 2022 10:50:52


The javascript is just to overcome the click problem, because you can't apply something on click with just CSS3, so a bit of javascript is required to handle the click portion, basicly just adding a class to the element.

0
0
04 Mar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.