Mobile Responsive Pagination Samples Sought!

JavaScript
1

Folks!

I am searching for sample templates or tutorials on Mobile Responsive Pagination. Pagination like google search result pages. Must be compatible for all devices. Mobiles, Tablets, Desktops.
Googling with these keywords but no luck:
responsive pagination AND 2019 -plugin -bootstrap -wordpress -wp -word press

If you come across better keywords or know of any good tutorials or sample templates websites then drop me the links here.

Cheers!

2

Look, this is what I mean by cool modern animation type css pagination:

Just found it.
Usually they just show the page number buttons. I need the code to show the mysql query results too on the page. And so, if you come across any such pagination codes then let me know the link. Ok ?
I can see the License Terms here:
http://www.bestjquery.com/codelab-license-terms/

I see that it isjQuery code. Don’t know what it is. And so, cannot css do all this ? That way, I can forget jQUery. I believe it is Javascript stuff. Right ?

3

Folks,

Can you help me fix this code ?
I need to add the html missing tags in the appropriate places.
I have never dealt with jQuery before. And so, you can see from the link, I need to create 2 files. Html and Css.
I prefered one file and so just added the css code inside the tags. Did I do ok ?
Anyway, these style tags, do they come in the html header tags or body tags ?

<html>
<style>
.demo{ background-color: #d63031; }
.pagination-outer{ text-align: center; }
.pagination{
    background: linear-gradient(to right,transparent,#fff,#fff,transparent);
    font-family: 'Rubik', sans-serif;
    padding: 0 30px;
    display: inline-flex;
    position: relative;
}
.pagination li a.page-link{
    color: #d63031;
    background-color: transparent;
    font-size: 22px;
    line-height: 40px;
    height: 50px;
    width: 40px;
    border: none;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease 0s;
}
.pagination li.active a.page-link,
.pagination li a.page-link:hover,
.pagination li.active a.page-link:hover{
    color: #fff;
    background-color: transparent;
    text-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.pagination li a.page-link:before,
.pagination li a.page-link:after{
    content: '';
    background-color: #d63031;
    height: 100%;
    width: 100%;
    position: absolute;
    left: -100%;
    top: 100%;
    z-index: -1;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    transition:all 0.3s ease 0s;
}
.pagination li a.page-link:after{
    background-color: #ed4040;
    left: 100%;
    top: -100%;
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.pagination li a.page-link:hover:before,
.pagination li.active a.page-link:before,
.pagination li a.page-link:hover:after,
.pagination li.active a.page-link:after{
    left: 0;
    top: 0;
}
@media only screen and (max-width: 480px){
    .pagination{ display: block; }
    .pagination li{
        margin-bottom: 10px;
        display: inline-block;
</style>
<div class="demo">
    <nav class="pagination-outer" aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item">
                <a href="#" class="page-link" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item active"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
            <li class="page-item">
                <a href="#" class="page-link" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
</html>

It is looking funny on my Fire Fox. Different too what I see in the youtube clip. Why is that ? I saved file with .php extension as I would need to add php codes to complate the Pagination Page. IUs the file extension causing the issue where it looks weird and different to the look on the youtube vid ?

Original code here:
http://bestjquery.com/tutorial/pagination/demo31/

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.