Free Code Snippets (22) [21/12/06]

[Peter]

This thread is to be used to compile a list of free / open source code snippets that less experienced coders can use. If you are wishing to add a snippet to this list, then please read the requirements list below.

For a list of snippets, please see the second reply of this thread.

• Snippet must work
  So make sure you have fully tested it before posting, otherwise you will waste users time.
  
• Snippet must be explained
  Remember, inexperienced coders will be looking through this thread, so explain clearly what your snippet does, and how you could use it, and what possible limitations there are (not crossbrowser for example).
  
• Snippet must be created by yourself
  Any snippets that aren't created by you will be deleted, and you will no longer be allowed to add to the list.
  
• Has it already been posted?
  If a snippet has already been posted and does exactly what your's does, then don't bother. Unless we think it is better, then it will just be deleted.
  
• What sort of snippets?
  Anything you think would be helpful to coders. So anything ranging from regular expression patterns, functions, prototypes, objects etc etc.
  

We only want users posting if it has a snippet included with the post, if it doesn't, then your post will be deleted. If you need to comment on a snippet, create a new thread.

If your snippet is rather long, please create a new thread, but include in the title "[OS]" so we know it is an open source / free code to add to the index.

Don't post rubbish please, they will just be deleted. If you are unsure, just PM myself or Ross.

[Peter]

Total Snippets: 28 - Updated: 31/03/09

[/b]

[/url]
Set Attributes
Head/Base Images Function
Ordinal Suffix Function for Dates and other Numbers
Format numbers with commas
Object & Array toString Method
appendObj
createText
createObj
createElement()
Expand/Collapse Categories- OOP Style
Rank/Group/Posts Holder
[/ul]

Constructor Functions

[/url]
Info center object
ProBoards Statistics on Main Website
XBM Constructor
Persistent Data Storage Object
Manipulating Navigation Links
Object Correlation
[/ul]

Regular Expression Patterns

[/url]
Proboards URL check
More Location Checks (Mini Profile, Posting, Board Main, Main and Sub-Boards)
[/ul]

Other

[/url]
ProBoards Rich Text Editor (WYSIWYG)
Project Rebirth (Phoenix RPG)
ProBoards Multi Quote
Profile Drop-Down AddOn
Expand/Collapse Lists
[/ul][/ul]

[Peter]

For ProBoards 4.5, change the pattern to something like this...

/\.com(\/|.+cgi(\?|#.+|\?\w+=(home|\w{15}y.+))?)?$/i

Main page location checker pattern.

/\.com(\/|.+cgi(\?|#.+|\?\w+=home)?)?$/i

This regular expression pattern is what i've been using for a little while with v4 codes. If you are wanting to do something on the main page only, then this will do just that.

Use it like so:

if(location.href.match(/\.com(\/|.+cgi(\?|#.+|\?\w+=home)?)?$/i)){
   // Code here
}

[Peter]

Get CSS value from stylesheet.

function getCSSValue(r, s){
    var sheets = document.styleSheets.item(0);
    var ruleList = (typeof sheets.cssRules != "undefined")? sheets.cssRules : ((typeof sheets.rules != "undefined")? sheets.rules : null);

    if(ruleList){
        for(i = 0; i < ruleList.length; i ++){
            if(ruleList.item(i).selectorText == r){
                return ruleList.item(i).style;
            }
        }
    }
}

A function I am using for a current project. I needed to grab certain colours from the default style sheet, so I wrote this to do it.

How to use:

getCSSValue(class name, style property)

If I wanted to get the background colour of the class ".bordercolor", I would use it like so:


var bColor = getCSSValue(".bordercolor", "backgroundColor");

[Peter]

The PB Profile Constructor can be found here...

PB Profile Constructor

...with full instructions of how to use it, and examples.

[CrAzY_J]

Setattributes.

Firefox:

---

Object.prototype.setAttributes = function()
{
   if( this && arguments[0] )
   {
      for( ar = 0 ; ar < arguments.length ; ar ++ )
      {
         arguments[ar].split( /:/ )[0].match(/className/i)? this.setAttribute( 'class' ,arguments[ar].split(/:/)[1]) : this.setAttribute(arguments[ar].split( /:/ )[0],arguments[ar].split( /:/ )[1]);
      }
   }
}

---

To use this, you grab the node or create a node you want to set multiple attributes on and use the method.
example: document.getElementsByTagName('table')[0].setAttributes('id:tableid','width:100%','align:right');
The attribute and attribute value you pass on as one argument, seperating them with a colon

Cross browser:

---

function setAttributes()
{
   if( this && document.getElementById(arguments[0] ) )
   {
      for( ar = 1 ; ar < arguments.length ; ar ++ )
      {
         document.getElementById(arguments[0]).setAttribute( arguments[ar].split(/:/)[0], arguments[ar].split(/:/)[1] )
      }
   }
}

---

This is almost the same as the one before, but you need to give a id to the node you want to add the attributes to. And id needs to be the first arguments in the function.
Example (much like the last example): document.getElementsByTagName('table')[0].id = 'newid');
setAttributes('newid','width:100%','align:right');

Enjoy

[CrAzY_J]

Proboards URL check.

This pattern doesn't check if a user is viewing the main page of a proboards forum. But it will check any random proboards main url page. Used in "URL required when making thread" for example. So it will check a user input if it's a proboards main page url:

/.+?\.\w{9}\d{1,2}\.\w{3}(\/(index\.cgi(\/|\?)?)?)?$/i

[california]

More Location Checks

First, a brief introduction. Location checks make sure your code only executes on a certain page. A lot of coders seem to think it's only necessary to do this when your code messes up other pages. Not true. Even if your code isn't screwing up other pages, it's still looping through all the cells or images or links on the page a bunch of times when it doesn't need to be, causing slower page loads across the entire forum. You should always use a location check or some other check to determine you're on the right page, unless your code is actually supposed to execute on every page, which is only true for codes that modify the welcome table, and that's about it.

I'm giving not just the RegExp patterns but the full conditionals since some are more than just the one RegExp pattern.

MiniProfile
if(location.href.match(/on=(displ|search2|viewpr|pmv|(user)?rece|cal\w+iew)/))

Posting*
if(location.href.match(/on=((modify)?post|createp|pmsend)/) || document.title.match(/ - Preview/))

Board Main (as in, the page that contains the list of threads)
if(location.href.match(/\?board=\w+&?((mod\w+|page)=\d+)?$/))

Main and Sub-Boards (because codes that modify things on the main page might also need to modify things in the sub board table).
if(!location.href.match(/action/) || location.href.match(/action=home/))


* It's better to use this instead of a location check:

if(document.postForm)

[CrAzY_J]

Info center object

---

var Infocenter = new function()
{
  this.stats = { categories:0, boards:0, subboards:0, upboard:0, viewboard:0, topics:0, posts:0, members:0, lastpost:'', newmember:'' };
  this.onlinestats = { staff:0,members:0,guests:0,total:0,mostusers:'' };
  this.birthdays = [];
  this.events = [];
  this.online = [];
  this.Assembledata = function()
  {
    var TD = document.body.getElementsByTagName('td');
    for( t = 0 ; t < TD.length ; t ++ )
    {
       if( TD[t].colSpan == "5" && TD[t].className == "catbg" && TD[t].align != "right" )
         this.stats.categories ++;
      if( TD[t].className == "windowbg2" && TD[t].width == "66%" && TD[t].align == "left" )
      {
        this.stats.boards ++;
        this.stats.subboards += (TD[t].innerHTML.match(/\((\d+)\ssub-/))? parseInt(RegExp.$1):0;
        this.stats.viewboard += (TD[t].innerHTML.match(/\s(\d+)\sViewing/))? parseInt(RegExp.$1):0;
        if( TD[t+3].innerHTML.match(/<b>Today<\/b>/) )
          this.stats.upboard ++;
      }
      if( TD[t].align == "left" && TD[t].width == "60%" && TD[t].innerHTML.match(/Total\sTopics/) )
      {
        this.stats.topics = parseInt( ( TD[t].innerHTML.split(/Total\sTopics:\s/)[1].split(/\s&nb/)[0]).replace(/,/g,'') );
        this.stats.posts = parseInt( (TD[t].innerHTML.split(/Total\sPosts:\s/)[1].split(/<b/i)[0]).replace(/,/g,'') );
        this.stats.members = TD[t+1].innerHTML.match(/Total\sMembers:\s<.+?>(\d+)<\//)? parseInt(RegExp.$1):0;
        this.stats.lastpost = TD[t].innerHTML.split(/Updated\sTopic:\s/)[1].split(/<br/i)[0];
        this.stats.newmember = TD[t+1].innerHTML.split(/Newest\sMember:\s/)[1].split(/<b/i)[0];
      }
      if( TD[t].className == "catbg" && TD[t].colSpan == "2" && TD[t].innerHTML.match(/Today's\sBir/) )
      {
        for( a = 0 ; a < TD[t+3].getElementsByTagName('a').length ; a ++ )
          this.birthdays.push( TD[t+3].getElementsByTagName('a'));
      }
      if( TD[t].className == "catbg" && TD[t].colSpan == "2" && TD[t].innerHTML.match(/Events\sThis/) )
      {
        for( a = 0 ; a < TD[t+3].getElementsByTagName('a').length ; a ++ )
          this.events.push( TD[t+3].getElementsByTagName('a') );
      }
      if( TD[t].vAlign == "top" && TD[t].align == "left" && TD[t].firstChild.size == "1" && TD[t].innerHTML.match(/(\d+)\sStaff\sMember/) )
      {;
        this.onlinestats.staff = parseInt(RegExp.$1);
        this.onlinestats.members = TD[t].innerHTML.match(/\s(\d+)\sMember/)? parseInt(RegExp.$1):0;
        this.onlinestats.guests = TD[t].innerHTML.match(/>?(\d+)\sGuest/)? parseInt(RegExp.$1):0;
        this.onlinestats.total = Math.floor( this.onlinestats.staff + this.onlinestats.members + this.onlinestats.guests );
        this.onlinestats.mostusers = TD[t].innerHTML.split(/Most\susers\sonline\swas\s/)[1].split(/<br/i)[0];
        for( a = 0 ; a < TD[t].getElementsByTagName('a').length ; a ++ )
        {
          if( TD[t].getElementsByTagName('a').href.match(/viewprofile/) )
            this.online.push( TD[t].getElementsByTagName( 'a' ) )
        }
      }
    }
  }
}
if( this.location.href.match(/\.com(\/(index\.cgi(#\w+|\?(action=home)?)?)?)?$/))
  Infocenter.Assembledata();

---

All the info center information has been put into this object. Here is the list of all of them and how to access them.

---

Infocenter.stats.categories = total categories
Infocenter.stats.boards = total boards
Infocenter.stats.subboards = total sub boards
Infocenter.stats.upboard = total today updates boards
Infocenter.stats.viewboard = total viewing the boards
Infocenter.stats.topics = total topics
Infocenter.stats.posts = total posts
Infocenter.stats.members = total members
Infocenter.stats.lastpost = last post + date
Infocenter.stats.newmember = link to newest member
Infocenter.onlinestats.staff = total staff online
Infocenter.onlinestats.members = total members online
Infocenter.onlinestats.guests = total guests online
Infocenter.onlinestats.total = total online
Infocenter.onlinestats.mostusers = most users ever online info
Infocenter.birthdays = array of all birthdays
Infocenter.events = array of all events
Infocenter.online = array of users online

Left side is how to access the information on the right side

[california]

Head/Base Images Function

This function accepts a table as its paramater and gives it head & base images. To use it, first define variables headImg and baseImg above or inside the function as the URLs, then loop through the tables in the document, target the one you want and call headBase(tableObject);

function headBase(theTable){
    var pTD = theTable.parentNode;
    if(pTD.firstChild.nodeName == "DIV"){
        return false;
    }
    var hDiv = document.createElement("div");
    hDiv.align = "center";
    var hImg = new Image();
    hImg.src = headImg;
    hDiv.appendChild(hImg);
    var bDiv = hDiv.cloneNode(true);
    bDiv.firstChild.src = baseImg;
    pTD.insertBefore(hDiv, theTable);
    if(theTable.nextSibling){
        pTD.insertBefore(bDiv, theTable.nextSibling);
    }else{
        pTD.appendChild(bDiv);
    }
}

[california]

Ordinal Suffix Function for Dates and other Numbers

The function accepts a number as its paramater and returns the two-character English suffix that corresponds to it, namely 'st', 'nd', 'rd' or 'th'. Should work for any number no matter the size.

function ordinalSuffix(n){
    return (n.toString().match(/(1\d|[0,4-9])$/)) ? 'th' : ((n.toString().match(/(\d)$/)) ? (['st', 'nd', 'rd'])[RegExp.$1-1] : 'th');
}

And all on a single line? Why not

Example usage:

var myNumber = prompt("Enter a Number", "");
alert("That's the " + myNumber + ordinalSuffix(myNumber) + "time I've heard that one today!");

[Peter]

Format numbers with commas

function format_num(num_str){
    while(/(\d+)(\d{3})/.test(num_str.toString())){
        num_str = num_str.toString().replace(/(\d+)(\d{3})/, "$1,$2");
    }
    return num_str;
}

To use it, just pass the number to the function like so...

var num = format_num(4567);

The output would be "4,567";

[(¯`•DregondRahl•._)]

Profile Drop-Down AddOn

[(¯`•DregondRahl•._)]

This can be used to append multiple childNodes to a parentNode.



function appendObj(obj, Atri) {
        for (a = 0; a < Atri.length; a ++) {
                obj.appendChild(Atri);
        }
}



you use it like this

appendObj(parentNode, [childNode, childNode]);

[(¯`•DregondRahl•._)]

This can be used to create TextNodes, append them to Font nodes and set any attributes or give them a class.




function createText(text, Atri) {
        var textObj = document.createElement('font');
                textObj.appendChild(document.createTextNode(text));
                for (a = 0; a < Atri.length; a ++) {
                        if(Atri[0].match(/class/i))
                                textObj.className = Atri[1];
                        else
                                textObj.setAttribute(Atri[0], Atri[1]);
                }
        return textObj;
}





you use it like this


createText(TEXT, [[type, Attribute], [type, Attribute]]);


for example:


createText("Hello", [["size", "30pt"], ["class", "fonty"]]);



Note: You can change 'font' to 'span' or anything you wish