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?
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.
True
False
You can use If(IsRotated, "rotate180", "") in your Style Classes property.
If(IsRotated, "rotate180", "")
Cleaner, simple and right.
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?
Hi Ronivil,
As Jorge wrote, it should go in the Style Classes property of the element.
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.
Please check this OML, it has 2 implementation, let me know if you have questionsRegards,
CR
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
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!
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.
Hey Roni,
I believe you need to have jQuery reference, and add it as a required script to your screen. Do you have it?
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.
Sorry, I edited my comment with a bit more information. Please try adding it as a required script
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).
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
Sure Roni,
If you add the JS node to the OnReady event of the screen, it works with one click :)
Roni,
Please also try Jorge's answer. jquery is deprecated, don't use it unless you really need to.
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.
Hi Carlos,
Why would one use JavaScript instead of pure CSS?
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.
When I Click on Second Time Then It Will Be Again rotate to its original position how to do this
Could You Please Help Me on This