Example 13: DOM Manipulation (Part II)
Posted October 4th 2011, 10:53pm
In this example, we will demonstrate how to manipulate strings to create a new link for private messages on the forumotion navbar. As you all know, the PM link is of the form "You have X new messages", where X is "no" or a number. Let's turn it into something shorter, of the form "X new PMs". Here's how to do that on an IPB2/Invision board:

var y=$('#submenu a[href*="privmsg"]')[0];
if (y) {
var pm=$(y).find('img')[0].title.substring(9);
pm=pm.replace(/message/,'PM').replace(/no/,'0');
y.innerHTML=pm;
}

Now, how simple was that? Here's what was done. The first line selects the link for the private messages. Since the link doesn't exist for guests, we must first make sure the link exists, so that is why an IF statement is used. The next line is the heart of this technique...it grabs the title from the PM image, which is the "You have X new messages", and selects the part of the string that starts with the 10th character. This removes the "You have " portion of the text. The next line uses the replace() method to change "message" to "PM", and if there aren't any new PMs, changes "no" to "0". And the last line puts the new link text into the link. It also removes the PM image in the process, since it is no longer needed.

This technique will also work on phpBB3 and PunBB boards. For phpBB3, change the first line to:

var y=$('#page-header .navbar a[href*="privmsg"]')[0];

For PunBB, change the first line to:

var y=$('#pun-navlinks a[href*="privmsg"]')[0];

If you have a phpBB2 board, why are you reading this? You should know by now that I don't support the piece of garbage otherwise known as phpBB2!

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 PM link in the navbar!
φ
Posts: 1553
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 354
Example 13: DOM Manipulation (Part II)
Posted October 5th 2011, 7:04am
Great little lesson Dion.

It was good to see the .replace() thing used. Thats new to me :)
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 13: DOM Manipulation (Part II)
Posted January 23rd 2012, 2:49am
I can't get this to work for some reason?
φ
Posts:
Avatar
Guest
Example 13: DOM Manipulation (Part II)
Posted January 23rd 2012, 2:38pm
well it DOES work; the only limitation of this method is it completely removes the unique class FM assigns when you get a new PM ...and guess what popup blockers are common nowadays. The .new-message can be stylised via css so even if user blocks popup he can be notified roperly
φ
Posts: 163
Joined: August 5th 2011, 11:00pm
Location: Pakistan
Likes Given: 34
Likes Received: 3
Example 13: DOM Manipulation (Part II)
Posted January 23rd 2012, 5:48pm
Ok, I'm obviously not doing something right?

Ive changed the first line too in case someone asks Image
φ
Posts:
Avatar
Guest
Example 13: DOM Manipulation (Part II)
Posted January 29th 2012, 6:36am
Lads, I'm obviously doing something wrong...... Image


I'd really like to get this working as I want to shorten the nav bar, does this go in a new javascript file or in CSS or what??
φ
Posts:
Avatar
Guest
Example 13: DOM Manipulation (Part II)
Posted January 31st 2012, 12:04am
LOL!

Finally got this working!!!

Edit, finally got this to 'show' when I recieve a PM the counter does not rise?
φ
Posts:
Avatar
Guest
Example 13: DOM Manipulation (Part II)
Posted February 11th 2012, 9:51pm
Would this work to change the Home text to Forum?

var y=$('#submenu a[href*="forum"]')[0];
if (y) {
var pm=$(y).find('img')[0].title.substring(9);
pm=pm.replace(/Home/,'Forum');
y.innerHTML=pm;
}
φ
Posts: 21
Joined: August 6th 2011, 11:00pm
Location: Tennessee
Example 13: DOM Manipulation (Part II)
Posted February 12th 2012, 2:32am
will create a flicker...not good
φ
Posts: 163
Joined: August 5th 2011, 11:00pm
Location: Pakistan
Likes Given: 34
Likes Received: 3
Example 13: DOM Manipulation (Part II)
Posted February 12th 2012, 3:28am
To change the text in the navbar, please look at this: http://help.forumotion.com/t102748-
φ
Posts: 1553
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 354
Topic locked
10 posts

Who is online

Users browsing this forum: No registered users and 1 guest