Navbar buttons stay pressed

Question

I am using two

<li><a href="#" type="button"  > text</a></li>

type buttons in the footer navbar of my application, to trigger functions in my application (not for navigation.). After each press the button stays pressed, until another button in the navbar is pressed. How can I avoid this behavior?

score 1 · Answer 1 · answered Nov 19 '13 at 18:15

1

Another way to handle this is to return false from your event binding so that JQM doesn't add the class in the first place.

answered Nov 19 '13 at 18:15

Dan McGhan

4,479
1
11
15

Pablo · Accepted Answer · 2012-08-13T10:14:36.500

0

Remove manually class ui-btn-active from the last pressed button.

$('#button_id').removeClass('ui-btn-active');

EDITED

The best way is to redefine styles for class ui-btn-active, the same as for the 'unclicked' button. For example:

.ui-footer .ui-navbar .ui-btn-active {
    border: 1px solid       #222;
    background:             #333333;
    font-weight: bold;
    color:                     #fff;
    text-shadow: 0 -1px 1px #000;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555), to( #333));
    background-image: -webkit-linear-gradient(#555, #333);
    background-image:    -moz-linear-gradient(#555, #333);
    background-image:     -ms-linear-gradient(#555, #333);
    background-image:      -o-linear-gradient(#555, #333);
    background-image:         linear-gradient(#555, #333);
}

Example here.

edited Aug 13 '12 at 10:14

answered Aug 13 '12 at 06:28

Pablo

2,834
5
25
45

Ok, I see. The problem seems to be be that the `ui-btn-active` class is added after click event. You can try to remove later using a small timeout, but I know it is not the best way. I keep looking for a better answer... – Pablo Aug 13 '12 at 08:10
Ok, forget about manually removing the class. The best way is to redefined the styles for it. I will edit the answer. – Pablo Aug 13 '12 at 10:13

score 0 · Answer 3 · answered Nov 10 '14 at 19:27

<button type="button" class="btn btn-default touchbtn">Test</button>

$('.touchbtn').bind('touchstart', function() {
    $(this).css('background-color', 'black');
});

$('.touchbtn').bind('touchend', function() {
    $(this).css('background-color', 'white');
});

Navbar buttons stay pressed

3 Answers3