5

Is there a way to programmatically open a network item dropdown (site switcher, inbox, achievements) in the top bar (non-SO style only)?

I found a way to hide them via StackExchange.topbar.hideAll(), but I can't find a way to show them (sending click events all over the place doesn't seem to work, and the event handler list in the debugger didn't yield anything useful).

The reason I ask is because I have a userscript that adds a button + dropdown to that area, and I've successfully been able to integrate it into the normal UI behavior with the exception that if my new dropdown is open and I move the mouse over one of the other buttons, it doesn't open the other dropdowns:

enter image description here

The only thing I'm missing is the ability to show the built-in dropdowns.

Is there any way to do this?

  • 1
    Turns out sending click events does work (e.g. $('.js-input-button').click()), and my problem is actually different, and related to the fact that I've pulled that topbar out of an iframe. Probably something to do with different jQuery instances. Not sure what to do with this question now. – Jason C Jun 8 '17 at 18:20
  • 1
    self answer or delete I guess? – Cai Jun 8 '17 at 18:55
  • Yeah I'm going to write an answer in a minute. I still have a valid answer that can be useful for anybody. – Jason C Jun 8 '17 at 19:00
  • 1
    But which side of the engine is the front? – Dan Bron Jun 10 '17 at 13:59
  • 1
    @DanBron I know, right?? – Jason C Jun 10 '17 at 14:00
3

As it turns out, under normal circumstances (which mine were not), simply sending a jQuery click event does indeed work. The event must be sent to the appropriate topbar icon, so the following selectors may be used:

  • SE (site switcher) dropdown: Either .icon-site-switcher or .js-site-switcher-button.
  • Inbox dropdown: Either .icon-inbox or .js-inbox-button.
  • Achievements dropdown: Either .icon-achievements or .js-achievements-button.
  • Help dropdown: Either .icon-help or .js-help-button.

Personally I'd prefer the .js-* styles as they are more semantically representative of the button itself, where .icon-* represents its image.

Sending a click event will toggle the dropdown, so if you want to ensure that it is only made visible (or not visible), you can optionally check for the presence of .topbar-icon-on, which is added while the dropdown is visible. So, for example, to show the SE dropdown, regardless of its current state:

$('.js-site-switcher-button:not(.topbar-icon-on)').click();

In my case the reason sending jQuery events didn't work was because of the nature of my script, which was working with a topbar in a different jQuery instance and thus jQuery events were behaving weirdly. In that case, sending a native DOM click event was the solution (and this also works for the normal case, as a non-jQuery alternative to the above).

For example, toggle can be accomplished as:

document.getElementsByClassName('js-site-switcher-button')[0].click()

Or show (equivalent to above jQuery example) can be accomplished as:

let button = document.querySelector('.js-site-switcher-button:not(.topbar-icon-on)');
if (button)
    button.click();

Or, alternatively:

try {
    document.querySelector('.js-site-switcher-button:not(.topbar-icon-on)').click();
} catch (e) {
}
|improve this answer|||||

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .