for(i=0;i<d.length;i++)????

[Former Member]

ok, will do.
Thank You!

so....
what is the deal with using the innerHTML method with a table?

for instance, if I was to create a table, and it's content was set to change due to the value of a variable, how would that be done?

Let me try that again:

say I have created a table with the innerHTML method,
and in the second cell I want to return the value of var text.

var text = "I am text, I will be changed by a user who uses this code and I will be displayed in the table that is within the innerHTML statement."

<script type="text/javascript">
var aPlace = document.getElementById("an element")
aPlace.innerHTML = "<table><tr><td>blah blah blah</td><td>THIS IS WHERE I AM TRYING TO GET VARIABLE 'text' TO APPEAR!</td></tr></table>"
</script>

How is this done?
It will not just grab the value like it would without the table, and just using the variable

aPlace.innerHTML = text

why is this?

[uzi]

It's because you are changing aPlace.innerHTML. You're changing all of the content inside the container element aPlace. You can give the <td> an ID and then change its innerHTML, I suppose. There are better ways to do this but you can stick to the basics for now.

[Former Member]

o.k, that worked.
Thanks.

Yea, the basics sound good ............ for now

[Former Member]

I have read tutorial after tutorial and went through about every proboards code there is to study examples, but for the life of me can't seem to figure out how to match a board by it's ID.

Sub pm'd me this with some brief instructions , but I can't figure how to execute it properly
welcome.getElementsByTagName("a")[0].split("board=")[1];

Can somebody explain to me this process please?

[uzi]

I'll write a script for you really quickly. Also - I'm probably just being picky - but you should change the way you name variables.. An array of TDs should just be "td" and loop variables should be "i" or "n" or something like that. Of course it doesn't matter, but it makes codes a lot more readable and that seems to be sort of a general standard for people who make codes on ProBoards (and outside of ProBoards). Saving every TD as "welcome" seems kind of pointless to me - but it's fine if you want to do that.

<script type='text/javascript'>
var board_id = "pbgt";

for ( td = document.getElementsByTagName("td"), i = 0; i < td.length; i++ )
{
if ( td[i].width == "66%" && td[i].className == "windowbg2" && td[i].getElementsByTagName("a") && td[i].getElementsByTagName("a")[0].href.match(new RegExp("board=" + board_id + "$")) )
{
td[i].innerHTML = "Here I am!";
break;
}
}
</script

Basic stuff - loop is created, I match the properties of the board cell, and check if an <a> tag that's href property matches the board url is found.

I don't see much reason to use the split method for this when a simple match would work. Alternatively you could search by each <a> and then check its parent parent node (I searched TD and checked it for present A tags).

[Former Member]

ok, thanks
Now what is "$" saying?

[uzi]

$ is the Reg Exp metacharacter for end of string.

board_id = "general";
pattern = new RegExp("board=" + board_id + "$")

pattern is the same as /board=general$/ in this case

[Former Member]

2 questions.

Sub has warned me that some of the codes that I have do not specify the target well enough to be relied upon.
Therefore I have been working on that.
For example, if I am targeting the menu,
instead of using:
document.getElementsByTagName("td")[5]
I have been relying more on the loop process, trying to match any unique attributes that the element may have.

So, with that being said, do you see anything that could go wrong with the following code?
I know there are other ways of doing this, but this is works just as well, right?
Remove New Topics from Menu


<script>
for(a = document.getElementsByTagName("td"), i=0;i<a.length;i++)
if(a[i].className == "menubg" && a[i].innerHTML.match(/New Topics/)
&& a[i].parentNode.parentNode.parentNode.cellPadding == "3")
{b = a[i]}
b.innerHTML = b.innerHTML.replace(/\[New Topics\]/g, "")
</script>

My second question:
How do I go about targeting the nav tree?
From my understanding, the nav tree is not necessarily in it's own cell.
The way I am seeing it is like so

The forum table opens:
table
tbody
tr
td

The nav tree Here

br

Then the first inner table starts
table
tr
td ....

so that leaves the nav tree being placed inside of the main forum table cell.
Correct?

So in that case, how would I go about targeting it?

[uzi]

Your first example works, I suppose. The only way it wouldn't necessarily work is if there is another TD with exactly the same attributes (which there isn't on ProBoards), but it's pointless to loop through all of the TDs and it just slows the page down. At least break your loop after you're done with it. The nomenclature of your variables is kind of weird too, as I've mentioned before. Save the TD variable as "td", save A tags as "a" I guess.

You can look at this script I wrote a few years ago to see how to get the nav links.
<style type="text/css">
.nav, .navcell, .navcell a, .navcell font {
   font-size: 12px !important;
}
</style>
<script type="text/javascript">
<!--
/* Move navigation to forum jump row
by Devin Froseth - do not redistribute */

var nav_separator = "->"; // text to replace the :: separator

// DO NOT EDIT BELOW THIS LINE

// getting some elements
var forumjump = document.getElementById("forumjump");
var a = document.getElementsByTagName("a");

// new cell in forum jump row
var new_nav_parent = forumjump.parentNode.parentNode.insertCell(0);
new_nav_parent.width = "70%";
new_nav_parent.className = "navcell";

// moving the nav links to the new cell
for(i = 0; i < a.length; i ++){
   if(a[i].className && a[i].className == "nav"){
       var nav_parent = a[i].parentNode;
       nav_parent.removeChild(nav_parent.getElementsByTagName("br")[0]);
       while(nav_parent.firstChild.nodeName.match(/^(a|#text|font)$/i)){
           new_nav_parent.appendChild(nav_parent.firstChild);
       }
       // replacing the nav link separators
       new_nav_parent.innerHTML = new_nav_parent.innerHTML.replace(/::/gi, nav_separator);
       break;
   }
}

//-->
</script>

[Former Member]

Yes, seeing your code compared to mine shows me how much more readable a code can be when the variables are named correctly.
Mine looks like Chinese.
I definitely will stop that before it turns into a bad habit, starting now.

OK, now for some technicalities,
on this part of the code? (referring to the quote below)

// moving the nav links to the new cell
for(i = 0; i < a.length; i ++){
if(a.className && a.className == "nav"){
var nav_parent = a.parentNode;
nav_parent.removeChild(nav_parent.getElementsByTagName("br")[0]);
while(nav_parent.firstChild.nodeName.match(/^(a|#text|font)$/i)){
new_nav_parent.appendChild(nav_parent.firstChild);
}

the break down:

Why did you say this twice?
They look like they are the exact same conditions. (referring to the quote below)

"if(a.className && a.className == "nav"){"


This is referring to the cell ('td'), correct? (referring to the quote below)

var nav_parent = a.parentNode;

And this is removing the br node that follows the nav tree?
This is only necessary to get rid of the blank space after the nav tree is removed? (referring to the quote below)

nav_parent.removeChild(nav_parent.getElementsByTagName("br")[0]);

Now this is what really throws me off.
This is saying while all of this is true ...
Why not say if it's true? (referring to the quote below)

while(nav_parent.firstChild.nodeName.match(/^(a|#text|font)$/i))

and again for the line above:
Is this saying:
match the beginning of the nodeName with a, or (#text???, don't know what that is at all)....or font.
Or is it saying:
match the noddeName from the beginning (^) to the end ($) of the string, with a or # text or font?
and what's the brackets for? [/[/ (referring to the quote below)

match(/^(a|#text|font)$/i))[/

[Jordan]

Since Devin is now at boot camp.

Aug 29, 2011 9:29:01 GMT -8 game said:

Why did you say this twice?
They look like they are the exact same conditions. (referring to the quote below)

"if(a.className && a.className == "nav"){"

Because not all links have a class attribute assigned to them, and so if you say a.className == "nav" when the link's className property is undefined, it will result in an error. To prevent this, you need to make sure it has a class attribute. There are other ways to do it such as a.className != "undefined", but it's easiest to just do a.className since it will return true or false in the if statement.

Aug 29, 2011 9:29:01 GMT -8 game said:

This is referring to the cell ('td'), correct? (referring to the quote below)

Yes. If you are ever curious, check the nodeName attribute or just inspect the DOM with Firebug.

alert(a.parentNode.nodeName);

You should know that some browsers store the nodeName property in lowercase and others store it in uppercase (IE). If you ever check the nodeName property in a condition, you need to either convert it to uppercase or lowercase with .toUpperCase() or .toLowerCase() to make your code cross-browser.

Aug 29, 2011 9:29:01 GMT -8 game said:

And this is removing the br node that follows the nav tree?
This is only necessary to get rid of the blank space after the nav tree is removed? (referring to the quote below)

The line break appears before the navigation links, and yes, it's removing it.

Aug 29, 2011 9:29:01 GMT -8 game said:

Now this is what really throws me off.
This is saying while all of this is true ...
Why not say if it's true? (referring to the quote below)

Because we need to execute the code within the loop until the condition is false because we are traversing over each node in the nav tree. An if statement would only execute the code once.

Below is the HTML that we are looping over. The numbers represent the iteration of the loop. I started at zero since I'm so used to starting at zero. The red is the node's name which does not appear in the HTML, I put it there for you to see.

0 (#text) (white space that you can't see)
1 (a) <a href="/index.cgi" class="nav">ProBoards Support</a>
2 :: (#text)
3 (a) <a href="/index.cgi#misc" class="nav">General</a>
4 :: (#text)
5 (a) <a href="/index.cgi?board=design" class="nav">Coding and Design Boards</a>
6 :: (#text)
7 (a) <a href="/index.cgi?board=programming" class="nav">General Programming Discussion</a>
8 (#text) :: Post Message
9 (br) <br/> (stops here since its not a link, text or a font tag)
(script) <script language="JavaScript"><!--

while(nav_parent.firstChild.nodeName.match(/^(a|#text|font)$/i))

So what this is doing is starting at the <td>'s firstChild. This is either going to be an anchor tag ( <a> ) or a text node due to the white space that exists there from Proboards. White space has a nodeName of #text in the browsers that recognize it as a node. What we want to do is loop over these child nodes of the <td> and extract them from their current parent and insert them into their new parent. We don't know how many nodes there are going to be however, since the nav tree can differ in length. So, we must continue looping until we hit a node that we know is not part of the nav tree. Also note that .appendChild removes the node from its parent completely and puts it somewhere else, a copy is not made. So since we append the firstChild each time, the next iteration of the loop will be looking at the next node which became the new firstChild of the cell. I suggest you look at the HTML so you can see what is really going on.

Aug 29, 2011 9:29:01 GMT -8 game said:

and again for the line above:
Is this saying:
match the beginning of the nodeName with a, or (#text???, don't know what that is at all)....or font.
Or is it saying:
match the noddeName from the beginning (^) to the end ($) of the string, with a or # text or font?
and what's the brackets for? [/[/ (referring to the quote below)

match(/^(a|#text|font)$/i))[/

As I explained above, the a, #text, and font are possible nodeName values that we know exist for the node's in the nav tree. Once we see something else, we know we have finished traversing over the nav tree.

^ means the match must start at the beginning of the string, and $ means the match must end at the end of the string.

For example, assume the variable aRandomString contains "a red apple". Then aRandomString.match(/^red$/) would fail because it has to match only "red" so nothing would be returned. However, aRandomString.match(/red/) would match "a red apple" because we aren't requiring the match to start at the beginning and end of the string.

To match multiple values, you use the syntax (first|second|third). And if you don't care if the text is capitilized or not, you add /i to indicate that it's case-insensitive.

[Former Member]

That was a very useful descrption.
You spoke in words that I could easily understand.
I only have read it once as of now, but I usually read these answers 10 or 20 times to sink it all in.
But due to your detalied answer, I have already a much better idea of what is going on in this code.
Thanks again! It's really appreciated.

[Jordan]

Glad it helped, and let me know if there is something you still don't understand. I rushed the regular expression part at the end so if you want me to cover that again I can. Also, let me know if you don't fully understand the "node talk". If you don't understand what the Document Object Model (DOM) is, you may not fully understand what I'm talking about. I wrote a basic tutorial that may help you better understand the DOM.

I also got some others which might help in other areas.

Javascript Functions - The second half is the good part.
Basic Admin Editable
HTML5 Canvas - I didn't finish explaining everything, but you may find it fun to play around with

[Former Member]

Very Cool!
Thank you very much!
You should put your tutorial in the tutorials section on the support board.

If there are any people like me out there, they have been searching for something like this!

[Former Member]

Another quick question.
I have not seen a tutorial on this, but I know it is possible, because I have seen it done several times.

I guess it would be considered an array.

The type of array that i am talking about is the type that lets the code user specify multiple values to a variable.

Say they needed to specify certain usernames in the code;
Let's pretend that the code only let the specified usernames post.

For example
var mayPost = "username1, username2, username3, etc"
if(pb_username == mayPost)

I have been reading up on this and have came up with;
var mayPost = ["username1","username2","username3"]
and
var mayPost = new Array("username1","username2","username3")

and referenced both of the metods above using
if(pb_username == mayPost)

But none have worked.
What am I doing wrong here?