Toggle CSS Transform Button For All Elements with the * Selector

Question

Been trying to solve this all day, but just can't work it out. It's probably something really simple, but nothing seems to work.

I am using Divi scroll animations. However, on some devices they are a bit too much, so I made a button that switched them off, by disabling transform globally. However, I also want to be able to turn it back on again. I tried toggle, but it didn't work.

Because I'm not targeting a style, I can't use class toggles etc. It probably needs to be a style toggle, but on the *. So I was wonder if there is a way of doing this; or even better, how can this can be done without Jquery?

This is the site I'm trying to get it to work on.

Any solutions, are really appreciated.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#turnOffNow").click(function(){
    $("*").css("transform", "none");
  });
});
</script>

<div id="turnOffNow" style="color:#fff;">
  Turn Off Animations
</div>

Kosonome · Accepted Answer · 2020-02-28 15:24:42Z

1

I think this will solve your problem.

Add a class to your CSS:

.notransform * {
    transform: none;
}

Append this class to your html tag in your page:

$("#turnOffNow").click(function(){
    $("html").toggleClass("notransform");
});

You can also try transform: none !important to force that.

answered Feb 28, 2020 at 15:24

Kosonome

4802 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oliver Over a year ago

+1 because your answer is valid, but it would be helpful to explain why this is the case, as this will help @InvariantChange from coming across similar errors in the future

Electron Over a year ago

I can work out why from the answer. It's using the notransform class to call the all selector, then I can use that to toggle the class. Can't believe I missed that one. Super simple. I guess, I'll now just convert this method in to vanilla JS to avoid calling another jQuery js file. Many thanks!

Yosef Tukachinsky · Accepted Answer · 2020-02-28 15:27:37Z

0

for be able to turn it on, assuming you has some inline transforms which was gone, better you give them css class, which will give them transform:none !important then remove it for turn on.

example css:

body.no-transform * {transform: none !important}

js (jQuery)

function removeTransform(){$('body').addClass("no-transform")}
function backTransform(){$('body').removeClass("no-transform")}

js (Vanilla)

function removeTransform(){document.body.classList.add("no-transform")}
function backTransform(){document.body.classList.remove("no-transform")}

answered Feb 28, 2020 at 15:27

Yosef Tukachinsky

5,9051 gold badge15 silver badges32 bronze badges

Collectives™ on Stack Overflow

Toggle CSS Transform Button For All Elements with the * Selector

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related