Additional Notification Alert [jQuery]
Mod Version: 1.00, by boydy
| vB Version: 4.x.x | Rating:  (6 votes - 4.67 average) |
Installs: 32 |
| Released: 01 May 2011 | Last Update: Never | Downloads: 155 |
 Not Supported
 Template Edits
Additional Files
Translations
|
||
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 - &stc=1&d=1304255766
DEMO 2 - &stc=1&d=1304255766
(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 -
And that's it installed! Any questions or issues just post in here.
Enjoy! And remember to for future updates and support!
Boydy
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 - &stc=1&d=1304255766
DEMO 2 - &stc=1&d=1304255766
(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 -
Code:
<!-- 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 -->
Enjoy! And remember to for future updates and support!
Boydy
Download
Additional Notification Alert.zip (30.6 KB, 186 downloads)
Screenshots
