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

[DjEddie]

Hi, really want to use this mod .. but I think it will conflict with the Header Rework V4 which is here: https://vborg.vbsupport.ru/showthread.php?t=257261

Would someone be able to help with what code should be replaced in the header for me to get this to work please ..

Thank you

[wipedout]

Originally Posted by DjEddie

Hi, really want to use this mod .. but I think it will conflict with the Header Rework V4 which is here: https://vborg.vbsupport.ru/showthread.php?t=257261

Would someone be able to help with what code should be replaced in the header for me to get this to work please ..

Thank you

This for me aswell, have this but i dont get anything running cus of this rewrite. (my guess)

[Gemma]

Originally Posted by DjEddie

Hi, really want to use this mod .. but I think it will conflict with the Header Rework V4 which is here: https://vborg.vbsupport.ru/showthread.php?t=257261

Would someone be able to help with what code should be replaced in the header for me to get this to work please ..

Thank you

Originally Posted by wipedout

This for me aswell, have this but i dont get anything running cus of this rewrite. (my guess)

I'll assume you've installed the Header Rework mod. Back-up first but this should work

In your header template search for:

<vb:if condition="$notifications_total">
						{vb:raw notifications_menubits}
</vb:if>
<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>

Replace it with the header template edit for this mod;

<!-- 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) -->

Install the rest of this mod.

[DjEddie]

Gemma u star..thank you ..works perfectly now ..

[insanewhip]

looks Great i cant wait to install!

[literatestylish]

Nevermind*

[Lestat_]

installed, works like a charm, and is really beautiful ! thanks mate

[boffin_adi]

Hi Buddy

I tried installing it on my website: www.FaaDoOEngineers.com (I use VB 4.1.3)

It worked for a couple of days and then it stopped working!

Please let me know how to make it work as my users really liked it.

[Longcat]

amazing hack! thank you so much!

installed on: vb 4.1.3

[KaneR]

A quick tip for any of you that want to have the box fade out instead of it constantly being there.

1. Open jquery.jgrowl.js found in jscripts/tw7s_notifications.

2. Find... Line 304

startup:	function(e) {

3. Below add...

/* BEGIN FADE */
			var fade_out = function() {
  $("#jGrowl").fadeOut (XXX);
}

setTimeout(fade_out, 5000);
			/* END FADE */

Replacing the XXX with a number such as 600 will determine how long it takes for the notification box to fade out. And changing the number 5000 will change how long the box stays visible for before disappearing. 5000 = 5 Seconds.

4. Re-upload the file to your forum.