Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Mottie (MVP) 11/13/2009 9:56 AM EST : Mail Notification
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Mail Notification

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
<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.
TopBottom

Valdaglerion (Guild Admin) 11/13/2009 3:03 PM EST : RE: Mail Notification
Valdaglerion
Posts: 2473
Zomgawsh Poster

Edited...  See below.
TopBottom

Valdaglerion (Guild Admin) 11/13/2009 6:29 PM EST : RE: Mail Notification
Valdaglerion
Posts: 2473
Zomgawsh Poster

That works very well, Mottie.  A few questions... 
  1. Can this be set to jump to a mail page if clicked on?
  2. Can the location of the growl window be changed.  For example, can it be set to open in the middle of the screen instead of the upper right?
  3. Will this work with a horizontal nav bar and a hidden top bar (the one with the login link, mail notification and characters/settings links) or does it rely on the mail icon being read?
TopBottom

Mottie (MVP) 11/14/2009 1:47 PM EST : RE: Mail Notification
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Valdaglerion!
  1. I posted the code to go to your mail page below.
  2. The growl window pops up inside the growl dock. This dock is positioned absolutely, so it would be difficult to center it on the page (only left and right are available), but you can adjust the position of the window using this inside the script:

     $.growl.settings.dockCss = {
      position: 'absolute',
      top: '10px',
      right: '10px',
      width: '300px'
     };

  3. The script looks for either the flashing mail image or "Inbox" in the side menu... if these elements are hidden, the script should still work; it won't work if these elements are removed.

Mail Notifications v 1.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.
TopBottom

Valdaglerion (Guild Admin) 11/14/2009 5:08 PM EST : RE: Mail Notification
Valdaglerion
Posts: 2473
Zomgawsh Poster

Problems...  First, the number of messages is no longer displaying:



Second, the growl window never goes away unless the new mail is read.  It doesn't remain for 5 seconds as it should (based on your code)
TopBottom

Mottie (MVP) 11/14/2009 6:27 PM EST : RE: Mail Notification
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Oops...

Code above has been updated: fixed the message count and the timer was set to 50 seconds while I was testing it.. it's back to 5 seconds now.
TopBottom

Keilana55 (Guild Admin) 1/28/2011 8:23 AM EST : RE: Mail Notification
Keilana55
Posts: 4537
Zomgawsh Poster

Hi.  I put the code in the footer however and set growl to false.  The message does pop up, but it goes away super fast so we only have a white box with an "x" in it.

I must have done something wrong - please advise?

TopBottom

Keilana55 (Guild Admin) 1/28/2011 1:38 PM EST : RE: Mail Notification
Keilana55
Posts: 4537
Zomgawsh Poster

Okay, the window shows and stays up until clicked - however the message and the window are both white so it looks like there is not a message in the box.  I did not see a line to change the color of the messages.  Please advise?

TopBottom

Mottie (MVP) 1/28/2011 4:54 PM EST : RE: Mail Notification
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Keilana55!

The box is functioning as it should. The problem is that facebox needs to be styled. Check out this post on how to modify it
TopBottom

Keilana55 (Guild Admin) 1/29/2011 1:19 AM EST : RE: Mail Notification
Keilana55
Posts: 4537
Zomgawsh Poster

That worked like a charm - thanks!

TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%