CODEWITHSUNDEEP
javascriptjqueryhtmlcsspagination
Outdated Computer Tech
Outdated Computer Tech

Reputation: 2026

Simple pagination Multiple pages, using multiple css selectors

I'm using simple pagination to run my website, but I've ran into a problem. I have css tabs that is my navigation, in each navigation i have a separate pagination that differs from the previous one.

jquery pagination code

$(function(){
var perPage = 8;
var opened = 1;
var onClass = 'on';
var paginationSelector = '.pages';
$('.gallery').simplePagination(perPage, opened, onClass, paginationSelector);
});

.gallery is used to call the style of the gallery i'm assuming, but the only way to use this code (AS FAR AS I KNOW) is to call it a second time.

$(function(){
var perPage = 8;
var opened = 1;
var onClass = 'on';
var paginationSelector = '.pages2';
$('.gallery2').simplePagination(perPage, opened, onClass, paginationSelector);
});

my first question, is there a way to simplify the code, where i dont have to repeat each jquery call?

Second question, regardless of that, when i try to call the same css code

.gallery, .gallery2 {
    float: left;
    overflow: hidden;
    padding: 3px 4px 5px 6px;
    margin: 3px 4px 5px 6px;
    height: 552px;
    width:850px;
}

 .gallery, .gallery2 li {
    float: left;
    display: inline;
    font-weight: bold;
    width: 190px;
    padding: 3px 4px 5px 6px;
    background: #E6E6FA;
    border: 1px solid #999999; 
    text-align: center;
    margin: 3px 4px 5px 6px;
    font: 12px Arial, Helvetica, Sans-serif;
    color: #4c4c4c;
    height: 255px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px; 
    }

This code does not work, i have to separate the code for each gallery on its own, then it works. I mean i could manage, but 1 edit means i have to edit 5+ times. Any idea why this is not working?

I'm assuming it doesnt work because of this call. It's looking for .gallery? correct? is there a way to alter the code to make multiple class selections possible?

$('.gallery').simplePagination(perPage, opened, onClass, paginationSelector);
});

Upvotes: 0

Views: 2720

Answers (1)

Näbil Y
Näbil Y

Reputation: 1650

This will bind the pagination event to elements with either classes (gallery2 and gallery)

$(function(){
    var perPage = 8;
    var opened = 1;
    var onClass = 'on';
    $('.gallery').simplePagination(perPage, opened, onClass, '.pages');
    $('.gallery2').simplePagination(perPage, opened, onClass, '.pages2');
});

You could at least do it this way, not sure how many pages you have or how your code looks like. Could be solved by a loop adding 1 (or nothing if i == 1),2,3 etc after "gallery" and "pages".

Last css change to .gallery li, .gallery2 li

Upvotes: 1

Related Questions