Home/ Questions/Q 8635957
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T10:06:08+00:00

I have a nav menu bar based on twitter bootstrap that uses scrollspy to

  • 0

I have a nav menu bar based on twitter bootstrap that uses scrollspy to for hightlighting.

this works by matching the value after the # in a link (e.g. <a href="#foo"> when <div id="foo"> scrolls into view). pretty basic, here’s the doco: http://twitter.github.com/bootstrap/javascript.html#scrollspy

my problem comes when I introduce a link to a bootstrap modal dialogue box within an element that is being spied on. imagine I have:

<ul class="nav">
  <li><a href="#info">a link</a></li>
  <li><a href="#demo" role="button" data-toggle="modal">modal</a></li>
  <li><a href="#products">a different link</a></li>
</ul>
<p> .. my page .. </p>
<div id="info"><a name="info"></a>info on my product</div>
<div id="products"><a name="products"></a>a list of my products</div>
<div class="modal hide fade" id="demo" tabindex="-1" role="dialog">
  <div class="modal-header">my header</div>
  <div class="modal-body">some content</div>
  <div class="modal-footer"><button>close</button></div>
</div>
<p> .. more page </p>

the div that represents my modal overlay also uses the #id-of-target format for its href, but since it’s included inside the nav (of course) then scrollspy ALSO highlights when the (hidden) div is in view. Depending on where the modal code in on the page, this confuses the menu system’s highlighting.

I can see that scrollspy should be modified to only link to items that are visible (and therefore not activate when “demo” scrolls into view) but can’t work out how to modify the plugin to only fire if the element is visible, or override the event some other way.

can anyone give me some pointers?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    funny how typing out a question sometimes makes you think in the right way to solve it, where just thinking about it does not.

    to make this work, I modified the scrollspy component of bootstrap so that it tests the target is hidden and bails out of the activate routine (also doesn’t raise the activated event, since it’s not active)

    here it is: around line 1432 for me (+if ..

    , activate: function (target) {
    var active
      , selector

     if (target.is(":hidden")) return 

    this.activeTarget = target
    • 0