Bootstrap Snippet Paginator using HTML CSS 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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 class="paginator">
    <ul class="pager">
      <li class="previous">
        <a>Previous</a>
      </li>
        <li >
            <h3 class="fillSpace">Title goes here</h3>
        </li>
      <li class="next">
        <a>Next</a>
      </li>
    </ul>
</div>
<div>
<section class="navSelected NavigationItem" title="Title 1">Section 1</section>
<section class="NavigationItem" title="Title 2">Section 2</section>
<section class="NavigationItem" title="Title 3">Section 3</section>
<section class="NavigationItem" title="Title 4">Section 4</section>
<section class="NavigationItem" title="Title 5">Section 5</section>
</div>
<!--
  <a class="prev">Prev</a>
  <a class="next">Sig</a>-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.NavigationItem{display:none;}
.navSelected { color:red; display:  block; } 
.next, .previous{
    cursor:pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.fillSpace
{
    display:inline-block;
    padding:0;margin:0;
}
.paginator
{
    padding: 15px;
} 
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
$(function () {
    //next
    
changeText($('section.navSelected'));
$('.next').click(function() {
    var $el = $('section.navSelected').removeClass('navSelected');
    var $next = $el.next();
    
    console.log($next.find('.NavigationItem'));
    
    if ($next.length === 0)
        $next = $('section:first');
    changeText($next);
    $next.addClass('navSelected');
});
    //prev
    $('.previous').click(function() {
    var $el = $('section.navSelected').removeClass('navSelected');
    var $next = $el.prev();
    
    console.log($next.length);
    
    if ($next.length === 0)
        $next = $('section:last');
    changeText($next);
    $next.addClass('navSelected');
});
    
    function changeText(sectSel){
        
        var title = $( sectSel ).attr( "title" );
        
        $('.fillSpace').empty();
        $('.fillSpace').append(title);
        
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Paginator"
Bootstrap 3.0.0 Snippet by novadevco

Related: See More

Questions / Comments:

"Paginator" Bootstrap 3.0.0 Snippet by novadevco

Related: See More

Questions / Comments:

"Paginator"
Bootstrap 3.0.0 Snippet by novadevco