Post by SubDevo on Jun 11, 2010 21:58:39 GMT -8
Add PM Link or Button to Menu with Alert by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.
This code adds a "Messages" link (text or button) to your menu bar. This links to your inbox.
You choose the text (or image) for the "No new PM" and the "New PM" links.
If using a text link, you may also choose the color of the "New Message" link.
You have the option to put your link/button on the right or left side of your menu bar.
The number of new PMs will be displayed when hovering over the link/button.
Option to display a cancelable alert to your members if they have a new PM.
If canceled, the code "remembers" your decision (with a cookie) and you will not be alerted again while browsing your forum. If you get ANOTHER new PM (even if you canceled) you will get another alert. The cookie is deleted when you exit your browser window (not tab). So when you come back to your forum, you will get the alert again if you have any unread PMs. Nice...
Preview: PM link on Right - New PM link on Left - New PM with Animated Image - New PM Alert
To make your menu even nicer, use this code along with:
Menu: Custom Start-Divider-End Character or Image or my Easy Image Rollovers with Preload code.
Enjoy!!!
SubDevo
Variables: Edit the Maroon portions
var newAlert=0; // Show a 'New PM' Alert box? 1=Yes, 0=No
Code default is not to show an alert. Change this to "1" if you want an alert shown with a new PM.
var onRight=1; // Put Link on Right side of Menu? 1=Yes, 0=No
Just what it says.
Enter "1" to put the link on the right side of the menu.
Enter "0" to put the link on the left side of the menu.
var noMess="Messages"; // No New PMs Text or HTML
Enter the text or HTML for your "No new messages" link/button.
var newMess="<span style='color:#FF0000;'>New Message!</span>"; // New PMs Text or HTML
Enter the text or HTML for your "New Messages" link/button.
(What the link changes to if you have a new pm.)
If you want to use an image for your link(s), instead of the text in the above use img HTML.
var noMess="<img src='IMAGE URL' border='0' />"; // No New PMs Text or HTML
Note the use of "span" in the above to change the style of the link. Change the color, size, font family, boldness, style etc... You can also float the link to the left or right side of your menu! Nice for forums that have aligned their menu to the right or left to keep a "nice" look. Just add float to the span.
Examples:
<span style='float: left;'>Messages</span>
<span style='color:#FF0000; float: left;'>New Message!</span>
Don't want it against the side? Add padding to the span.
<span style='float: left; padding-left: 10px;'>Messages</span>
Change the "left" to "right" for float and padding in the above to put the link to the far right of your menu.
IMPORTANT:
If you are using float as above, make sure you change the position in the code too.
If you are floating it to the left, add the link to the left side. Floating to the right, add the link to the right side.
If this is not done, IE users will see the link on a second line and it will not be inline with the rest of your menu links.
Location: Global Header
Best place is above any codes that modify the welcome table.
<script type="text/javascript">
/* Add PM Link or Button to Menu with Alert by SubDevo */
/* Global Header - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */
var newAlert=0; // Show a 'New PM' Alert box? 1=Yes, 0=No
var onRight=1; // Put Link on Right side of Menu? 1=Yes, 0=No
var noMess="Messages"; // No New PMs Text or HTML
var newMess="<span style='color:#FF0000;'>New Message!</span>"; // New PMs Text or HTML
var n=document.getElementsByTagName("font"),a,b,d,e,m;
if(pb_username!="Guest"){ m=pb_username+"_PMs=";
a=parseInt(n[2].innerHTML.split(",")[3]);
e=a; a+=" new"; b=(e)?newMess:noMess;
d="<a title='"+a+"' href='index.cgi?action=pm'>"+ b +"</a>";
b=n[3].innerHTML; n[3].innerHTML=(onRight)?b.slice(0,-1)+" "+d:d+" "+b;
b=((new RegExp(m+"(\\d+)","i")).test(document.cookie))?e-RegExp.$1:e;
if(newAlert){
if(b>0&&confirm('You have '+a+' message(s).\nClick "OK" to go to your inbox.')){
location.href="/index.cgi?action=pm";
} document.cookie=m+e+"; path=/";
}}
</script>
EDIT: (8/17/2011)
Modified to be compatible for users that have multiple accounts on a single forum.
Modified code to allow any HTML for the links. Previously only color or image URL were used.
Tested in IE, FF, Opera, Safari and Chrome.
Now compatible for users that have multiple accounts on a single forum!
And you can now float the link to the left or right of your menu!
And you can now float the link to the left or right of your menu!
This code adds a "Messages" link (text or button) to your menu bar. This links to your inbox.
You choose the text (or image) for the "No new PM" and the "New PM" links.
If using a text link, you may also choose the color of the "New Message" link.
You have the option to put your link/button on the right or left side of your menu bar.
The number of new PMs will be displayed when hovering over the link/button.
Option to display a cancelable alert to your members if they have a new PM.
If canceled, the code "remembers" your decision (with a cookie) and you will not be alerted again while browsing your forum. If you get ANOTHER new PM (even if you canceled) you will get another alert. The cookie is deleted when you exit your browser window (not tab). So when you come back to your forum, you will get the alert again if you have any unread PMs. Nice...
Preview: PM link on Right - New PM link on Left - New PM with Animated Image - New PM Alert
To make your menu even nicer, use this code along with:
Menu: Custom Start-Divider-End Character or Image or my Easy Image Rollovers with Preload code.
Enjoy!!!
SubDevo
Variables: Edit the Maroon portions
var newAlert=0; // Show a 'New PM' Alert box? 1=Yes, 0=No
Code default is not to show an alert. Change this to "1" if you want an alert shown with a new PM.
var onRight=1; // Put Link on Right side of Menu? 1=Yes, 0=No
Just what it says.
Enter "1" to put the link on the right side of the menu.
Enter "0" to put the link on the left side of the menu.
var noMess="Messages"; // No New PMs Text or HTML
Enter the text or HTML for your "No new messages" link/button.
var newMess="<span style='color:#FF0000;'>New Message!</span>"; // New PMs Text or HTML
Enter the text or HTML for your "New Messages" link/button.
(What the link changes to if you have a new pm.)
If you want to use an image for your link(s), instead of the text in the above use img HTML.
var noMess="<img src='IMAGE URL' border='0' />"; // No New PMs Text or HTML
Note the use of "span" in the above to change the style of the link. Change the color, size, font family, boldness, style etc... You can also float the link to the left or right side of your menu! Nice for forums that have aligned their menu to the right or left to keep a "nice" look. Just add float to the span.
Examples:
<span style='float: left;'>Messages</span>
<span style='color:#FF0000; float: left;'>New Message!</span>
Don't want it against the side? Add padding to the span.
<span style='float: left; padding-left: 10px;'>Messages</span>
Change the "left" to "right" for float and padding in the above to put the link to the far right of your menu.
IMPORTANT:
If you are using float as above, make sure you change the position in the code too.
If you are floating it to the left, add the link to the left side. Floating to the right, add the link to the right side.
If this is not done, IE users will see the link on a second line and it will not be inline with the rest of your menu links.
Location: Global Header
Best place is above any codes that modify the welcome table.
<script type="text/javascript">
/* Add PM Link or Button to Menu with Alert by SubDevo */
/* Global Header - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */
var newAlert=0; // Show a 'New PM' Alert box? 1=Yes, 0=No
var onRight=1; // Put Link on Right side of Menu? 1=Yes, 0=No
var noMess="Messages"; // No New PMs Text or HTML
var newMess="<span style='color:#FF0000;'>New Message!</span>"; // New PMs Text or HTML
var n=document.getElementsByTagName("font"),a,b,d,e,m;
if(pb_username!="Guest"){ m=pb_username+"_PMs=";
a=parseInt(n[2].innerHTML.split(",")[3]);
e=a; a+=" new"; b=(e)?newMess:noMess;
d="<a title='"+a+"' href='index.cgi?action=pm'>"+ b +"</a>";
b=n[3].innerHTML; n[3].innerHTML=(onRight)?b.slice(0,-1)+" "+d:d+" "+b;
b=((new RegExp(m+"(\\d+)","i")).test(document.cookie))?e-RegExp.$1:e;
if(newAlert){
if(b>0&&confirm('You have '+a+' message(s).\nClick "OK" to go to your inbox.')){
location.href="/index.cgi?action=pm";
} document.cookie=m+e+"; path=/";
}}
</script>
EDIT: (8/17/2011)
Modified to be compatible for users that have multiple accounts on a single forum.
Modified code to allow any HTML for the links. Previously only color or image URL were used.