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

[misericorde]

Please, French translate ?

[woffie]

Very nice, however the skin edits make it a no go for me. I have 15 different custom skins and I am not doing all these edits everytime I upgrade.

[LuDawgs]

I need to move my notification up about 15px. Where do I make that change in the css file exactly? Thanks!

Never mind, I got it.

[GamersChallenge]

works great in 4.1.5

Can anyone tell me how I can change the positioning of the box? I need it to make it about 20-30px higher, reason is because I use cometchat witch display at the botton and covers it.

[Knele]

Doesn't work on 4.1.4, don't know why but it just isn't showing up.

[wtfaatp]

Originally Posted by Knele

Doesn't work on 4.1.4, don't know why but it just isn't showing up.

Are you sure your following all steps? 4.1.5 working fine.

[Smile :-)]

thanks, great modification!
btw, you don't need to include jquery file, because it's already included by vBulletin.

[kfyonur]

no message..

[kfyonur]

if you have a more script like me you can try this for IE.Don't add the red part.

Headinclude

<script type="text/javascript" src="mobiquo/tapatalkdetect.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
<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"/>
</script>

Turkish translation of header

<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) --> 
            <vb:if condition="$notifications_total">
            <script type="text/javascript">
            $.jGrowl('{vb:raw notifications_menubits} <br /> Bu uyarıyı kapatmak istiyorsanız bildirimlerinize bakmalısınız.' , { sticky: true, header : 'Yeni Bildirim(ler)' } );
            </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) -->

[kfyonur]

if you look before and after photos..you will see my problem..

why notifications section turned to inbox white

I don't want it,what can i do in header ?

<!-- TW7S - New Way To Display Notifications (jQuery,CSS,jGrowl) --> 
            <vb:if condition="$notifications_total">
            <script type="text/javascript">
            $.jGrowl('{vb:raw notifications_menubits} <br /> Bu uyarıyı kapatmak istiyorsanız bildirimlerinize bakmalısınız.' , { sticky: true, header : 'Yeni Bildirim(ler)' } );
            </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) -->