Fred J. Fred J. - 4 months ago 16
CSS Question

simulating a button click impression

This meteor client code tries to give the impression that a button is being clicked. It uses the

onmousedown
event to apply a class to a
div
but it is not applying the class when checking the browser element tab.

What is wrong with it? Thanks

Template.footer.events({
'click .footerItem': function(event) {
//do some stuff here
},
'onmousedown .footerItem': function(event) {
$(event.target).addClass('inset');
},
'onmouseup .footerItem': function(event) {
$(event.target).removeClass('inset');
}
});


.inset {
box-shadow: inset 2px 2px 6px #999;
}

.footer-row {
text-align: justify;
background-color: white;
}


<template name="footer">
<footer class="footer-row">
{{#each footerButtons}}
<div class="footerItem" data-action={{this.action}}>{{this.label}</div>
{{/each}}
</footer>
</template>

Answer

You should use :focus and :active css states. My advise is for visual stuff try to use JavaScript as little as possible.

The :focus CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser.

CSS:

.footer-row {
    text-align: justify;
    background-color: white;
}

.footer-row:active,
.footer-row:focus {
    box-shadow: inset 2px 2px 6px #999;
}
Comments