Different Sort of Pagination
How do I make an different sort of pagination?
Responsive, Fixed Pagination. What is a different sort of pagination? How do you make a different sort of pagination? This script and codes were developed by Tiberiu Raducea on 25 September 2022, Sunday.
Different Sort of Pagination - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Different Sort of Pagination</title> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Dosis:400,600);
body { height: 2000px; background: cornsilk;
}
.fixed-pagination { position: fixed; left: 0; top: 50%; transform: translateY(-50%);
}
@media (max-width: 640px) { .fixed-pagination { top: auto; bottom: 0; left: 0; width: 100%; transform: none; text-align: center; } .fixed-pagination ul { display: table; width: 100%; } .fixed-pagination ul li { display: inline-block; border-left: 2px solid transparent; }
}
.fixed-pagination ul { list-style: none; margin: 0;
}
.fixed-pagination ul li { box-sizing: border-box; transition: .2s all ease-in-out; border-bottom: 2px solid transparent;
}
.fixed-pagination ul li.has-a-go-to { position: relative;
}
.fixed-pagination ul li.has-a-go-to .go-to-page { clip: auto; position: absolute; display: none; left: 100%; padding-left: 2px; top: 0; width: 10rem; visibility: hidden;
}
.fixed-pagination ul li.has-a-go-to .go-to-page input { padding: 0 0 0 .25rem; line-height: 2; border: none; box-shadow: none; outline: none; background: rgba(255, 99, 71, 0.5); height: auto; margin-bottom: 0; border-radius: 2px;
}
.fixed-pagination ul li.has-a-go-to .go-to-page input:focus, .fixed-pagination ul li.has-a-go-to .go-to-page input:hover { border: none; box-shadow: none; outline: none; background: rgba(255, 99, 71, 0.5);
}
.fixed-pagination ul li.has-a-go-to.clicked .go-to-page, .fixed-pagination ul li.has-a-go-to:focus .go-to-page, .fixed-pagination ul li.has-a-go-to:hover .go-to-page { display: block; visibility: visible;
}
@media (max-width: 640px) { .fixed-pagination ul li.has-a-go-to.clicked .go-to-page, .fixed-pagination ul li.has-a-go-to:focus .go-to-page, .fixed-pagination ul li.has-a-go-to:hover .go-to-page { left: auto; top: auto; bottom: 100%; margin-bottom: 2px; margin-left: 1rem; transform: translateX(-50%); }
}
.fixed-pagination ul li.active a { position: relative; background: #ff3814;
}
@media (min-width: 640px) { .fixed-pagination ul li.active a:hover:after { content: "You Are Here"; position: absolute; top: 50%; transform: translateY(-50%); left: 110%; background: rgba(255, 99, 71, 0.5); padding: .25rem; white-space: nowrap; border-radius: 2px; }
}
.fixed-pagination ul li.disabled a { pointer-events: none; opacity: .7;
}
.fixed-pagination ul li a { font-family: 'Dosis', sans-serif; display: block; padding: 0 .525rem; line-height: 2; background: tomato; color: white; text-align: center;
}
.fixed-pagination ul li a:hover { background: #ff3814;
}
.fixed-pagination ul li a.next { position: relative;
}
@media (min-width: 640px) { .fixed-pagination ul li a.next:hover:after { content: "Next Page"; position: absolute; top: 50%; transform: translateY(-50%); left: 110%; background: rgba(255, 99, 71, 0.5); padding: .25rem; white-space: nowrap; border-radius: 2px; }
}
@media (max-width: 640px) { .fixed-pagination ul li a.next { transform: rotate(-180deg); }
}
.fixed-pagination ul li a.previous { position: relative;
}
@media (min-width: 640px) { .fixed-pagination ul li a.previous:hover:after { content: "Previous Page"; position: absolute; top: 50%; transform: translateY(-50%); left: 110%; background: rgba(255, 99, 71, 0.5); padding: .25rem; white-space: nowrap; border-radius: 2px; }
}
@media (max-width: 640px) { .fixed-pagination ul li a.previous { transform: rotate(-180deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="fixed-pagination"> <ul> <li><a href="#" class="next">></a></li> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="has-a-go-to"><a href="#">...</a> <div class="go-to-page"> <form action=""> <input type="text" placeholder="Go to page" /> <button type="submit" class="hide">GO</button> </form> </div> </li> <li><a href="#">12</a></li> <li><a href="#">13</a></li> <li><a href="#">14</a></li> <!-- Disabled for unavailable --> <!-- <li class="disabled"><a href="#" class="previous"><</a></li> --> <li><a href="#" class="previous"><</a></li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Different Sort of Pagination - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Dosis:400,600);
body { height: 2000px; background: cornsilk;
}
.fixed-pagination { position: fixed; left: 0; top: 50%; transform: translateY(-50%);
}
@media (max-width: 640px) { .fixed-pagination { top: auto; bottom: 0; left: 0; width: 100%; transform: none; text-align: center; } .fixed-pagination ul { display: table; width: 100%; } .fixed-pagination ul li { display: inline-block; border-left: 2px solid transparent; }
}
.fixed-pagination ul { list-style: none; margin: 0;
}
.fixed-pagination ul li { box-sizing: border-box; transition: .2s all ease-in-out; border-bottom: 2px solid transparent;
}
.fixed-pagination ul li.has-a-go-to { position: relative;
}
.fixed-pagination ul li.has-a-go-to .go-to-page { clip: auto; position: absolute; display: none; left: 100%; padding-left: 2px; top: 0; width: 10rem; visibility: hidden;
}
.fixed-pagination ul li.has-a-go-to .go-to-page input { padding: 0 0 0 .25rem; line-height: 2; border: none; box-shadow: none; outline: none; background: rgba(255, 99, 71, 0.5); height: auto; margin-bottom: 0; border-radius: 2px;
}
.fixed-pagination ul li.has-a-go-to .go-to-page input:focus, .fixed-pagination ul li.has-a-go-to .go-to-page input:hover { border: none; box-shadow: none; outline: none; background: rgba(255, 99, 71, 0.5);
}
.fixed-pagination ul li.has-a-go-to.clicked .go-to-page, .fixed-pagination ul li.has-a-go-to:focus .go-to-page, .fixed-pagination ul li.has-a-go-to:hover .go-to-page { display: block; visibility: visible;
}
@media (max-width: 640px) { .fixed-pagination ul li.has-a-go-to.clicked .go-to-page, .fixed-pagination ul li.has-a-go-to:focus .go-to-page, .fixed-pagination ul li.has-a-go-to:hover .go-to-page { left: auto; top: auto; bottom: 100%; margin-bottom: 2px; margin-left: 1rem; transform: translateX(-50%); }
}
.fixed-pagination ul li.active a { position: relative; background: #ff3814;
}
@media (min-width: 640px) { .fixed-pagination ul li.active a:hover:after { content: "You Are Here"; position: absolute; top: 50%; transform: translateY(-50%); left: 110%; background: rgba(255, 99, 71, 0.5); padding: .25rem; white-space: nowrap; border-radius: 2px; }
}
.fixed-pagination ul li.disabled a { pointer-events: none; opacity: .7;
}
.fixed-pagination ul li a { font-family: 'Dosis', sans-serif; display: block; padding: 0 .525rem; line-height: 2; background: tomato; color: white; text-align: center;
}
.fixed-pagination ul li a:hover { background: #ff3814;
}
.fixed-pagination ul li a.next { position: relative;
}
@media (min-width: 640px) { .fixed-pagination ul li a.next:hover:after { content: "Next Page"; position: absolute; top: 50%; transform: translateY(-50%); left: 110%; background: rgba(255, 99, 71, 0.5); padding: .25rem; white-space: nowrap; border-radius: 2px; }
}
@media (max-width: 640px) { .fixed-pagination ul li a.next { transform: rotate(-180deg); }
}
.fixed-pagination ul li a.previous { position: relative;
}
@media (min-width: 640px) { .fixed-pagination ul li a.previous:hover:after { content: "Previous Page"; position: absolute; top: 50%; transform: translateY(-50%); left: 110%; background: rgba(255, 99, 71, 0.5); padding: .25rem; white-space: nowrap; border-radius: 2px; }
}
@media (max-width: 640px) { .fixed-pagination ul li a.previous { transform: rotate(-180deg); }
}
Different Sort of Pagination - Script Codes JS Codes
$('.has-a-go-to').on('click', 'a', function(e){ e.preventDefault(); $(this).parent().toggleClass('clicked');
});
Developer | Tiberiu Raducea |
Username | tyberiu88 |
Uploaded | September 25, 2022 |
Rating | 3 |
Size | 4,744 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sticky button bottom header | 2,802 Kb |
Search Form | 5,095 Kb |
Fancy title | 2,196 Kb |
Radar pulse | 1,654 Kb |
Sonar profile pic | 4,370 Kb |
Slider with Navigation slider - slick | 3,324 Kb |
Sass random | 4,436 Kb |
Very basic mobile menu with foundation 6 | 3,730 Kb |
A Pen by Tiberiu Raducea | 4,171 Kb |
Cookie policy Sass options | 3,167 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS3 Form | Tusharbandal | 1,836 Kb |
Sticky div | Kaslab | 2,225 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Animated Logo | Shakdaniel | 2,672 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!