Javascript, dynamic css and transform

Question

I have a problem with javascript. I need to change a div's class dynamically using .classeName = "..." but it doesn't update itself. For example, I have put a transform into my class. It does a scale and set the transform-origin but nothing appears on my screen. Here's my code:

var panier = document.getElementById("panier");

if (panier.style.display == "none" || panier.style.display == "")
{
    panier.className = "";
    panier.style.display = "block";
    panier.style.webkitTransform = "scale(0, 0)";
}

if (panier.className.search("enleverPanier") >= 0)
    panier.className += panier.className.replace("enleverPanier", "afficherPanier");
else
    panier.className += " afficherPanier";

As you can see, my class afficherPanier does a scale(1,1). The div keeps it's scale(0,0) that I set in case the div isn't visible.

Here's my css

.afficherPanier {
 -webkit-transform-origin: left top;
 -moz-transform-origin: left top;
  -ms-transform-origin: left top;
   -o-transform-origin: left top;
      transform-origin: left top;

 -webkit-transform: scale(1, 1);
 -moz-transform: scale(1, 1);
 -ms-transform: scale(1, 1);
 -o-transform: scale(1, 1);
    transform: scale(1, 1);}

Do you know why the scale(1,1) doesn't work? Thank you! :)

transform is not supported in all browsers. Use a browser's web inspector to see if the class is being applied as expected, rather than relying on a visual result. — Palpatim
– Palpatim, Commented May 17, 2014 at 2:05
Sorry, I was confused by a suggested edit. They were all there before the edit. — Benoît Dubreuil
– Benoît Dubreuil, Commented May 17, 2014 at 2:07

Guolin · Accepted Answer · 2014-05-17 02:36:21Z

1

Right now I'm pretty sure className is being changed to enleverPanierafficherPanier. To fix this, try changing

panier.className += panier.className.replace("enleverPanier", "afficherPanier");

to

panier.className = panier.className.replace("enleverPanier", "afficherPanier");

answered May 17, 2014 at 2:36

Guolin

713 bronze badges

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

5 Comments

Benoît Dubreuil Over a year ago

Oh thanks! I didn't see that, but I still have the same problem: scale(1,1) doesn't do anything.

Guolin Over a year ago

In that case, would you mind sharing your code (CSS, Javascript, AND HTML) on jsfiddle and posting it here? It would be extremely helpful.

Benoît Dubreuil Over a year ago

When I put it on jsfiddle, the page is totally broken. :(

Benoît Dubreuil Over a year ago

Anyway, here's the source code (with no meta/include) jsfiddle.net/thecheeselover/p2Kqa

Benoît Dubreuil Over a year ago

And by the way, to hide the second page (with the size(0,0)) you need to call HidePanier()

Collectives™ on Stack Overflow

Javascript, dynamic css and transform

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related