Private Messages Enhancements - TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl)

Description:
This mod changes the way notifications are displayed. It disables the default dropdown menu listed in the toplinks in the header and uses a free open script called jGrowl to display them on the bottom left of the screen no matter where you are on a page. Helps with people "not noticing" the notifications. Enjoy. TheWindows7Site

Instructions:

1) Upload files in attachment to forum root

2) Open template headinclude

Paste the following code at the bottom

<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) --> 
    <script type="text/javascript" src="jscripts/tw7s_notifications/jquery-1.4.2.js"></script> 
    <script type="text/javascript" src="jscripts/tw7s_notifications/jquery.jgrowl.js"></script> 
    <link href="jscripts/tw7s_notifications/jquery.jgrowl.css" rel="stylesheet" type="text/css"/>
<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) -->

3) Open template header

Find the following:

				<vb:if condition="$notifications_total">
				<li class="popupmenu notifications" id="notifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
					<ul class="popupbody popuphover">
						{vb:raw notifications_menubits}
					</ul>
				</li>
				<vb:else />
				<li class="popupmenu nonotifications" id="nonotifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
					<ul class="popupbody popuphover">
						<li>{vb:rawphrase no_new_messages}</li>
						<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
					</ul>
				</li>
				</vb:if>

Replace with:

<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) --> 
<vb:if condition="$notifications_total">
<script type="text/javascript">

$.jGrowl('{vb:raw notifications_menubits} <br />You must view your notification(s) before this box will disappear.' , { sticky: true, header : 'New Notification(s)' } );

</script>
</vb:if>

<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) -->

Done!

Have fun customizing this to fit your needs.

Arabic Translation by Dr.osamA
Spanish Translation by Destron

[tdkmatt]

installed!! aw some, sometimes it doesn't go away tho

[Teascu Dorin]

Great work.
Here you go... Romanian Translation if someone needs...

<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) --> 
<vb:if condition="$notifications_total">
<script type="text/javascript">

$.jGrowl('{vb:raw notifications_menubits} <br />Trebuie să vezi mesajele pentru ca această casetă să dispară.' , { sticky: true, header : 'Mesaje noi' } );

</script>
</vb:if>

<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) -->

[OldSchoolDSL]

Does not seem to like the latest version of jQuery 1.4.4

[OldSchoolDSL]

Originally Posted by OldSchoolDSL

Does not seem to like the latest version of jQuery 1.4.4

Un-installed

[bulldog51981]

Installed with ease! Only issue that I'm having is that when I have more than one notification they're not listed one on top the other. They are listed in one continuous line directly after one another. Is there a solution for this one?

**Found the problem -
At some point I apparently made an edit to my "navbar_notifications_menubit" template and had taken the <li> tags out. Replacing this fixed the issue.

[bulldog51981]

Originally Posted by andreamarucci

It work but it seems to conflict with the popup notification of new messages function that is built in VB. Anyone know how to disable this option for all the vb users?

After installing this, you may want to disable this option for everyone since you will now have a notification on the screen anyway. If you would like to disable the "Display Pop Up Notification When New Private Message Is Received", go to:

AdminCP > Maintenance > Execute SQL Query > Automatic Queries

To disable it for future registrations, go to:

AdminCP > User Registration Options

Hope this helps someone else.

[bulldog51981]

Originally Posted by FF|Skyrider

For those who prefer not that the messages are being displayed while reading your PM list or while reading a PM, use this code:

<vb:if condition="THIS_SCRIPT != 'private'"><!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) --> 
<vb:if condition="$notifications_total">
<script type="text/javascript">

$.jGrowl('{vb:raw notifications_menubits} <br />Debes ver tus notificaciones para que este mensaje desaparezca.' , { sticky: true, header : 'Aviso del foro' } );

</script>
</vb:if>

<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) --></vb:if>

I've only added

<vb:if condition="THIS_SCRIPT != 'private'"></vb:if>

To prevent the pop-up being shown while in private.php (the PM list & messages).. If there is something wrong with this code, please let me know.. I never actually used this before and it works fine for me.

Would be great if a modification is being made of this. So an option can be set to use the advanced (this one) pop-up or the original. Also would be nice if you can actually close the pop-up and won't appear again until you get a new PM.

Can anyone tell me how to add the member profile page to this as well?

<vb:if condition="THIS_SCRIPT != 'private'"></vb:if>

(member.php page)

Update: I don't know if there was a better way to add this to the first line or not, but I just added

<vb:if condition="THIS_SCRIPT!='member'">

after the first one above and closed it in the same place and that seemed to work just fine.

[want3ed]

it cant work in my forum page and category , message pages but it is working in profile and private message pages.

please help me.

[fxwoody]

Tks! Nice addon
Got a little idea here! Do you think that we could add the text that shows up as a {vb: rawphrase blablabla} instead? So that on boards with different language ,it would get translated automatically depending on user's choice?!?

Tks & installed

[fxwoody]

Ok nevermind

For every one who would like to add different language, follow these instructions:

Go into Phrase Manager, Add New Phrase

Phrase Type: Global
Product:vBulletin
Varname: new_box_notice
Text: You must view your notification(s) before this box will disappear.

In your xtra language window, add your translated text.
For the french, add this: Vous devez voir votre notification (s) avant que cette case disparaissent.

In the script code from this mod,
Find:

$.jGrowl('{vb:raw notifications_menubits} <br />You must view your notification(s) before this box will disappear.' , { sticky: true, header : 'New Notification(s)' } );

And replace with:

$.jGrowl('{vb:raw notifications_menubits} <br />{vb:rawphrase new_box_notice}' , { sticky: true, header : 'New Notification(s)' } );

Enjoy!