Asked  7 Months ago    Answers:  5   Viewed   70 times

I'm developing a web page in which I'm using Twitter's Bootstrap Framework and their Bootstrap Tabs JS. It works great except for a few minor issues, one of which is I do not know how go directly to a specific tab from an external link. For example:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

should go to the Home tab and the Notes tab respectively when clicked on the links from an external page

 Answers

79

Here is my solution to the problem, a bit late perhaps. But it could maybe help others:

// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})
Tuesday, June 1, 2021
 
cusejuice
answered 7 Months ago
44

Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.

JSFiddle

Thursday, August 12, 2021
 
TV Nath
answered 4 Months ago
34

You can use jQuery to get the page url #hash and select the Bootstrap tab...

var hash = document.location.hash;
if (hash) {
    $('.nav-tabs a[href='+hash+']').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
});

Code: http://codeply.com/go/RypzN2UXKF

Demo (select tab 2): http://codeply.com/render/RypzN2UXKF#tab2

Saturday, August 14, 2021
 
Manmay
answered 4 Months ago
93

There's two parts to this question.

  1. How does popper.js know when to update the popovers?
  2. How does the popover change position?

Answering these backwards:

2: How does the popover change position?

You need the update method of the popover:

$('#element').popover('update')

I've done a quick demo here:

https://jsfiddle.net/pktyptyp/

First, click the green button to open the popover. Then use button 2 to move the popover toggle. Now the toggle and the popover no longer line up. So finally use button 3 to reposition the popover by its toggle.

The docs for this are tucked under the popover methods section here:

http://getbootstrap.com/docs/4.0/components/popovers/#methods

If you wanted to update every popover on your page and not just a specific one, then you could do:

$('[data-toggle="popover"]').popover('update')

How does popper.js know when to update the popovers?

Popper will be subscribing to events like window.scroll and window.resize. You can see this in a bit of their source code:

https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js

The update method won't be called immediately in that event handler - there'll be something that gets passed back to the Boostrap widget, which in turn will call the popover update method.

I am fairly sure Popper & the Popover widget will not be looking at the position of the individual toggles. This is partly because unless the toggles are positioned, their left/top properties will always be 'auto' so it will be hard to work out if they are moving. Or to put it another way, when the window scrolls, the toggle has not moved within the document, but the popover (which is absolutely positioned) needs updating. So this is a bit of a broad brush - they are looking out for the entire window changing, assuming the popovers are out of position, then triggering more events to update them.

If anyone knows more about this, though, please tell me in the comments!

You have a bit of an advantage in that you know when you change your UI, so you can call 'update' on all the Popovers at will. This to me seems like the ideal approach.

However, if your toggles are absolutely positioned, you could do this a bit more automatically by watching their position. Here's an example with an absolutely-positioned toggle and in this example, the popover moves automatically without the third button click.

https://jsfiddle.net/pktyptyp/1/

Friday, August 27, 2021
 
Troncoso
answered 4 Months ago
96

I think you need to write some custom js Bootstrap has not this functionality by default so you need to make your own carousel-indicators

css

.carousel-indicators2 {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}

.carousel-indicators2 li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #0009;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
  border-radius: 10px;
}
.carousel-indicators2 .active {
    width: 12px;
    height: 12px;
    margin: 0;
    background-color: #fff;
}

JS

$('.carousel').on('slid.bs.carousel', function() {
  $(".carousel-indicators2 li").removeClass("active");
  indicators = $(".carousel-indicators li.active").data("slide-to");
  a = $(".carousel-indicators2").find("[data-slide-to='" + indicators + "']").addClass("active");
  console.log(indicators);

})

Fiddle

Friday, December 3, 2021
 
Viralk
answered 6 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share