Post by justin on Jan 24, 2010 6:31:54 GMT 12
/* How to make a basic PM bar - By Justin */
Hello and welcome to my first ever tutorial, in this tutorial i will show you the basics to making a pm bar.
I will be doing a code breakdown first of one of my pm bars.
/* Code BreakDown */
I will start with the Javascript.
Hey, Justin, you have 8 messages, 0 are new.
10 Jan, 2010, 9:13pm
/* Things you need to know */
one thing you need to know is how to create and use Variables, aswell as basic HTML to create the table for the pm bar, there are other ways to create tables for the pm bar (DOM) but that is more advanced.
Other things that can be of help.
/* The Tutorial */
Ok, now that i taught you a little about the PM Script lets begin making one, the first thing we need to create is the tables using html.
The table ID is used so we can tell the script what to place below the welcome table. The TD id is used for what we write the member/guest message is. (please create your own table and not use mine unless i get credit)
now that we have the table created we can create the Script, which may take a little longer.
lets start with the comment, telling people what it is.
ok, now lets tell the script what the TD Id is by writing this:
Now lets do the guest check and write a message for the guests.
now lets tell them what to do if the member is logged in:
now lets use the Message font
and the new and total messages. - you can name these variables whatever you want.
and total messages:
and finally the end of the member check and the insert before welcome table:
and that's how you make a pm bar, there are other ways to do it, but that's the easiest. when it's done it should look like the one posted above.
if you have any question post them here.
Hello and welcome to my first ever tutorial, in this tutorial i will show you the basics to making a pm bar.
I will be doing a code breakdown first of one of my pm bars.
/* Code BreakDown */
<table id="pmbar" class="bordercolor" align="center" width="92%" height="5%" cellpadding="0" cellspacing="1" style="position: relative; bottom: 1px;">
<tr>
<td id="Left_Cell" class="menubg" width="100%">
</td>
<td class="menubg" width="50%">
</td>
</tr>
</table>
<script type="text/javascript">
<!--
/* ---------------------------------------------------------------------------------
Justin's PM bar - Special thanks to Wrighty, Alex, and James for the help.
--------------------------------------------------------------------------------------
*/
var Left_Cell=document.getElementById('Left_Cell');
if(pb_username=="Guest"){
Left_Cell.innerHTML='<div style="float:left">Welcome Guest</div> <div style="float:right"> <a href=\"/index.cgi?action=login\">Login</a> | <a href=\"/index.cgi?action=register\">Register</a> |<a href=\"/index.cgi?action=forgotpassword\">Forgot Password</a></div>';
}else if(pb_username!="Guest"){
var Message_Font=document.getElementsByTagName('font').item(2).innerHTML;
var New_Messages=(Message_Font.match(/<\/a>, (.+?) (is|are) new./i))? RegExp.$1 : '';
var Total_Messages=(Message_Font.match(/>(.+?) message(s)?<\/a>/i))? RegExp.$1 : '';
Left_Cell.innerHTML='<div style="float:left">Welcome <a href=\"/index.cgi?action=viewprofile\">' + pb_displayname + '</a> , you have <a href=\"/index.cgi?action=pm\"> ' + New_Messages + '</a> new message(s) and a total of <a href=\"/index.cgi?action=pm\"> ' + Total_Messages + '</a> Message(s) </div> <div style="float:right"> <a href=\"/index.cgi?action=modifyprofile&user=' + pb_username + '\">Modify Profile</a> | <a href=\"/index.cgi?action=pmprefs\">PM Preferences</a> | <a href=\"/index.cgi?action=pmsend\">Compose</a> </div>';
}
document.getElementsByTagName('body').item(0).insertBefore(document.getElementById('pmbar'), document.getElementsByTagName('table').item(0).nextSibling);
//-->
</script>I will start with the Javascript.
<script type="text/javascript">
<!--
/* ---------------------------------------------------------------------------------
Justin's PM bar - Special thanks to Wrighty, Alex, and James for the help.
--------------------------------------------------------------------------------------
*/
var Left_Cell=document.getElementById('Left_Cell');
if(pb_username=="Guest"){
Left_Cell.innerHTML='<div style="float:left">Welcome Guest</div> <div style="float:right"> <a href=\"/index.cgi?action=login\">Login</a> | <a href=\"/index.cgi?action=register\">Register</a> |<a href=\"/index.cgi?action=forgotpassword\">Forgot Password</a></div>';
}else if(pb_username!="Guest"){
var Message_Font=document.getElementsByTagName('font').item(2).innerHTML;
var New_Messages=(Message_Font.match(/<\/a>, (.+?) (is|are) new./i))? RegExp.$1 : '';
var Total_Messages=(Message_Font.match(/>(.+?) message(s)?<\/a>/i))? RegExp.$1 : '';
Left_Cell.innerHTML='<div style="float:left">Welcome <a href=\"/index.cgi?action=viewprofile\">' + pb_displayname + '</a> , you have <a href=\"/index.cgi?action=pm\"> ' + New_Messages + '</a> new message(s) and a total of <a href=\"/index.cgi?action=pm\"> ' + Total_Messages + '</a> Message(s) </div> <div style="float:right"> <a href=\"/index.cgi?action=modifyprofile&user=' + pb_username + '\">Modify Profile</a> | <a href=\"/index.cgi?action=pmprefs\">PM Preferences</a> | <a href=\"/index.cgi?action=pmsend\">Compose</a> </div>';
}
document.getElementsByTagName('body').item(0).insertBefore(document.getElementById('pmbar'), document.getElementsByTagName('table').item(0).nextSibling);
//-->
</script>var Left_Cell=document.getElementById('Left_Cell'); that part of the code is grabbing the left cell i created in the table. <td id="Left_Cell" class="menubg" width="100%">if(pb_username=="Guest"){ that defines whether the person is a guest or not.Left_Cell.innerHTML='<div style="float:left">Welcome Guest</div> <div style="float:right"> <a href=\"/index.cgi?action=login\">Login</a> | <a href=\"/index.cgi?action=register\">Register</a> |<a href=\"/index.cgi?action=forgotpassword\">Forgot Password</a></div>'; again uses the left cell, anything written after that will appear for the guests.}else if(pb_username!="Guest"){ says if the member is not a guest.var Message_Font=document.getElementsByTagName('font').item(2).innerHTML; will grab the third font tag which is this:Hey, Justin, you have 8 messages, 0 are new.
10 Jan, 2010, 9:13pm
var New_Messages=(Message_Font.match(/<\/a>, (.+?) (is|are) new./i))? RegExp.$1 : ''; grabs the amount of new messagesvar Total_Messages=(Message_Font.match(/>(.+?) message(s)?<\/a>/i))? RegExp.$1 : ''; grabs the amount of total pmsLeft_Cell.innerHTML='<div style="float:left">Welcome <a href=\"/index.cgi?action=viewprofile\">' + pb_displayname + '</a> , you have <a href=\"/index.cgi?action=pm\"> ' + New_Messages + '</a> new message(s) and a total of <a href=\"/index.cgi?action=pm\"> ' + Total_Messages + '</a> Message(s) </div> <div style="float:right"> <a href=\"/index.cgi?action=modifyprofile&user=' + pb_username + '\">Modify Profile</a> | <a href=\"/index.cgi?action=pmprefs\">PM Preferences</a> | <a href=\"/index.cgi?action=pmsend\">Compose</a> </div>'; is what will appear for logged in members.} end the member checkdocument.getElementsByTagName('body').item(0).insertBefore(document.getElementById('pmbar'), document.getElementsByTagName('table').item(0).nextSibling); inserts the pm bar before the welcome table./* Things you need to know */
one thing you need to know is how to create and use Variables, aswell as basic HTML to create the table for the pm bar, there are other ways to create tables for the pm bar (DOM) but that is more advanced.
Other things that can be of help.
RegExp.$1 is the total pms
RegExp.$2 is message/messages
RegExp.$3 is the number of new pms
and RegExp.$4 is the are/is.
/* The Tutorial */
Ok, now that i taught you a little about the PM Script lets begin making one, the first thing we need to create is the tables using html.
<table id="pmtut" class="bordercolor" align="center" width="92%" height="5%" cellpadding="0" cellspacing="1" style="position: relative; bottom: 1px;">
<tr>
<td id="Message" class="menubg" width="100%">
</td>
<td class="menubg" width="50%">
</td>
</tr>
</table>The table ID is used so we can tell the script what to place below the welcome table. The TD id is used for what we write the member/guest message is. (please create your own table and not use mine unless i get credit)
now that we have the table created we can create the Script, which may take a little longer.
lets start with the comment, telling people what it is.
//Tutorial PM Bar created by Justin (c) 2010ok, now lets tell the script what the TD Id is by writing this:
var Message=document.getElementById('Message'); (that is whatever you wrote for TD id)Now lets do the guest check and write a message for the guests.
if(pb_username=="Guest"){
Message.innerHTML='<div style="float:left">Welcome Guest</div> <div style="float:right"> <a href=\"/index.cgi?action=login\">Login</a> | <a href=\"/index.cgi?action=register\">Register</a> |<a href=\"/index.cgi?action=forgotpassword\">Forgot Password</a></div>'; Message.innerHTML= again being your td idnow lets tell them what to do if the member is logged in:
}else if(pb_username!="Guest"){now lets use the Message font
var Message_Font=document.getElementsByTagName('font').item(2).innerHTML; - you can use that 
and the new and total messages. - you can name these variables whatever you want.
var NM=(Message_Font.match(/<\/a>, (.+?) (is|are) new./i))? RegExp.$1 : ''; as you see the RegExp is used to tell them that this is new messages.and total messages:
var TM=(Message_Font.match(/>(.+?) message(s)?<\/a>/i))? RegExp.$1 : '';and finally the end of the member check and the insert before welcome table:
}
document.getElementsByTagName('body').item(0).insertBefore(document.getElementById('pmbar'), document.getElementsByTagName('table').item(0).nextSibling); .insertBefore(document.getElementById('pmtut'), in the () where it says pmtut is whatever id you gave your table.and that's how you make a pm bar, there are other ways to do it, but that's the easiest.
when it's done it should look like the one posted above.if you have any question post them here.
