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

[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?

[synseal]

It wasn't showing on the forumhome but working fine everywhere else until I placed this code

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

in headerinclude_bottom rather than headinclude

Now it shows everywhere.

Thanks for this mod :up:

[Yaung Sein]

Originally Posted by synseal

It wasn't showing on the forumhome but working fine everywhere else until I placed this code

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

in headerinclude_bottom rather than headinclude

Now it shows everywhere.

Thanks for this mod :up:

Thanks you, Synseal and original creator of this Modification of Template.

It will be better if can disable pop up for PM notification.

[LifesGreatestGift]

Disable it in your UserCP and in AdminCP for future users. Don't know the SQL code to run to disable it for current registered members. Make a thread about how to disable it.

[adwolf1]

when i insert:
<script type="text/javascript">
$.jGrowl('test...', {sticky: true, header : 'New Notification(s)' });
</script>

the box pops up properly with 'test' shown.

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

No box appears.

When I just put
{vb:raw notifications_menubits}

in the template, out pops:
2 Unread Private Messages

So I know the template variable is indeed correct.

Any ideas?

[adwolf1]

Originally Posted by adwolf1

when i insert:
<script type="text/javascript">
$.jGrowl('test...', {sticky: true, header : 'New Notification(s)' });
</script>

the box pops up properly with 'test' shown.

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

No box appears.

When I just put
{vb:raw notifications_menubits}

in the template, out pops:
2 Unread Private Messages

So I know the template variable is indeed correct.

Any ideas?

Solved my own problem --
"Add Template Name in HTML Comments" MUST be off or else this script won't work.

thanks

[literatestylish]

Words GREAT on Firefox and Chrome, but it completely disables the forum on IE.

Edit: fixed it. As per step 3, don't remove the entire section it tells you to remove. Simply remove the part that pertains to the notification dropdown.

[andreamarucci]

A little annoyance. Since my forum is a pay one, I've noticed that when the payment date approach, the little grey box show up and stay there until the forum payment is done. Problem is that some users told me that their forum quota is ending the 27 of december and the box is out now and there's no way to make it disappear...

[Konsolenheld]

Is it possible to center this Box?

[basilrath]

You can put it where you like providing you change the css coding