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

[(¯`•DregondRahl•._)]

This can be used to create nodes and add Attributes to them.


function createObj(obj, Atri) {

        var cObj = document.createElement(obj);
                for (a = 0; a < Atri.length; a ++) {

                        if(Atri[0].match(/class/i))

                                cObj.className = Atri[1];

                        else if(Atri[0].match(/style/i))

                                cObj.style.cssText = Atri[1];
                        else
                                cObj.setAttribute(Atri[0], Atri[1]);
                }

        return cObj;
}





Syntax: createObj(Node, [[type, Attribute], [type, Attribute]]);


Example: createObj("div", [["class", "divClass"], ["width", "100%"], ["style", "background:transparent"]]);




For those of you curious why i didn't just use setAttribute(); alone, its because IE is buggy with that function it doesn't like "class" and "style" so I improvised to fix the problem. Here is the original code as it should be accepted by most browsers, but IE falls short.






function createObj(obj, Atri) {

        var cObj = document.createElement(obj);

                for (a = 0; a < Atri.length; a ++) {

                        cObj.setAttribute(Atri[0], Atri[1]);
                }

        return cObj;
}

[Jordan]

Manipulating Navigation Links

This function will allow you to grab all the navigation links so you can position or change them in any way you would like.

Goes in global footers.

Remove the bold if you do not want to remove the navigation links from their original place.

function grabLinks(){
   var links = [];
   parent:
   for(var td=document.getElementsByTagName("td"),x=6,y=td.length; x<y; x++){
      if(td[x].getElementsByTagName("a")[0] && td[x].getElementsByTagName("a")[0].className == "nav"){
         for(var link=td[x].getElementsByTagName("a"),a=0,b=link.length; a<b; a++){
            if(link.className != "nav"){
               break parent;
            } else {
               links.push("<a href='" + link.href + "' class='nav'>" + link.innerHTML + "</a>");
               link.style.display = "none";
               if(link.nextSibling.nodeType == 3){
                  link.parentNode.removeChild(link.nextSibling);
               } if(link.parentNode.getElementsByTagName("font")[0].innerHTML.match(/viewing\)/i)){
                  link.parentNode.removeChild(link.parentNode.getElementsByTagName("font")[0]);
               }
            }
         }
      }
   } return links;
}

Here are two examples of directly accessing the links.

document.write(grabLinks());

<div id="navcontainer"></div>
document.getElementById("navcontainer").innerHTML = grabLinks();

This, however, will only write out the links separated by commas, which I doubt anybody would want. So to actually make something useful out of this, I've written two examples to show you the possibilities of using this function.

In this first example I created a table titled "Navigation" to hold the links, and then created a simple code that grabs the navigation links from the grabLinks function with a for() loop and neatly inserts them inside of the table. This would come in handy if you wanted to have a navigation table on the left or right of your forum.

<table width="200" align="center" cellspacing="1" cellpadding="4" class="bordercolor">
   <tr>
      <td align="center" class="titlebg">Navigation</td>
   </tr>
   <tr>
      <td class="windowbg" id="navcontainer"></td>
   </tr>
</table>

<script type="text/javascript"><!--

// Remember to include the grabLinks() function

var container = grabLinks()[0] + "<br />";
for(x=1,y=grabLinks().length; x<y; x++){
   container += " ~ " + grabLinks()[x] + "<br />";
} if(!location.href.match(/\?board=\w+&?((mod\w+|page)=\d+)?$/)){
   container += "<font style='font-size: 11px;'> ~ " + document.title.split(" - ")[1].split(" - ")[0] + "</font>";
}
document.getElementById("navcontainer").innerHTML = container;
//--></script>

This next example turns the navigation tree into the v3 style, but it is much more complex. One function is used to find the links, and then to create a container for them. You also have the option of choosing which character you want to use to space out the links (v3 used small graphics).

<script type="text/javascript"><!--
function createNavMenu(char){
   var links = [];
   var container = "";
   parent:
   for(var td=document.getElementsByTagName("td"),x=6,y=td.length; x<y; x++){
      if(td[x].getElementsByTagName("a")[0] && td[x].getElementsByTagName("a")[0].className == "nav"){
         for(var link=td[x].getElementsByTagName("a"),a=0,b=link.length; a<b; a++){
            if(link.className != "nav"){
               break parent;
            } else {
               links.push("<a href='" + link.href + "' class='nav'>" + link.innerHTML + "</a>");
               link.style.display = "none";
               if(link.nextSibling.nodeType == 3){
                  link.parentNode.removeChild(link.nextSibling);
               }
            }
         }
      }
   }
   for(x=0,y=links.length; x<y; x++){
      container += "<br />";
         for(a=0; a<x; a++){
            container += " " + char + " ";
         }
         container += links[x] + "&nb"+"sp";
      } if(!location.href.match(/\?board=\w+&?((mod\w+|page)=\d+)?$/)){
         container += "<br />";
         for(x=0,y=links.length; x<y; x++){
            container += " " + char + " ";
         }
      container += "<font style='font-size: 11px;'>" + document.title.split(" - ")[1].split(" - ")[0] + "</font>";
   }
   return container;
}

var s = document.createElement("span");
s.innerHTML = createNavMenu("~");

for(var td=document.getElementsByTagName("td"),x=6,y=td.length; x<y; x++){
   if(td[x].getElementsByTagName("a")[0] && td[x].getElementsByTagName("a")[0].className == "nav"){
      td[x].replaceChild(s,td[x].getElementsByTagName("br")[0]);
      break;
   }
}
//--></script>

As you can see in this line you can choose what you want the spacer to be. I chose the ~

s.innerHTML = createNavMenu("~");

If you have any questions feel free to send me a private message.

[Chris]

Rank/Group/Posts Holder

iycatacombs.com/codes/os/rankholder.js

Pretty straight forward. I made this little insert because I got tons of requests for "access based on..." or "give feature when..." based on these three things. Because of this, I got fed up and decided it was time to write just a quick little snippet I could use so that it'd make life easy.

I don't care how you guys use/modify this. Add anything you want to it, etc. You can even hotlink to the file and insert it directly into your code:
<script type="text/Javascript" src="http://iycatacombs.com/codes/os/rankholder.js"></script>

That way if there's a bug fix you don't need to worry about updating.

Tested In...
Firefox 2.0.0.11
Opera 9.24
Internet Explorer 7
Safari 3.0.4b (for windows)

I didn't test Fx3b2, but it should work fine too.

[Aaron]

Hadn't been added when I posted it like a year ago, but then, not much else had, either.

Object Correlation

Description: Compares the properties of two objects; returning true when all properties of comparison Object match those of reference Object. Be wary, though, not to include large objects (such as document.documentElement) in your comparison Object as these can easily halt execution over too much recursion.

Syntax: correlate(reference Object, comparison Object)

function correlate(a, b) {
      for(var x in b) {
            if(!a[x] && !b[x])
                  continue;
            if(!a[x] && b[x] || a[x] && !b[x])
                  return false;
            else if(a[x] && typeof b[x] == "object") {
                  if(!correlate(a[x], b[x]))
                        return false;
            } else if(b[x].constructor == RegExp ? !a[x].match(b[x]) : a[x].toString() != b[x].toString())
                  return false;
      }
      return true;
}

Example:

<html>
      <head></head>
      <body><div style="width: 74%; height: 50px"><span>Hello World</span></div>
            <script type="text/javascript">
            <!--
            var i = [ [ "I", "K" ], document.body ]
            correlate(i, {
                  0: [ "I" ],
                  1: {
                        nodeName: "BODY",
                        firstChild: {
                              nodeName: "DIV",
                              style: { width: "74%", height: "50px" },
                              firstChild: { childNodes: { 0: { data: "Hello World" } } }
                        }
                  }
            }) // true
            correlate(i, { 1: { parentNode: document.documentElement } } )
                  // too much recursion
                  // script attempts evaluating page's whole node tree and the properties of each individual node
            //-->
            </script>
      </body>
</html>