Post by Tobias on Nov 3, 2007 14:33:19 GMT -5
Global Footers
Open Source
This converts the page dropdown into links, and doesn't cut off the last page. Fairly Customizable.
var lCont = 1;
var rCont = 2;
var bCont = 3;
var eCont = 4;
Preview with those settings:
« 1 2 3 ... 6 7 8 9 ... 20 21 22 23 »
The CSS modifies a few things.
The first line is the entire list, the second line is the links that replace the dropdown, the third line is the dots between groups of links, and the last one is the selected page.
Remember that CSS inherits, so any styles you apply to the list in general will also apply to the links and dots unless you specify that they should be different.
Enjoy!
Open Source
This converts the page dropdown into links, and doesn't cut off the last page. Fairly Customizable.
var lCont = 1;
var rCont = 2;
var bCont = 3;
var eCont = 4;
Preview with those settings:
« 1 2 3 ... 6 7 8 9 ... 20 21 22 23 »
The CSS modifies a few things.
The first line is the entire list, the second line is the links that replace the dropdown, the third line is the dots between groups of links, and the last one is the selected page.
Remember that CSS inherits, so any styles you apply to the list in general will also apply to the links and dots unless you specify that they should be different.
<style type="text/css">
/* Pagination Links Styles */
.pageLinks{
font-size: 10px;
}
.pageLinks a{
font-weight: normal;
}
.pageLinks .pageDots{
font-weight: normal;
}
.pageLinks .pageSelected{
color: #444;
font-weight: bold;
}
</style>
<script type="text/javascript">
// Tobias's Pagination
var lCont = 2; //Pages to the left of current Page
var rCont = 2; //Pages to the right of current page
var bCont = 3; //Pages to show at the beginning
var eCont = 3; //Pages to show at the end
// No more Editing for general users
var page = document.getElementsByName('pageMenu');
if(page.length>0){
var thread = (location.href.match(/thread=(\d+)?/i))?RegExp.$1:false; //Not always in a thread
var board = (location.href.match(/board=([^&]+)/i))?RegExp.$1:false; //No board for PMs
var action = (location.href.match(/action=([^&]+)/i))?RegExp.$1:false; //Boards have no action
var base = 'index.cgi?';
//If board and action, add both, if just board, add board, if just action, add action (ensuring proper nesting of &'s)
base += (board&&action)?'board='+board+'&action='+action:(board)?'board='+board:(action)?'action='+action:'';
// Add thread if is one
base+=(thread) ? '&thread='+thread:'';
while(page.length>0){
if(action) if(action.toLowerCase()=='pm') page[0].options[0]=null; //Remove --Pages-- on PM Page
var links = '';
for(i=0;i<page[0].options.length;i++){
if(page[0].options[i].selected){
if(i!=0) links += ' ';
links+= '<span class="pageSelected">'+(i+1)+'</span>';
}else if((i-lCont-1)<page[0].selectedIndex&&page[0].selectedIndex<(i+rCont+1)){
if(i!=0) links += ' ';
links+= '<a href="'+base+'&page='+(i+1)+'">'+(i+1)+'</a>';
}else if(i<bCont||(page[0].options.length-1-eCont)<i){
if(i!=0) links += ' ';
links += '<a href="'+base+'&page='+(i+1)+'">'+(i+1)+'</a>';
}else if((i-lCont-1)==page[0].selectedIndex||(i+rCont+1)==page[0].selectedIndex){
links+= ' <span class="pageDots">...</span>';
}
}
var span = document.createElement('span');
page[0].parentNode.replaceChild(span,page[0]);
span.innerHTML = links;
span.className = 'pageLinks';
}
}
</script>Enjoy!
