Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Mail > Mail Notification
Mottie (SuperAdmin) 11/13/2009 9:40 AM EST : Mail Notification
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Mail Notification

GuildPortal admin site link to the original post

This script opens a popup to notify you if you have a new mail message. It was written for users who wish to hide their top menu bar (state bar/log in bar). Or if you just want a bigger message telling you that you have mail. I've set it up to open either a growl window (timed popup) or a facebox (popup you have to close).



Code

This is now a Mod
Control Panel > Site Mods > Get Site Mods >
Look for "Mail Notification"


<script type="text/javascript">
$(document).ready(function(){
 var growl = true;
 var mailTitle = "<img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/announce.png' align='left'>New Mail!";
 var mailMessage = "You have %x new message(s)";
 var mailTime = 5000; // in milliseconds
 // Don't change anything below
 // ***************************
 var tmp;
 if ($('#icoMailBlink').length || $('.sideNavLink:contains("Inbox")').length){
  if ($('#icoMailBlink').length) {
   tmp = parseInt($('#icoMailBlink').closest('div').text().split('Mail (')[1],10);
  } else {
   tmp = parseInt($('.sideNavLink:contains("Inbox")').text().split('(')[1],10);
  }
  mailMessage = mailMessage.replace(/%x/,tmp);
  if(growl) {
   $.growl.settings.displayTimeout = mailTime;
   $.growl(mailTitle,mailMessage);
  } else {
   jQuery.facebox(mailTitle + '<br>' + mailMessage);
  }
 }
})
</script>
Customizing

  • Setting the growl variable to true will open a growl window with your new mail message.
    Click here to test it (you can change the default style of the growl window - check out this post on how to do that).
    Setting it to false will open a facebox window with the same message.

    var growl = true;

  • The title of the popup window is set using the mailTitle variable. I've included an image in the title as an example:

    var mailTitle = "<img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/announce.png' align='left'>New Mail!";

  • The content of the popup window is contained in mailMessage variable. The script will replace the "%x" with the number of unread mail messages

    var mailMessage = "You have %x new message(s)";

  • The mailTime variable is used by the growl popup, it sets how long this window is displayed (in milliseconds) on screen before disappearing.

    var mailTime = 5000;

  • Note: The popup windows will continue to open on every page of your site until the mail is read... so using the facebox option may be a bit annoying to your users.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 11/14/2009 1:49 PM EST : Mail Notification v1.1
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Mail Notifications v1.1

This version lets you click on the new mail notice to redirect you to your mail tab. Follow the directions in the original post on how to customize this.
<script type="text/javascript">
$(document).ready(function(){
 var growl = true;
 var mailTitle = "<img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/announce.png' align='left'>New Mail!";
 var mailMessage = "You have %x new message(s)";
 var mailPageURL = 'http://guildportal.com/Guild.aspx?GuildID=258012&TabID=2168230';
 var mailTime = 5000; // in milliseconds

 // ***************************

 // Don't change anything below
 // ***************************
 var tmp;
 var tmp1 = '<span class="gotoMail">' + mailTitle + '</span>';
 var tmp2 = '<span class="gotoMail">' + mailMessage + '</span>';
 if ($('#icoMailBlink').length || $('.sideNavLink:contains("Inbox")').length){
  if ($('#icoMailBlink').length) {
   tmp = parseInt($('#icoMailBlink').closest('div').text().split('Mail (')[1],10);
  } else {
   tmp = parseInt($('.sideNavLink:contains("Inbox")').text().split('(')[1],10);
  }
  tmp2 = tmp2.replace(/%x/,tmp);
  if(growl) {
   $.growl.settings.displayTimeout = mailTime;
   $.growl(tmp1, tmp2);
  } else {
   jQuery.facebox(tmp1 + '<br>' + tmp2);
  }
 }
 $('.gotoMail').live('click', function(){
  window.location.href = mailPageURL;
 })
})
</script>
Edit (11/14/2009): Fixed some minor bugs.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Soloyos (Member) 8/5/2011 4:34 PM EST : RE: Mail Notification v1.1
Soloyos
Posts: 68

0
Like

0
Dislike

Hello,

Ive tried to get this to work but cant seem too, im probably doing it wrong but could you please tell me how to do it?.

Thanks.
Photobucket  
TopBottom

Mottie (SuperAdmin) 8/6/2011 9:26 AM EST : RE: Mail Notification v1.1
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Soloyos!

I don't even see the code on your page... did you add it into the footer area (Control Panel > Custom HTML & Script > Footer Area)?
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Soloyos (Member) 8/6/2011 10:25 AM EST : RE: Mail Notification v1.1
Soloyos
Posts: 68

0
Like

0
Dislike

I removed it when i couldnt get it to work, but ill give it ago now.

--------------------------------
Done and Working thank you.
Photobucket  
TopBottom

mgard73 (Applicant) 8/15/2011 1:07 AM EST : RE: Mail Notification v1.1

mgard73
Posts: 7

0
Like

0
Dislike

Would there happen to be any way to customize the colors?
TopBottom

Mottie (SuperAdmin) 8/15/2011 6:23 AM EST : RE: Mail Notification v1.1
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Mgard73!

Why, yes there is!

If you are using the growl window, check out this post on how to style it - but you'll have to use a slightly different code - I've split the title so the "mailIcon" is separate now and added "mailWidth":
<script type="text/javascript">
$(function(){
 var growl = true;
 var mailTitle = "
New Mail!";
 var mailIcon = "
http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/announce.png";
 var mailMessage = "You have %x new message(s)";
 var mailPageURL = 'http://guildportal.com/Guild.aspx?GuildID=258012&TabID=2168230';
 var mailTime = 5000; // in milliseconds
 var mailWidth = 300; // in pixels

 // ***************************

 // Don't change anything below
 // ***************************

 var tmp;
 var tmp1 = '<span class="gotoMail">' + mailTitle + '</span>';
 var tmp2 = '<span class="gotoMail">' + mailMessage + '</span>';
 if ($('#icoMailBlink').length || $('.sideNavLink:contains("Inbox")').length){
  if ($('#icoMailBlink').length) {
   tmp = parseInt($('#icoMailBlink').closest('div').text().split('Mail (')[1],10);
  } else {
   tmp = parseInt($('.sideNavLink:contains("Inbox")').text().split('(')[1],10);
  }
  tmp2 = tmp2.replace(/%x/,tmp);
  if(growl) {
   $.growl.settings.displayTimeout = mailTime;
   growl2(tmp1, tmp2, mailIcon, mailWidth);

  } else {
   jQuery.facebox(tmp1 + '<img src="' + mailIcon + '" alt="" align="left"><br>' + tmp2);
  }
 }
 $('.gotoMail').live('click', function(){
  window.location.href = mailPageURL;
 });
});
</script>
If you are using the facebox popup, then you can style it using the css from this post.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

mgard73 (Applicant) 8/15/2011 4:05 PM EST : RE: Mail Notification v1.1

mgard73
Posts: 7

0
Like

0
Dislike

Hiya Mottie,

So I was able to get it working but with 1 small issue. T
he problem with the above that I am encountering is that the mail icon is displaying just text opposed to the actual icon itself, here's an image of what I mean:

 


I tried using img src however the box completely stopped working when I did. Any suggestions? =)
TopBottom

Mottie (SuperAdmin) 8/15/2011 4:59 PM EST : RE: Mail Notification v1.1
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

It depends on how the image is added. If included with the title, then you need to add the image html like this (use double quotes inside the single quotes)
title = 'New Mail!<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/announce.png" align="right"/>'
If you are including the image in the "mailIcon" variable I added in the last post, then only use the url.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

mgard73 (Applicant) 7/25/2012 10:47 PM EST : RE: Mail Notification v1.1

mgard73
Posts: 7

0
Like

0
Dislike

Hi again Mottie!

So a quick question for you, I am using your code again (opposed to say the Mod that's available and I was curious to know how I would edit the following code to customize the colors seperate from say those designated by the overall content boxes of the site; is this possible?

I have the code (which it wouldn't let me post =O) and could send it to you through a mail message perhaps?
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%