Bootstrap dropdown: events for the 'navbar-toggle'?

Question

Do we have events for the navbar-toggle that appears when we are on the smaller screen?

For instance,

$('#myDropdown').on('shown.bs.navbar-toggle', function () {
  // do something…
});

$('#myDropdown').on('hide.bs.navbar-toggle', function () {
  // do something…
});

html,

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <!--<a class="navbar-brand" href="#">Home</a>-->
</div>

Otherwise, how can we detect if that navbar-toggle exists on the smaller screen?

Solution 1

The navbar-toggle methods emit the Collapse events:

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

Event Type           Description
show.bs.collapse     This event fires immediately when the show instance method is called.
shown.bs.collapse    This event is fired when a collapse element has been made visible to     the user (will wait for CSS transitions to complete).
hide.bs.collapse     This event is fired immediately when the hide method has been called. 
hidden.bs.collapse   This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

Example

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Docs: http://getbootstrap.com/javascript/#collapse

Solution 2

I couldn't get the show/shown or hide/hidden.bs.collapse events to be triggered. I tied the event to the #navbar element.

What did work for me was just using the resize event and then check if the navbar is visible:

Combining what @Patel, madhatter160 and @haxxxton suggested I was able to get it to work:

var navbar_visible = $("#navbar").is(":visible");

$(window).resize(function(){
  navbar_visible = $("#navbar").is(":visible");

  if (navbar_visible)
    $('#brand_name').text('Navbar is visible');
  else
    $('#brand_name').text('Navbar is not visible');
});

This is a pretty simple solution that doesn't need any special jQuery plugins to work. I wish it was possible to get this to work using the defined *.bs.collapse events though!

You can also try this our on jsFiddle.

Comments

[Run]

Thanks so much for this answer!

[kashiraja]

I could not get this event to fire (not in Chrome at least), see this workaround that solved the problem.

[Eric Uldall]

Just curious, was the element #navbar injected via ajax after the initial page load? That could explain why the .on event didn't work as is. It is not optimal to hook into the .resize method if possible as it will cause a lot of overhead on the page, especially while someone is resizing their browser window.

[Eric Uldall]

I forked your jsfiddle to use the correct bootstrap events and it's working just fine. jsfiddle.net/j4j7tgz2

[Eric Uldall]

The problem with this method is that it's not event driven. You either have to be constantly checking the visibility of the element or hook into some other chatty event on the page (ie: resize, see comments on @kashiraja 's answer)

[kashiraja]

@EricUldall (1): The id="navbar" is on line 13. I agree that you get a lot of events, but possible to use a timeout to limit to say process only after each 100 ms. (2): That's interesting... I can't get your fiddle to work in my browser! (Chrome 57 on Win7). But the one I posted still works on my end. Some compatibility issues...

[Eric Uldall]

Interesting. I've run the fiddle in Chrome 58.0.3029.110 on MacOS (Sierra). Unfortunately I don't have a good way to test it on your current architecture and provide more detailed info. It's really unfortunate because it is the optimal scenario to use the events provided by the library. Perhaps if someone is interested they could post a ticket at the bootstrap.js github issues and see if they know of some compatibility issue.

[Jek]

for bootstrap 4 v4-alpha.getbootstrap.com/components/dropdowns/#via-javascri‌​pt

[Ehsan Abidi]

for show.bs.collapse make to work, you should tie the event handler to $("div.navbar-collapse.collapse")