Home
2015-01-31, 14:04
![[Javascript] Fancy pagination style Alerte10](https://i.servimg.com/u/f66/15/86/37/09/alerte10.png) | Tutorial: Fancy pagination style |
Get a fancy pagination style for your forum.
Credits: @HeroWaar
--> Tutorials, tips and tricks <--
Fancy pagination style
Fancy pagination style
1º - Javascript
Placement In the sub-forum
- Code:
[panda=js]$(function(){
$('head').append('<style>.paging a, .paging b {text-decoration:none;background-color: #e9e9e9;border: 1px solid #afafaf;border-radius: 3px;box-shadow: 1px 1px 1px #ddd;color: #717171 !important;padding: 5px 8px;cursor: default;}.paging a:hover {background: #fff;}.paging b {background: #fff;border-color: #ccc;box-shadow: 0 0 5px #ccc inset;}.paging .disabled {background: #eee !important;border-color: #ccc !important;box-shadow: none;color: #999 !important;cursor: not-allowed;}</style>');
var sPages = jQuery('.paging');
if (sPages.length) {
sPages.html(sPages
.html()
.replace(/<\/a> :/g, '<\/a> ')
.replace(/<\/a>, <b>/g, '</a> <b>')
.replace(/>,.<a/g, '> <a')
);
};
var ante = jQuery('.paging .sprite-arrow_prosilver_left').length;
var prox = jQuery('.paging .sprite-arrow_prosilver_right').length;
if (ante && prox ) {
jQuery('.paging .sprite-arrow_prosilver_right').replaceWith('<span title="Go to the next page.">Next »</span>');
jQuery('.paging .sprite-arrow_prosilver_left').replaceWith('<span title="Go to the previous page.">« Previous</span>');
} else if (ante) {
jQuery('.paging').append('<a class="disabled" title="Go to the next page." style="margin-left: 5px;">Next »</a>');
jQuery('.paging .sprite-arrow_prosilver_left').replaceWith('<span title="Go to the previous page.">« Previous</span>');
} else if (prox) {
jQuery('.paging a:first').after('<a class="disabled" title="Go to the next page.">« Previous</a>');
jQuery('.paging .sprite-arrow_prosilver_right').replaceWith('<span title="Ir para a próxima página.">Next »</span>');
}
$('.paging a:first').remove();
});
2º - Preview
![[Javascript] Fancy pagination style W2NzZaU](https://i.imgur.com/w2NzZaU.png)
© PunBB Design
![[Javascript] Fancy pagination style Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | If you have any questions related to this topic create a topic with the following title: Fancy pagination style |
![[Javascript] Fancy pagination style Left1011](https://i.servimg.com/u/f57/17/68/86/50/left1011.png){kind=small}
![[Javascript] Fancy pagination style Middle10](https://i.servimg.com/u/f72/17/48/02/71/middle10.png){kind=small}
![[Javascript] Fancy pagination style Right10](https://i.servimg.com/u/f72/17/48/02/71/right10.png){kind=small}
