245
I am trying to implement Bootstrap Scrollspy in my content page but unable to do that. I also used Affix in that code which is working perfectly fine. I used the ethics advised by bootstrap but still failed. I am unable to point out where i am lack in.
All i want as when we go to some specific section then the relevant navigation menu must be active. Live example is when we visit bootstrap and go to this link
http://twitter.github.com/bootstrap/...html#dropdowns
It moves directly to dropdown section at javascript.html page and active the dropdown navigation menu link.
My everything is working perfectly fine but it is not highlighting the active link. FOr that bootstrap is using Scrollspy.
Can some one guide me where i am doing wrong which causes problem.
Here is my JavaScript code
Expand|Select|Wrap|Line Numbers
- !function ($) {
- $(function(){
- var $window = $(window);
- // Disable certain links in docs
- $('section [href^=#]').click(function (e) {
- e.preventDefault()
- });
- // side bar
- $('.bs-docs-sidenav').affix({
- offset: {
- top: function () { return $window.width() <= 940 ? 260 : 210 }, bottom: 300
- }
- });
- });
- }(window.jQuery);
Expand|Select|Wrap|Line Numbers
- <body data-spy="scroll" data-target=".bs-docs-sidebar">
- <div class="container content">
- <div class="row">
- <div class="span12">
- <h1>Pring, Pakistan’s Fastest Growing Social Network</h1>
- <p>Propel your business by connecting with consumers one-on-one.</p>
- </div>
- <div class="clearfix"></div>
- <div class="content-area">
- <div class="span4 bs-docs-sidebar">
- <ul class="nav nav-list bs-docs-sidenav">
- <li><a href="what-is-pring.php#a0">What is Pring?</a></li>
- <li><a href="what-is-pring.php#a1">Who uses Pring?</a></li>
- <li><a href="what-is-pring.php#a2">Get Started</a></li>
- <li><a href="what-is-pring.php#a3">Pring Services</a></li>
- </ul>
- </div>
- <div class="span8 content-inner">
- <div id="a0">
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
- </div>
- <div id="a1">
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
- </div>
- <div id="a2">
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
- </div>
- <div id="a3">
- <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
Your prompt response would be really appreciated.
regards,
