With jQuery you can easily add a css class to an element. For example, imagine the following button:
<button id="sign" class="btn-primary">Sign</button>
I wrote some nice code which makes the work a little bit more like native Android buttons. When somebody causes a touchstart event I would like to see the button become a darker look. My first approach was to add a class like this:
And finally remove it again when the touch ended:
I tried a little bit and found out that removeClass is working as expected. This is also the case if somebody would add a style attribute. I didn’t want to apply styles directly to the element, but it is very useful to know that removeClass would work. I inverted my logic. Instead of adding a class when touched, I plan to remove it.
My button changed too:
<button id="sign" class="btn-primary btn-primary-untouched">Sign</button>
The class btn-primary-untouched is defined later in the CSS as btn-primary and overwrites the background color. It is also brighter in color than btn-primary. When the touchevent starts I remove the “untouched” class and the button remains in darker color.
Currently this is tested with Android 4.x (emulator), Android 3.x. No idea on the iPhone, if somebody knows, feel free to comment.
Follow me on Twitter :-)