Miscellaneous Hacks - Additional Notification Alert [jQuery]

Hi guys,

This mod/hack started off as a PM notification but after some requests i've extended it for all notifications and thrown in some jQuery just to make things smooth and look good

Anyway on to the mod itself, when a user recieves a notification a red bar will show at the top of the forum telling the user they have a notification and there is a clickable link which will extend the red box using jQuery giving the user links to specific notifications. 2 Demo gif's i've made here to help people understand, the actual jQuery animation isn't shown in the gif's but i've made it clear what it does,

DEMO 1 - Notification Alert (Extension Closed)
DEMO 2 - Notification Alert (Extension Open)

(Ignore the image movement, just an un-even cut lol)

=|= Install =|=

- Download and unzip attached file.
- Upload contents of the UPLOAD folder to the forum root.

Open Template - header

Add at Top -

<!-- Notification Alert -->
<style type="text/css">
.alert {
    background-color:#F00;
    width:100%;
    height:30px;
    color:#fff;
    font-size:14px;
    display:block;
}
.alert p {
    padding:5px;
}
.alert a {
    color:#ccc;
    text-decoration:none; 
}
.alert a:hover {
    color:#fff;
    text-decoration:underline; 
}
#slidealert {
    display: none;
    height:auto;
    padding-bottom:5px;
    background-color: #F00;
}
#slidealert a {
    text-decoration:none;
    color:#CCC;
    padding:5px;
}
#slidealert a:hover {
    text-decoration:underline;
    color:#fff;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function ShowHide(){
$("#slidealert").animate({"height": "toggle"}, { duration: 1000 });
}
//]]>
</script>
<vb:if condition="$notifications_total">
<div class="alert">
<p><span style="text-decoration:blink; font-weight:bold;">ATTENTION! {vb:raw bbuserinfo.username}</span> You've got {vb:raw notifications_total} new notification(s), click <a onclick="ShowHide(); return false;" href="#">here</a> to view.</div><div id="slidealert">{vb:raw notifications_menubits}<a onclick="ShowHide(); return false;" href="#">Close</a></div></p>                    
</vb:if>
<!-- Notification Alert End -->

And that's it installed! Any questions or issues just post in here.

Enjoy! And remember to mark as installed for future updates and support!

Boydy

[evilTone]

installed and working fine, thanks

[boydy]

Originally Posted by evilTone

installed and working fine, thanks

No problem Remember and mark as installed to keep up-to-date with future updates.

[Juggernaut]

Installed, and looks very good.

[goxy63]

This is great, but with pop-up window regarding to message its bit too much...how to remove pop up window?

[boydy]

Which popup window? There is not popup involved in this mod?

[goxy63]

Originally Posted by boydy

Which popup window? There is not popup involved in this mod?

Not regarding this mod, there is default pop up (small) window with VB, and together with this notification its bit too much.

[boydy]

Ok mate, i know what you mean, i'll look into it for you.

[boydy]

Originally Posted by goxy63

Not regarding this mod, there is default pop up (small) window with VB, and together with this notification its bit too much.

Ok mate, to remove the vbulletin built in notification dropdown do the following,

Open template - header

Find and remove -

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

That's you

[COL NIL SATIS]

top man Boydy,will install this now...amazing work

rates 5