Rectangle 27 78

Applying a selector from the .nav-tabs seems to be working

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>
$(document).ready(function(){
  activaTab('aaa');
});

function activaTab(tab){
  $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

The tab-pane id is unnecessary and modifying the href feels weird to me. A cleaner solution would be to add an id to each tab: then you can change the long selector to something as simple as $('#' + tab).tab('show');

@Skippr If you remove the tab-pane ids, how is each nav-tabs anchor linked to its tab-pane?

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - How to open specific tab of bootstrap nav tabs on click o...

javascript jquery html css twitter-bootstrap
Rectangle 27 7

<a href="PageName.php#tabID">link to other page tab</a>
window.onload = function(){  

    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
    }

    //Change hash for page-reload
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').on('shown', function (e) {
        window.location.hash = e.target.hash;
    }); 
}
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');

javascript - How to open specific tab of bootstrap nav tabs on click o...

javascript jquery html css twitter-bootstrap
Rectangle 27 21

You are binding you click on the wrong element, you should bind it to the a.

You are prevent default event to occur on the li, but li have no default behavior, a does.

$(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});

But when I click the link, the page doesn't load by preventDefault.

It's a little bit unclear what you are asking.Dont you load the page with javascript after the click? If no, you should use javascript to do what you are asking, but your server side language.

javascript - How to change active class while click to another link in...

javascript jquery html twitter-bootstrap
Rectangle 27 3

You may access through tab Id as well, But that id is unique for same page. Here is an example for same

$('#product_detail').tab('show');
#product_details
nav
tab

javascript - How to open specific tab of bootstrap nav tabs on click o...

javascript jquery html css twitter-bootstrap
Rectangle 27 2

$(".header-login-li").click(function(){
            activaTab('pane_login');

      });

      $(".header-register-li").click(function(){
            activaTab('pane_reg');
            $("#reg_log_modal_header_text").css()
      });

      function activaTab(tab){
        $('.nav-tabs a[href="#' + tab + '"]').tab('show');
      };

javascript - How to open specific tab of bootstrap nav tabs on click o...

javascript jquery html css twitter-bootstrap
Rectangle 27 1

Did yout tried to wrap both tabs inside the same form? This way will send all data from both tabs to your server side script.

i use only one form for all

can you show the server side code that is called in your save action?

javascript - How To Active Bootstrap Tab after Button Click in ASP.NET...

javascript jquery asp.net twitter-bootstrap tabs
Rectangle 27 58

There are a lot of really good solutions here. But I thought that I would go ahead and put mine in here as another alternative. It's just a simple jQuery snippet that does it the way bootstrap would if it supported hover for dropdowns instead of just click. I've only tested this with version 3 so I don't know if it would work with version 2. Save it as a snippet in your editor and have it at the stroke of a key.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

Basically, It's just saying when you hover on the dropdown class, it will add the open class to it. Then it just works. When you stop hovering on either the parent li with the dropdown class or the child ul/li's, it removes the open class. Obviously, this is only one of many solutions, and you can add to it to make it work on only specific instances of .dropdown. Or add a transition to either parent or child.

Great solution! I also removed data-toggle="dropdown" attribute from link in order to make top link clickable.

That's a good tip Sergey. I always make sure the top link goes nowhere so that it works on tablets and phones as well.

@Sergey I wouldn't recommend doing that. You would break the functionality for mobile users. They can't use the hover function to open a menu and need to be able to click it.

This is amazingly short and easy while still being backwards-compatible with touchscreens. Should be upvoted much more.

css - How to make Twitter Bootstrap menu dropdown on hover rather than...

css drop-down-menu twitter-bootstrap
Rectangle 27 58

There are a lot of really good solutions here. But I thought that I would go ahead and put mine in here as another alternative. It's just a simple jQuery snippet that does it the way bootstrap would if it supported hover for dropdowns instead of just click. I've only tested this with version 3 so I don't know if it would work with version 2. Save it as a snippet in your editor and have it at the stroke of a key.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

Basically, It's just saying when you hover on the dropdown class, it will add the open class to it. Then it just works. When you stop hovering on either the parent li with the dropdown class or the child ul/li's, it removes the open class. Obviously, this is only one of many solutions, and you can add to it to make it work on only specific instances of .dropdown. Or add a transition to either parent or child.

Great solution! I also removed data-toggle="dropdown" attribute from link in order to make top link clickable.

That's a good tip Sergey. I always make sure the top link goes nowhere so that it works on tablets and phones as well.

@Sergey I wouldn't recommend doing that. You would break the functionality for mobile users. They can't use the hover function to open a menu and need to be able to click it.

This is amazingly short and easy while still being backwards-compatible with touchscreens. Should be upvoted much more.

css - How to make Twitter Bootstrap menu dropdown on hover rather than...

css drop-down-menu twitter-bootstrap
Rectangle 27 2

I just used a model variable to show/hide the dialog and removed the data-dismiss="alert"

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria- hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

works for me and stops the need to go out to jquery

jquery - How to toggle a bootstrap alert on and off with button click?...

jquery jquery-ui twitter-bootstrap
Rectangle 27 27

Bootstrap nav tabs and pills work with a JS plugin. The plugin is loaded on the page and takes care of the highlighting and the remembering of the currently active tab or pill. It disables the href attributes if they link to other pages, simply because when you click on a link to another page, a new page is loaded. The JS is then reloaded for this new page, and it does not know about which tab or pill is currently active. They are designed to work with single page apps or links to anchors on the same page, and they work fine for that purpose.

The jQuery approach fails for the same reason, but might be easier to explain.

$('ul.nav-pills li a').click(function (e) {
  $('ul.nav-pills li.active').removeClass('active')
  $(this).parent('li').addClass('active')
})

You click on a link, JS goes off and changes the class, only if it has enough time to do so before the next page is loaded, this next page is loaded because the href attribute on the link tells the browser to navigate to a new page. And the new page loads your JS again, it can't possibly remember the variables from the previous page, like which tab or pill is meant to be active.

If you are going to navigate to other pages, you might as well just set the active class on the right tab for the specific page that is being loaded.

If you really need to do this on the client side, you could do something like this, and load it on each page.

$(document).ready(function () {

  // Set BaseURL
  var baseURL = 'http://myweb.com/'

  // Get current URL and replace baseURL
  var href = window.location.href.replace(baseURL, '');

  // Remove trailing slash
  href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;

  // Get last part of current URL
  var page = href.substr(href.lastIndexOf('/') + 1);

  // Add trailing slash if not empty (empty means we're currently at baseURL)
  page = page != '' ? page + '/' : page;

  // Select link based on href attribute and set it's closest 'li' to 'active'. 
  // .siblings('.active').removeClass() is only needed if you have a default 'active li'.
  $('a[href="' + baseURL + page + '"]', '.nav li').closest('li').addClass('active').siblings('.active').removeClass();

});

It sets the active tab based on the last part of the URL, it's kind of specific to your scenario (and previously my scenario) though. You'd have to adapt it if there were file extensions or query parameters involved. Every page needs to at least have a link to itself on it. And it preferably has the exact same header with the same tabs and pills rendered on it as all the other pages.

Both of these last points again raise the thought in my mind "if you have to have this much control over what exactly is being rendered onto the page, you probably have access to the server side", and if that is the case, you might as well fix it there, as every link does a new request to the server anyway. And your solution wouldn't have to rely on some not so robust JavaScript to work.

So this is what I had going at one stage, you could improve it, or implement a solution where you post some data to the next page and read it with JavaScript there (which would probably be easier and more robust if you had file extensions or query strings to deal with).

Good luck with it! :)

Updated the answer to explain it a bit better using the jQuery as example.

The hint is in the last sentence. JS isn't the place for storing things that need to be remembered across a number of pages. You could implement an approach where your JS takes over the navigating instead of the links, and then posts some values to the new page. But if you are going to be navigating between actual pages, it is a much better idea to just have some server side logic decide which tab or pill is going to have the active class before it sends the page to the client. Or if they are static pages, just add the active class to the right tab or pill for every page.

May be i can send a get or post in the hyperlink. And on my pages check for the parameters to make a class active. right ?

jquery - Twitter Bootstrap Tabs active class toggle not working - Stac...

jquery html css twitter-bootstrap tabs
Rectangle 27 58

The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

fails if you have more than one dropdown level

Not Working with parent link

is there a way to remove the Active class once the dropdown is closed?

There's a pixel gap between the dropdown element and the menu that can cause the menu to hide sometime crossing over, unless you are quick

javascript - Bootstrap Dropdown with Hover - Stack Overflow

javascript jquery html css twitter-bootstrap
Rectangle 27 57

The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

fails if you have more than one dropdown level

Not Working with parent link

is there a way to remove the Active class once the dropdown is closed?

There's a pixel gap between the dropdown element and the menu that can cause the menu to hide sometime crossing over, unless you are quick

javascript - Bootstrap Dropdown with Hover - Stack Overflow

javascript jquery html css twitter-bootstrap
Rectangle 27 1

$('[data-toggle=tab]').click(function(){
  if ($(this).parent().hasClass('active')){
    var url = $(this).attr('href');
    var tid = url.split('#')[1];
    console.log(tid);
    $('#'+tid).toggleClass('active');
    document.location.hash = '';
  }
});
 ///  also can work with pills by switching to $('[data-toggle=pill]')

Bootstrap Tab close active on click - Stack Overflow

twitter-bootstrap tabs
Rectangle 27 78

Try removing the propagation on the button itself like so:

$('.dropdown-menu a.removefromcart').click(function(e) {
    e.stopPropagation();
});

Here is a demo from the comments with the solution above:

$(".removefromcart").on("click", function(e){
    var fadeDelete = $(this).parents('.product');
    $(fadeDelete).fadeOut(function() {
        $(this).remove();
    });

    e.stopPropagation();
});
<div id="shoppingcart" class="nav-collapse cart-collapse">
 <ul class="nav pull-right">
  <li class="dropdown open">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
    &acirc;&sbquo;&not; 43,00</a>

    <ul class="dropdown-menu">
      <li class="nav-header">Pakketten</li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">1</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">10</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">8</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">3</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">4</span></span>
        </li>
        <li class="divider"></li>
        <li><a href="#">Total: &euro; 43,00</a></li>
        <li><a href="/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>

Okay, this works, but now the remove button is not working anymore, which I could 've thought of my self. So probably I DO need to programmatically re-open the div. Any idea how to do that?

@MartenSytema that all depends on how you're removing the products from the menu, but take this for example: jsfiddle.net/andresilich/E9mpu, notice how i implemented the .stopPropagation() method along with the removal script.

@MartenSytema both methods do the same thing. Also, .live() has been deprecated as of jQuery version 1.7.

.live()
.on()

jquery - Keep Bootstrap dropdown open on click - Stack Overflow

jquery twitter-bootstrap
Rectangle 27 78

Try removing the propagation on the button itself like so:

$('.dropdown-menu a.removefromcart').click(function(e) {
    e.stopPropagation();
});

Here is a demo from the comments with the solution above:

$(".removefromcart").on("click", function(e){
    var fadeDelete = $(this).parents('.product');
    $(fadeDelete).fadeOut(function() {
        $(this).remove();
    });

    e.stopPropagation();
});
<div id="shoppingcart" class="nav-collapse cart-collapse">
 <ul class="nav pull-right">
  <li class="dropdown open">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Totaal:
    &acirc;&sbquo;&not; 43,00</a>

    <ul class="dropdown-menu">
      <li class="nav-header">Pakketten</li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">1</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">10</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">8</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">3</span></span>
        </li>
        <li class="product">
            <span class="product-remove"><a class="removefromcart" packageid="2" href="#"><i class="icon-remove"></i></a></span>
            <span class="product-name">Test Product </span>
            <span class="quantity"><span class="badge badge-inverse">4</span></span>
        </li>
        <li class="divider"></li>
        <li><a href="#">Total: &euro; 43,00</a></li>
        <li><a href="/checkout">Checkout</a></li>
    </ul>
  </li>
</ul>

Okay, this works, but now the remove button is not working anymore, which I could 've thought of my self. So probably I DO need to programmatically re-open the div. Any idea how to do that?

@MartenSytema that all depends on how you're removing the products from the menu, but take this for example: jsfiddle.net/andresilich/E9mpu, notice how i implemented the .stopPropagation() method along with the removal script.

@MartenSytema both methods do the same thing. Also, .live() has been deprecated as of jQuery version 1.7.

.live()
.on()

jquery - Keep Bootstrap dropdown open on click - Stack Overflow

jquery twitter-bootstrap
Rectangle 27 150

It's possible to do this without using extra JS code using the data-collapse and data-target attributes on the a link.

<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details &raquo;</a>

How would I toggle the button text to say, e.g., "Hide details", then switch back to "View details" when clicked?

id="guid"
data-target="#guid"

this was not the question, it is just a normal collapse.. I think the OP want to extend the text that is already present (sort of excerpt to full text expansion) EDIT: I am sorry that is what I wanted.. not the OP :(

For others, who like @DeanRichardson, want to toggle the button text between e.g. "View details..." and "Hide details..." see stackoverflow.com/a/28500651/245602

Actually, for IE11 it only expands, but does not collapse.

javascript - Twitter Bootstrap button click to toggle expand/collapse ...

javascript jquery css twitter-bootstrap
Rectangle 27 150

It's possible to do this without using extra JS code using the data-collapse and data-target attributes on the a link.

<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details &raquo;</a>

How would I toggle the button text to say, e.g., "Hide details", then switch back to "View details" when clicked?

id="guid"
data-target="#guid"

this was not the question, it is just a normal collapse.. I think the OP want to extend the text that is already present (sort of excerpt to full text expansion) EDIT: I am sorry that is what I wanted.. not the OP :(

For others, who like @DeanRichardson, want to toggle the button text between e.g. "View details..." and "Hide details..." see stackoverflow.com/a/28500651/245602

Actually, for IE11 it only expands, but does not collapse.

javascript - Twitter Bootstrap button click to toggle expand/collapse ...

javascript jquery css twitter-bootstrap
Rectangle 27 1

We were suffering a similar problem and noticed that Bootstrap 3 doesn't have the problem on their tabs (in Chrome). It looks like they're using outline-style which allows the browser to decide what best to do and Chrome seems to do what you want: show the outline when focused unless you just clicked the element.

Support for outline-style is hard to pin down since the browser gets to decide what that means. Best to check in a few browsers and have a fall-back rule.

html - How to remove focus around buttons on click - Stack Overflow

html css twitter-bootstrap
Rectangle 27 41

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   console.log(e.target) // activated tab
})

How can I change this code, so that while on a[data-toggle="tab"]:last one event will fire, but if on any other tabs a different event does.

@Greg L, I think we should try this: $(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]:last', function (e) { console.log(e.target) // activated tab }) $(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]:not(:last)', function (e) { console.log(e.target) // activated tab })

Good. But how do I also get an event if the currently opened tab is clicked again?

@Bryce, as I know, show.bs.tab and shows.bs.tab don't allow to perform this task.

Any idea why given in official guide not working and need to use "document" hear?

javascript - Click event in bootstrap 3 tabs - Stack Overflow

javascript jquery javascript-events onclick twitter-bootstrap-3
Rectangle 27 6

$(document).mouseup(function (e) {
    if ($('.popover').has(e.target).length === 0) {
        $('.popover').toggleClass('in').remove();
        return;
    }
});

This does work when a user clicks outside a popover, but if the user clicks the popover link again, the popover does not hide.

javascript - Closing Bootstrap Popover When User Clicks Outside Popove...

javascript jquery twitter-bootstrap twitter-bootstrap-3