Question

Suppose I have a ui with a button. The ui has four states, each with the button in a different corner.

In Flex, this is easy to achieve, you simply define these four states (topLeft, topRight, bottomRight, bottomLeft), and each has an override for the button’s position values.

How would you do this using CSS in a way that can be triggered by a simple assignment?

Flex: skin.currentState=”topRight”
JS: ???

I’ve defined the classes in css:

#button.topRight {...}
#button.topLeft{...}
#button.bottomRight {...}
#button.bottomLeft {...}

Now, without having to know of the existence of #button, how in one line of code can I apply one of the four states to all the elements on the page that have that state defined?

Answer 1

jQuery provides a handy abstraction layer in JavaScript to so this:

$('.someClassName').addClass('blueOnLeft')  
$('.someClassName').removeClass('blueOnLeft')

This will target every element with a class name of “someClassName”.