Twitter Bootstrap Question posted in

Twitter bootstrap – Prevent closing of a navbar with another element's trigger click

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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.


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search