Geek asks and answers

JQuery UI buttons - keep active state, ignore hover state

As mentioned earlier in another question, I have a system that displays content and highlights a button based on a hash tag. This works fine for the most part, but if you hover a button, then it loses its active state.

Here is a [working example] [1] problem.

I tried .hover(function() {return false;});, but unfortunately it didn’t work (although, I think, I did not expect it to be ...!). I also tried disabling the button (then turning it back on when you hit another), which was perfect in Firefox, but the text was grayed out in IE7.

Thanks so much for any help or suggestions, thanks :)

+3
source share
2 answers

To start with your button, send #, it does not translate the link to another page, but creates some unwanted scrolling. You should avoid such actions.

$('#showScarringReports').click(function(ev){ ev.preventDefault(); });

After you want the active state to remain, you can disable the event handler, which will force it to switch from active to what it was. So again with the first as an example.

$('#showScarringReports').unbind('mouseout keyup mouseup hover');

Once it is active, it will remain active to remove the active state, and then simply remove the ui-state-hover class from the button.

+4
source

Another solution did not work for me, so I had to use it:

$('#my-button')
    .button({disabled:true})
    .removeClass('ui-state-disabled')
    .addClass('ui-state-active') //permanently pressed
    .addClass('ui-state-hover')  //or permanently highlighted
;
0
source

More articles:


All Articles