Skip to main content
10-Marble
June 15, 2021
Question

Change CSS Property of 3DImage widget via click or JS.

  • June 15, 2021
  • 2 replies
  • 1499 views

As context, working on a mobile project. 

 

Goal here is simply to highlight a 3D Image widget when it is being clicked. Obviously the easiest method is with css using the "class:psuedo-class" active state. However that doesn't work. 

 

I have already verified that the property can be applied to the widgets. 

 

My question is as to the best approach?

 

A) Use JS to change the class of the widget and then run a timeout to change it back after one second?

 

B) Continue to try and use a psuedo-class?

2 replies

Aouellets10-MarbleAuthor
10-Marble
June 15, 2021

Thinking something like....

 


$scope.Active = function (elem) {

document.getElementById(elem).classList.add('ActiveBTN');

$timeout(function(){

document.getElementById(elem).classList.remove('ActiveBTN');

}, 1000 )


}

16-Pearl
July 14, 2021

I add this to a Button, it works.

 

.btnText{
 color: firebrick;
 font-size: 1em;
}

.btnText:active{
 color: steelblue;
 font-size: 2em;
}

 

Nevertheless, Style changes right away when the Press stops.

 

So, JavaScript could be a more versatile approach.

 

BRs,