Example 12: DOM Manipulation (Part I)
Posted August 10th 2011, 12:44am
This example is the first in a series that will demonstrate valuable javascript techniques. We will look at the structure of the "last post" block that is on the homepage of every forumotion forum, then use some javascript techniques to change that structure.

The "last post" block has the same structure on every forumotion board type:
Topic Title
Last Post Time
Author (last post icon)

Here is its structure as HTML:

<a href="topic href" title="topic title">Topic Name</a>
(Last Post Time)
<strong><a href="user profile">Author</a></strong>
<a href="last/newest href"><img src="last post icon" title="last/newest title" /></a>

You may ask, why do I have the HTML displayed in this form? Well...because this is also a DOM representation of the block as well. Each one of the lines inside the SPAN tag (HTML talk) also happens to be a child node of the SPAN element (DOM talk). That means you can access each one of those child nodes, and do whatever you want with them!

So let's do that, and make the block look like this:

Last post was (Last Post Time)
by (Author), in topic:
(Topic Title) (last post icon)

I'm going to use the phpBB3 homepage as an example. What you do is locate the last post block described above, create a new SPAN element, add the blocks in the order you want, and then add whatever text you need. So here's the code to create the new block:

var CopyrightNotice = 'DOM Manipulation example. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

var x=$('.forabg .forums .row .lastpost > span').get();
for (i=x.length-1; i>=0; i--) {
if (x[i].childNodes[4]) {
var newspan=document.createElement('SPAN');
$(newspan.childNodes[2]).after(', in topic:');
$(newspan.childNodes[2]).before('by ');
$(newspan.childNodes[0]).before('Last post was ');

The IF statement is there for completeness. Without the IF statement, the script would abort with an error if it encountered a forum that contained no posts.

This code snippet also demonstrates a trick when writing scripts. Whenever you are adding/replacing/deleting elements in a loop, it is always best to start at the end and work backwards. This is why the FOR loop counts backwards, and at the end, why childNodes[2] is used before childNodes[0]. It is also why the appendChild() methods only use child nodes 2, 1, and 0 -- as the children are removed from the original block, the position of the remaining children changes. Once we remove childNodes[2] and childNodes[1], the remaining children move up, and the original childNodes[3] is now childNodes[1]! Think of it this way: if you could somehow remove the second floor from a building, the old third floor would now be the new second floor. That's what is happening here.

I hope this example is of some use to you. The techniques demonstrated here can be used on any HTML block and are not limited to forumotion forums. Since this is the first example under the new guidelines I've established, I will add the following statement:

This example is provided AS-IS. I will not answer questions about installing this on your forumotion board, so please don't ask. I would be happy to answer questions about the techniques used, and would be thrilled to have a member post about their using this technique to modify something other than the last post block!
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357

Who is online

Users browsing this forum: No registered users and 0 guests