a blog for those who code

Monday, 13 July 2015

Enhance Data Display using Scrollspy in Bootstrap

In this post we are going to learn about enhancing data display using scrollspy in Bootstrap. In our previous posts we have seen that how using a simple navbar, our navigation enhanced on a single page and how we can enhance data display using Tabs. Scrollspy is a data display that allows a user to jump to the data they wish to see along with that it enables scrolling through the content.
That means like tabs scrollspy provides navigation but unlike tabs scrollspy allows user to scroll through the content as well.

As we have already seen in the previous posts that bootstrap gives you a lot of different ways that you can display out data for example by using columns, tabs etc. Now if we want our large chunk of data to shrink down we can use tabs , carousel, scrollspy etc. In this post we will be seeing how scrollspy help us to enhance data display in Bootstrap. Scrollspy is a better option than tabs because it will allow you to scroll through the content.

The first step to adding scrollspy to your page is to add a nav element. The nav element needs the classes navbar, navbar-default and navbar-static as well as you have to add role="navigation" attribute for accessibility. Along with the above classes and role you need to give the Id to the nav element.

<nav class="navbar navbar-default navbar-static" role="navigation" id="spy">
//links
</nav>

Inside of a nav element you will need to add an unordered list with nav and navbar-nav classes. Inside the list you need to add the navigation links to the scrollspy content.

<ul class="nav navbar-nav">
    <li class="active"><a href="#scroll1">First</li>
    <li><a href="#scroll2">Second</li> 
</ul>

Next is to add the content which the user will navigate through the scrollspy. It needs to be added inside a container having data-spy="scroll" and data-target attribute set to the ID set on the navigation element (i.e. data-target="#spy1").

<div data-target="#spy" data-spy="scroll">
//scrollspy content
</div>

Scrollspy Example :

<div class="col-md-6">
  <div style="position:relative;">
    <nav class="navbar navbar-default navbar-static" role="navigation" id="spy">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#scroll1">First</a></li>
<li><a href="#scroll2">Second</a></li>
<li><a href="#scroll3">Third</a></li> 
      </ul>
    </nav>
    <div data-target="#spy" data-spy="scroll" style="height:150px;overflow-y:scroll; position:relative;">
    <div id="scroll1">
      <h1>First Section</h1>
      //Content
    </div>
    <div id="scroll2">
      <h1>Second Section</h1>
       //Content
    </div>
    <div id="scroll3">
<h1>Third Section</h1>
//Content
    </div> 
</div> </div> </div>

Result :
Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment