How to programmatically make a button look pressed down?

periapsisperiapsis
edited January 2014 in Enyo 2
Hey,

I'm using Enyo for webdialogs in Trimble SketchUp. These are used as configuration dialogs for our SketchUp plugin. The dialogs have "apply" buttons to apply the changed settings. I've programmed them such that the settings are also applied when pressing the Enter key while one of the input fields has focus. In that case I want to give the users a visual cue by making the apply button go down when Enter is pressed down and making it go up again when Enter is released.
What I've done so far is this:
Call ApplyButton.addClass("active") when Enter is pressed and ApplyButton.removeClass("active") when Enter is released.
This changes the button's gradient correctly but doesn't move the button's text.
Is there another class that I have to add or am I doing it wrong? :)
What exactly happens when the mouse button is clicked on a button? What mechanism determines the appearance of the button? I'm not very experienced with web programming, so please excuse my ignorance. Thanks!
· Share on Twitter

Comments

  • unwiredbenunwiredben
    Are these Onyx buttons or just plain Enyo buttons (which are really just BUTTON form elements)?

    For Onyx, adding the active or pressed class is the right way to show this. I don't see anything in the stylesheets that affects the test, and just testing in the sampler didn't show any text movement.
    · Share on Twitter
  • periapsisperiapsis
    They are Onyx buttons actually. Should have mentioned that. I just tried the sampler in Firefox, IE11, Chrome and Opera (the latest.enyojs.com/sampler) and there's a difference. In FF and Chrome the text doesn't move when the button is clicked, in IE11 and Opera it does. The webdialogs in SketchUp use an embedded Internet Explorer, so the text does move when the button is clicked with the mouse, but doesn't move when I add the class "active". I think the class "pressed" didn't do anything.
    I think I can live with this, but I'm still wondering why there's a difference between clicking the button and adding the class.
    · Share on Twitter
  • unwiredbenunwiredben
    Onyx uses the button HTML tag as the base for creating these and there is a default text-shift behavior in IE and Safari use that we're not able to override. override. I found some ideas on Stack Overflow, but it looks like the most promising one (making the text a position: relative div) causes the button to not be responsive to clicks.
    · Share on Twitter
Sign In or Register to comment.