Pagination Example

Pagination with Bootstrap

by rachelmc_

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://www.solodev.com/assets/pagination/jquery.twbsPagination.js"></script>
<div class="container">
   <div class="jumbotron page" id="page1">
      <div class="container">
     <p class="structure">My name is <input type="text" id="userName" autocomplete="off">. I have known <span class="person"></span> for <input type="text" id="time" autocomplete="off"> years.</p>

      </div>
   </div>
   <div class="jumbotron page" id="page2">
   
   <p class="structure">I met <span class="person"></span> through <input type="text" id="associ" autocomplete="off">.</p>
      
   </div>
   <div class="jumbotron page" id="page3">
    
<p class="structure">At that time in my life I was <input type="text" id="past" autocomplete="off">.</p>
<p class="structure"><span class="person"></span> helped me <input type="text" id="present" autocomplete="off">.</p>
      <p>

   </div>
   <div class="jumbotron page" id="page4">
     <p class="structure"><span class="person"></span> taught me <input type="text" id="lesson" autocomplete="off">.</p>
     
   </div>
   <div class="jumbotron page" id="page5">
     <p class="structure">Having <span class="person"></span> in my life makes me feel <input type="text" id="feeling" autocomplete="off">.</p>
   </div>
   
   <div class="jumbotron page" id="page6">
   <p class="structure"> I always want to remind <span class="person"></span> that they <input type="text" id="strength" autocomplete="off">.</p>
   
   </div>
      <div class="jumbotron page" id="page7">
<p class="structure"><span class="person"></span> needs to know that they are <input type="text" id="compli" autocomplete="off">. 
</p>
</div>
 <div class="jumbotron page" id="page8">
<h2>Here is your Radlib for <span class="person"></span>!
</h2>

</div>
   <ul id="pagination-demo"...

CSS

.container {
  margin-top: 20px;
}
.page {
  display: none;
}
.page-active {
  display: block;
}

JavaScript

var admireName = prompt("Who is this Radlib for?");
var rl = document.getElementsByClassName("structure");
var name1 = document.getElementsByClassName("person");

for(var i = 0; i < name1.length; i++) {
		document.getElementsByClassName("person").innerHTML = admireName;
    name1[i].innerHTML = admireName;
}

var userName = document.getElementById("userName");
var time = document.getElementById("time");
var associ = document.getElementById("associ");
var past = document.getElementById("past");
var present = document.getElementById("present");
var lesson = document.getElementById("lesson");
var feeling = document.getElementById("feeling");
var strength = document.getElementById("strength");
var compli = document.getElementById("compli");

/*for (var i = 0; i < rl.length; i++) {
	var paragraph = document.getElementById("page8");
 	paragraph.appendChild(rl[i]);
}
*/
$('#pagination-demo').twbsPagination({
totalPages: 8,
// the current page that show on start
startPage: 1,

// maximum visible pages
visiblePages: 8,

initiateStartPageClick: true,

// template for pagination links
href: false,

// variable name in href template for page number
hrefVariable: '{{number}}',

// Text labels
first: 'First',
prev: 'Previous',
next: 'Next',
last: 'Last',

// carousel-style pagination
loop: false,

// callback function
onPageClick: function (event, page) {
	$('.page-active').removeClass('page-active');
  $('#page'+page).addClass('page-active');
},

// pagination Classes
paginationClass: 'pagination',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first',
pageClass: 'page',
activeClass: 'active',
disabledClass: 'disabled'

});

var part1 = document.getElementById("page1").textContent;
var part2 = document.getElementById("page2").textContent;
var part3 = document.getElementById("page3").textContent;
var part4 = document.getElementById("page4").textContent;
var part5 = document.getElementById("page5").textContent;
var part6 =...