Mail Notification v6

by Mottie

Description

This mod 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).

For more information on the custom variables, please see this post.
To style the growl window (pictured above), use the "Growl Window Styling" Mod or refer to this post.
To style the Facebox popup window, please refer to this post.

This toolbar was inspired by Wibiya. It's still in beta and I tried to register to take a look at it, but since it's in beta they added me to a que... Hmmm, I bet I could make a toolbar. Well here it is LOL! It doesn't have all the options that I've seen on their bar because some of it requires server side scripts. But with this toolbar on your site you can get easy access to:

Search sites

Site navigation

Common links

Guild Notices/Announcements

Any web page inside a frame (like your server status)

Image galleries ( Flickr, Picassa or any other media feed)

New Feeds

Chat - GuildPortal, Facebook and Google

Basic Toolbar

Toolbar with components (labeled)

Adding this to your site

The code below is a basic setup (no options or links added).

*NOTE* While installing this toolbar on my help site I noticed that my footer HTML filled up and truncated the remaining code. So it may be better add the bulk of the custom variables into an external file:

Load up a text editor (non-rich text) and add all the custom variables for the toolbar.

Add all your custom links and customize the variables to suit your needs.

Save the file as something like "toolbar-options.js"

Upload it to a hosting site like MyOtherDrive.com (free hosting with unlimited bandwidth)

Get the direct link to your toolbar-options file.

Add a script tag that points to your file (in orange).

Then add the code below into your Footer HTML (preferred) or Banner HTML.

tbStartShowing (optional) - Setting this to false will initially hide the toolbar, but it can be easily opened by clicking on the show icon.

tbStartBottom (optional) - Setting this to false will move the toolbar to the top of the screen.

tbOpenLinksInNewWindow (optional) - Setting this to false will make all clicked links on the toolbar open in the same window.

tbNumberOfFeeds (optional) - This variable sets the number of feeds to display in the popup window

enableGuildPortalChat (optional) - Setting this to false will hide the GuildPortal chat icon (there is still a link in the state (top) bar)

enableFacebookChat (optional) - Setting this to false will hide the Facebook chat icon.

enableGoogleChat (optional) - Setting this to false will hide the Google chat icon.

hideToolbarInfo (optional) - Setting this to true will hide the () icon, I like taking credit for making this toolbar, but I don't want to shove it down your throat

tbHideIcon (optional) - Setting this will replace the default toolbar hide icon () with one of your choosing.

tbShowIcon (optional) - Setting this will replace the default show toolbar icon () with one of your choosing.

tbMoveIcon (optional) - Setting this will replace the default move toolbar icon () with one of your choosing.

tbPopupClose (optional) - Setting this will replace the default close popup icon () with one of your choosing.

tbPopupMove (optional) - Setting this will replace the default move popup icon ( ) with one of your choosing.

> Adding Components

Currently there are seven types of components you can add to the toolbar. They all use the basic template below. You can add as many as you wish (but adding too many may knock some of the icons to the next row and break the style of the toolbar, so don't crazy LOL):

var addToolbarLink = new Array();// Toolbar Links - Add more links below. The top link in a section will end up on the far left side of it's set location (left, center or right) addToolbarLink.push(["location","type","Title","Icon URL","Link/Code"]);

Using a tiny bit of jQuery makes it easier to add a large amount of HTML that isn't formatted into the popup. *NOTE* If you are unable to add a lot of code into your Banner HTML or Footer HTML, then it might be best to add this clump of HTML into a free form text/HTML content box on every page (I know it sucks, but I'll have to think of a better place to add a large clump of HTML)

If you look in the full code box at the top. You will see something like this:

This bit of jQuery adds the contents ".html()" of an object (div in this case) with ID "mySiteNav". Just copy the example above, and you only need to replace the text in red with the ID of your data. *NOTE* You should only use an ID once per page, so do something like add a number on the end like "myhtml1" or "myhtml2".

In the full code, you will find the "mySiteNav" located above all of the scripts. It looks like this:

Toolbar Color: To change the toolbar color, you must change the background image of the "#toolbar, #tbShow" CSS above. I've made different colors for you to choose from, but of course you can make your own.

Toolbar font color & Popup style: I'm not going to include all the CSS from above, but basically adjust the colors (in blue) of the CSS above.

Edit (8/18/2009): Fixed the search box, added new variables (search box width & popup move icon), and included an example image in the announcement popup Edit (10/26/2009): Added jQuery UI script to the main code. No idea why but for some reason the script to make the popups draggable was removed, you can add it back by adding this to the code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

The javascript portion should be added along with all the other toolbar link definitions. The frame is set to go into the center part of the toolbar with the popup size being 650px x 650px.

Edit (8/18/2009): Added a note and alternative script for the HeyZap Game Widget... this alternative method doesn't load the widget until you click on the toolbar icon and thus makes your page load faster Edit (9/2/2009): Edited this post to only have the toolbar variable... I'm adding another post in this thread on the best way to add any widget.

Ok, so I fixed the search function. I had to add a new variable to set the size of the search popup.

I also added a new icon into the popup that lets you move it across the bar.

And lastly, I added an example into the alert popup to show you how to add images (make sure you use single quotes inside). Oh, and because of this I realized I needed to change the CSS around since it was resizing all the images inside the popup to the toolbar icon size.

Thanks for finding the problem! My eyes start crossing from looking at this thing and I forget to test every part of it when I make little changes.. keep on the look out for problems for me!

Is it possible to have the pop-up move icon on the left side of frames? I ask because I noticed most of the time when I want to move a pop-up around it is because it runs off the right side of the page, and the move icon is not in view.

GuildPortal™ Axiom Shift, LLC. All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.