Bootstrap Snippet Dot Navigation with tooltips using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <div data-spy="affix" id="dot-nav">
        <ul>
          <li class="awesome-tooltip active" title="Home"><a href="#home"></a></li>
          <li class="awesome-tooltip" title="About"><a href="#about"></a></li>
          <li class="awesome-tooltip" title="Projects"><a href="#projects"></a></li>
          <li class="awesome-tooltip" title="Contact"><a href="#contact"></a></li>
        </ul>
    </div>
    
    <div id="main" class="container">
        <section id="home">
           <article>
               <div class="row">
                   <div class="col-md-12">
                    <h1>Home Section <small>Secondary text</small></h1>
                       <p>
                        This is a content.                                
                       </p>
                   </div>
               </div>
           </article>           
        </section>
        <section id="about">
           <article>
               <div class="row">
                   <div class="col-md-12">
                    <h1>About Section <small>Secondary text</small></h1>
                       <p>
                        This is a content.                                
                       </p>
                   </div>
               </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    background: #f0f0f0;
}
body, html {
    height: 100%;    
}
#main {
    height: 100%;
}
section {
    padding: 13% 0;
    height: 100%;
}
#dot-nav{    
    right: 10px;
    top: 50%;
    margin-top: -50px;
    height: 100px;
    z-index: 999;
}
#dot-nav ul {
    list-style: none;
    margin:0;
    padding: 0;
}
#dot-nav li {
    position: relative;
    background-color: #bdc3c7;
    border:3px solid #bdc3c7;
    border-radius: 15px 15px 15px 15px;
    cursor: pointer;
    padding: 5px;
    height: 10px;
    margin: 10px 10px 0px 0px;
    width: 10px;
    vertical-align:bottom;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
    $('.awesome-tooltip').tooltip({
        placement: 'left'
    });   
    $(window).bind('scroll',function(e){
      dotnavigation();
    });
    
    function dotnavigation(){
             
        var numSections = $('section').length;
        
        $('#dot-nav li a').removeClass('active').parent('li').removeClass('active');     
        $('section').each(function(i,item){
          var ele = $(item), nextTop;
          
          console.log(ele.next().html());
          
          if (typeof ele.next().offset() != "undefined") {
            nextTop = ele.next().offset().top;
          }
          else {
            nextTop = $(document).height();
          }
          
          if (ele.offset() !== null) {
            thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections);
          }
          else {
            thisTop = 0;
          }
          
          var docTop = $(document).scrollTop();
          
          if(docTop >= thisTop && (docTop < nextTop)){
            $('#dot-nav li').eq(i).addClass('active');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Dot Navigation with tooltips"
Bootstrap 3.1.0 Snippet by 1eddy87

Related: See More

Questions / Comments:

"Dot Navigation with tooltips" Bootstrap 3.1.0 Snippet by 1eddy87

Related: See More

Questions / Comments:

"Dot Navigation with tooltips"
Bootstrap 3.1.0 Snippet by 1eddy87