Post by SubDevo on Feb 25, 2010 21:17:52 GMT -8
Create Sortable Index from Post by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.
Live Preview
This code creates a sortable index from a single post. Sort (ascending/descending) alphabetically and by date. Just click your desired sort method at the top of the post. A second click on the same sort link, changes the list from bullets to a numbered list. Excellent for code and/or graphics database use!
First, create your post in the same thread as the posts you wish to sort.
The code looks for any links placed in the "list" tags only. You are free to create the look of your post any way you wish as long as the links/posts you wish to sort are contained in "list" tags. Everything else in the post is unimportant to the code. To be able to sort the posts by date, ALL the post links MUST be from the SAME board. The code looks for the thread ID at the end of the URL to sort by date. If you want to sort links that are from different boards, set the variable useDates=0. This still allows you to sort them alphabetically.
Please see the Live Preview link above to get a better idea how this works.
Once you have the initial post made, simply modify your post to add more links as they come. No need to edit the code.
Enjoy!!!
SubDevo
Variables: Edit the Maroon portions.
var numList=0; // 1=Use Numbered List, 0=Use Bullet List
This sets your list style when the post is first viewed.
You may toggle bullets/numbers by clicking the same sort link a second time.
var divider=' | '; // Divider Between Sort Links
This is your desired divider character between the sort links.
You may also use an image, using some HTML <img border="0" alt="[]" src="URL TO IMAGE"/>
var useDates=1; // 1=Show Sort by Date Links, 0=Remove Sort by Date Links
Just what it says. Set this to "0" if your links in your post are NOT all from the same board.
var nview=["Category","Name (A-Z)","Name (Z-A)","Date (New to Old)","Date (Old to New)"]; // Sort Link Titles
This is the text for the sort links. Edit as you will...
var iBoards=[ // Board ID, Thread ID
["premadegraphics","31"],
["premadegraphics","178"],
["proboardcodedatabase","170"] <--- NO COMMA
]; // DO NOT TOUCH
These are important. Enter the board ID and the thread ID of the thread you wish to sort.
Look at the URL of your sortable post to find these...
board=proboardcodedatabase&action=display&thread=170
The code will ONLY run on the board and thread matching the ones entered above.
DO NOT put a comma on the last entry. If you only have one board that you are sorting, remove the comma at the end like so:
var iBoards=[ // Board ID, Thread ID
["proboardcodedatabase","170"] <--- NO COMMA
]; // DO NOT TOUCH
That's it!
Make sure you play with the live preview to get a better understanding of what the code does.
Location: Global Footer
<script type="text/javascript">
<!--
/* Create Sortable Index from Post by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */
var numList=0; // 1=Use Numbered List, 0=Use Bullet List
var divider=' | '; // Divider Between Sort Links
var useDates=1; // 1=Show Sort by Date Links, 0=Remove Sort by Date Links
var nview=["Category","Name (A-Z)","Name (Z-A)","Date (New to Old)","Date (Old to New)"]; // Sort Link Titles
var iBoards=[ // Board ID, Thread ID
["premadegraphics","31"],
["premadegraphics","178"],
["proboardcodedatabase","170"]
]; // DO NOT TOUCH
function sortIt(a,b){return a[0]-b[0]}
function mLI(n,d){ var u=(numList)?"ol>":"ul>"; var b="<"+u+"<font size='2'>";
for(var x=0;x<n.length;x++){
b+="<li>"+n[x][d+1].replace(/<br(\s)?(\/)?>/gi,"")+"<br/></li>";
} return b+"</font></"+u;
}
function cSwap(){ var u=(numList)?"ol>":"ul>"; var u2=(numList)?/ul>/gi:/ol>/gi;
for(var x=0;x<nHT.length;x++){nHT[x]=nHT[x].replace(u2,u);} numList=!numList;
}
function cIt(a){ if(cVue==a){cSwap();} cVue=a; var nh="<hr class='hr'>";
var nM="<center><font size='2'>"+nHead+" <b>"+nview+nTh+((a>0)?nh:"");
document.getElementById("nGuts").innerHTML=nM+"<div>"+nHT+"</div>";
}
for(var r=0;r<iBoards.length;r++){
var nM=iBoards[r][0]+"&action=display&thread="+iBoards[r][1]+"$";
if(location.href.match(nM)&& !document.postForm){if(!useDates){nview.length=nview.length-2;}
var hr=document.getElementsByTagName("hr"); var nHT=[];
for(var x=0;x<hr.length;x++){ var nrHr=hr[x].parentNode;
if(nrHr.nodeName.match(/td/i)&&nrHr.colSpan=="3"){var nHr=nrHr;}
} nHT[0]=nHr.innerHTML; nHr.id="nGuts";
var nx=nHr.getElementsByTagName("a"); var nL=[]; var nN=[]; var nb="";
for(var i=0;i<nx.length;i++){with(nx){
if(parentNode.nodeName.match(/li/i)){ var ba=nx.parentNode.innerHTML;
if(useDates&&href.match(iBoards[r][0])){ nb=href.slice(href.lastIndexOf("=")+1);
nL.push([innerHTML,ba,nb]); nN.push([nb,innerHTML,ba]);
}else{nL.push([innerHTML,ba]);}
}}
} nHT[1]=mLI(nL.sort(),0); nHT[2]=mLI(nL.sort().reverse(),0);
if(useDates){nHT[3]=mLI(nN.sort(sortIt).reverse(),1); nHT[4]=mLI(nN.sort(sortIt),1);}
var nHead="Sorted By "; var nHd="<a href='javascript:cIt("; var nTh=""; var cVue=0;
for(x=0;x<nview.length;x++){nTh+=nHd+x+")'>"+nview[x]+"</a>"+divider;}
nTh="</b><br/>"+nTh.slice(0,nTh.lastIndexOf(divider))+"</font></center>"; cIt(0);break;
}
}
//-->
</script>
Tested in IE, FF, Opera, Safari and Chrome.
Live Preview
This code creates a sortable index from a single post. Sort (ascending/descending) alphabetically and by date. Just click your desired sort method at the top of the post. A second click on the same sort link, changes the list from bullets to a numbered list. Excellent for code and/or graphics database use!
First, create your post in the same thread as the posts you wish to sort.
The code looks for any links placed in the "list" tags only. You are free to create the look of your post any way you wish as long as the links/posts you wish to sort are contained in "list" tags. Everything else in the post is unimportant to the code. To be able to sort the posts by date, ALL the post links MUST be from the SAME board. The code looks for the thread ID at the end of the URL to sort by date. If you want to sort links that are from different boards, set the variable useDates=0. This still allows you to sort them alphabetically.
Please see the Live Preview link above to get a better idea how this works.
Once you have the initial post made, simply modify your post to add more links as they come. No need to edit the code.
Enjoy!!!
SubDevo
Variables: Edit the Maroon portions.
var numList=0; // 1=Use Numbered List, 0=Use Bullet List
This sets your list style when the post is first viewed.
You may toggle bullets/numbers by clicking the same sort link a second time.
var divider=' | '; // Divider Between Sort Links
This is your desired divider character between the sort links.
You may also use an image, using some HTML <img border="0" alt="[]" src="URL TO IMAGE"/>
var useDates=1; // 1=Show Sort by Date Links, 0=Remove Sort by Date Links
Just what it says. Set this to "0" if your links in your post are NOT all from the same board.
var nview=["Category","Name (A-Z)","Name (Z-A)","Date (New to Old)","Date (Old to New)"]; // Sort Link Titles
This is the text for the sort links. Edit as you will...
var iBoards=[ // Board ID, Thread ID
["premadegraphics","31"],
["premadegraphics","178"],
["proboardcodedatabase","170"] <--- NO COMMA
]; // DO NOT TOUCH
These are important. Enter the board ID and the thread ID of the thread you wish to sort.
Look at the URL of your sortable post to find these...
board=proboardcodedatabase&action=display&thread=170
The code will ONLY run on the board and thread matching the ones entered above.
DO NOT put a comma on the last entry. If you only have one board that you are sorting, remove the comma at the end like so:
var iBoards=[ // Board ID, Thread ID
["proboardcodedatabase","170"] <--- NO COMMA
]; // DO NOT TOUCH
That's it!
Make sure you play with the live preview to get a better understanding of what the code does.
Location: Global Footer
<script type="text/javascript">
<!--
/* Create Sortable Index from Post by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */
var numList=0; // 1=Use Numbered List, 0=Use Bullet List
var divider=' | '; // Divider Between Sort Links
var useDates=1; // 1=Show Sort by Date Links, 0=Remove Sort by Date Links
var nview=["Category","Name (A-Z)","Name (Z-A)","Date (New to Old)","Date (Old to New)"]; // Sort Link Titles
var iBoards=[ // Board ID, Thread ID
["premadegraphics","31"],
["premadegraphics","178"],
["proboardcodedatabase","170"]
]; // DO NOT TOUCH
function sortIt(a,b){return a[0]-b[0]}
function mLI(n,d){ var u=(numList)?"ol>":"ul>"; var b="<"+u+"<font size='2'>";
for(var x=0;x<n.length;x++){
b+="<li>"+n[x][d+1].replace(/<br(\s)?(\/)?>/gi,"")+"<br/></li>";
} return b+"</font></"+u;
}
function cSwap(){ var u=(numList)?"ol>":"ul>"; var u2=(numList)?/ul>/gi:/ol>/gi;
for(var x=0;x<nHT.length;x++){nHT[x]=nHT[x].replace(u2,u);} numList=!numList;
}
function cIt(a){ if(cVue==a){cSwap();} cVue=a; var nh="<hr class='hr'>";
var nM="<center><font size='2'>"+nHead+" <b>"+nview+nTh+((a>0)?nh:"");
document.getElementById("nGuts").innerHTML=nM+"<div>"+nHT+"</div>";
}
for(var r=0;r<iBoards.length;r++){
var nM=iBoards[r][0]+"&action=display&thread="+iBoards[r][1]+"$";
if(location.href.match(nM)&& !document.postForm){if(!useDates){nview.length=nview.length-2;}
var hr=document.getElementsByTagName("hr"); var nHT=[];
for(var x=0;x<hr.length;x++){ var nrHr=hr[x].parentNode;
if(nrHr.nodeName.match(/td/i)&&nrHr.colSpan=="3"){var nHr=nrHr;}
} nHT[0]=nHr.innerHTML; nHr.id="nGuts";
var nx=nHr.getElementsByTagName("a"); var nL=[]; var nN=[]; var nb="";
for(var i=0;i<nx.length;i++){with(nx){
if(parentNode.nodeName.match(/li/i)){ var ba=nx.parentNode.innerHTML;
if(useDates&&href.match(iBoards[r][0])){ nb=href.slice(href.lastIndexOf("=")+1);
nL.push([innerHTML,ba,nb]); nN.push([nb,innerHTML,ba]);
}else{nL.push([innerHTML,ba]);}
}}
} nHT[1]=mLI(nL.sort(),0); nHT[2]=mLI(nL.sort().reverse(),0);
if(useDates){nHT[3]=mLI(nN.sort(sortIt).reverse(),1); nHT[4]=mLI(nN.sort(sortIt),1);}
var nHead="Sorted By "; var nHd="<a href='javascript:cIt("; var nTh=""; var cVue=0;
for(x=0;x<nview.length;x++){nTh+=nHd+x+")'>"+nview[x]+"</a>"+divider;}
nTh="</b><br/>"+nTh.slice(0,nTh.lastIndexOf(divider))+"</font></center>"; cIt(0);break;
}
}
//-->
</script>