Javascript – Using bootstrap scrollspy for a div with collapse, to an affixed sidebar

javascriptjquerytwitter-bootstrap

I have this code as the layout of the page. The span9 div cotains sections that should apply the scrollspy. Each section is a set of collapsible divs that contains the actual content. The span3 div is the affixed sidebar and must highlight the correct item using the scrollspy.

<div class="span3 module-sidebar">
    <ul id="sidebar" data-spy="affix"  data-offset="250" data-offset-bottom="0" class="nav nav-list bs-docs-sidenav affix">
        <li>
            <a href="#module1"><i class="icon-chevron-right"></i>Module1 Name</a>
        </li>
    </ul>
</div>

<div class="span9" data-spy="scroll" data-target="#sidebar">
    <section id="module1">
        <div class="page-header">
            <h1>Module1 Name</h1>
        </div>

        <div class="bs-docs-example">
            <div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#function1">Function1 Name</a>
                    </div>
                    <div id="function1" class="accordion-body collapse in">
                        <div class="accordion-inner">
                        <h3>Topic1 Name</h3>
                        <p>Topic1 Desc</p>                              
                            <h4>SubTopic1 Name</h4>
                            <p>SubTopic1 Desc</p>                                   
                                <h4><img src="../assets/img/manuals/module1/function1/step1.png"/></h4>
                                <p>Step1 Desc</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

The problem is that when i collapse the div to show the content, the scrollspy won't recognize the newly occupied space by that collapsible div. and thus highlights the next items in the sidebar when I scroll through the content of that collapsible div.

What i want is for the scrollspy to 'see' the space when the collapsible div is expanded. Any help would really be appreciated. Click here for the fiddle.

Best Answer

You should call .scrollspy('refresh') :

$(document).ready(function () {

    $('.accordion').on('shown hidden', function () {
        $('body').scrollspy('refresh');
    });

});

Related Solutions

Javascript – How to change the href attribute for a hyperlink using jQuery

Using

$("a").attr("href", "http://www.google.com/")

will modify the href of all hyperlinks to point to Google. You probably want a somewhat more refined selector though. For instance, if you have a mix of link source (hyperlink) and link target (a.k.a. "anchor") anchor tags:

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

...Then you probably don't want to accidentally add href attributes to them. For safety then, we can specify that our selector will only match <a> tags with an existing href attribute:

$("a[href]") //...

Of course, you'll probably have something more interesting in mind. If you want to match an anchor with a specific existing href, you might use something like this:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

This will find links where the href exactly matches the string http://www.google.com/. A more involved task might be matching, then updating only part of the href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

The first part selects only links where the href starts with http://stackoverflow.com. Then, a function is defined that uses a simple regular expression to replace this part of the URL with a new one. Note the flexibility this gives you - any sort of modification to the link could be done here.

Javascript – Setting “checked” for a checkbox with jQuery

Modern jQuery

Use .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

DOM API

If you're working with just one element, you can always just access the underlying HTMLInputElement and modify its .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.

jQuery 1.5.x and below

The .prop() method is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using $('.myCheckbox').removeAttr('checked'); since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it – a subtle but probably unwelcome behaviour change.

For more context, some incomplete discussion of the changes to the handling of the checked attribute/property in the transition from 1.5.x to 1.6 can be found in the version 1.6 release notes and the Attributes vs. Properties section of the .prop() documentation.