5

I am using jasny bootstrap offcanvas navbar ( http://jasny.github.io/bootstrap/components/#navmenu-offcanvas ) which will close whenever a click event occurs elsewhere on the page. However, we have a Twitter feed that has been modified to move between 3 different Twitter accounts. In order to switch between them a click is triggered. This is causing the navmenu to close each time the tweets switch and I cannot seem to prevent it.

Here is the twitter scroll code:

var tabCarousel = setInterval(function() {
    var tabs = $('#twittertab > li'),
        active = tabs.filter('.active'),
        nextone = active.next('li'),
        toClick = nextone.length ? nextone.find('a') : tabs.eq(0).find('a');
    toClick.trigger('click');
}, 5000)

I've tried applying preventDefault() and stopPropagation() to the trigger('click') but I am very inexperienced with jQuery and am really just guessing where to put this.

DJC
  • 1,175
  • 1
  • 15
  • 39
  • Post the relevant `click` handler – A. Wolff May 26 '15 at 10:07
  • sorry, not sure what you mean, I'm very inexperienced with jquery and am simply trying to fix the issue for a colleague whilst he is away – DJC May 26 '15 at 10:19
  • This `toClick.trigger('click');` call a handler bound using jQuery, can you post it? Because a better way would be to call the handler function, not triggering the click event. Now if this is set by an external plugin, this can be more complicated. You'd have better to provide a minimalistic sample replicating your issue, e.g using jsFiddle – A. Wolff May 26 '15 at 10:28
  • I just forgot about it but you should try using instead: `toClick.triggerHandler('click');` This won't let event propagate through the DOM – A. Wolff May 26 '15 at 10:32
  • Thanks A. Wolff for your suggestions. Apologies for wasting your time, I had assumed the autohide attribute on jasny navbar defined whether or not the navbar was expanded or collapsed by default. In fact, it stops a click outside of the navbar itself from closing the navbar, which is exactly what I needed (as I have a close button within the navbar itself). Thanks for your help though – DJC May 26 '15 at 10:46

2 Answers2

0

For anyone having a similar issue, the answer is simple if you don't mind sacrificing the navbar closing with any click outside of the navbar itself. Ie, the solution means clicking outside the navbar will not close it.

Simply add 'data-autohide="false"'to the offcanvas element.

I then added a function to toggle the navbar state on click of a link within the navbar as follows;

$('#my-menu > li > a').click(function() {
    $('.navmenu').offcanvas('toggle');
});

This means if you have links that do not go to another page, but an anchor somewhere on the same page, the menu will close when you click to move to that section.

DJC
  • 1,175
  • 1
  • 15
  • 39
0

If you are want to close the navmenu on inside link click then you must add "data-autohide="false"" on this
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
and add this script
$(document).ready(function(){$('.navmenu a').click(function() { $('.navmenu').offcanvas('hide'); });})
in your code. that's it.
Note: It's work like charm in single page application.