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

[goxy63]

Originally Posted by boydy

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

Open template - header

Find and remove

Thanks a lot, love our mod...changed few colors and its perfect now
Just small information, part of notification that is blinking its not working with IE 8
Not problem for me tho as I "hate" IE and most of my users don't use it
Great mod, rated and nominated
Keep up the good work, cant wait some more from you ....cheers

[boydy]

Yeh i realised IE may cause problems because it is without doubt the worst browser on the planet. I'll look into that though and thanks for the comments.

[goxy63]

Originally Posted by boydy

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

Removed but damn thing still pops out

[boydy]

Can you show a printscreen of what you mean?

[goxy63]

Think that from start we did not understand each others, I was not thinking about drop down or... just pop up window which notifies member about new pm, this is presented to a user just once and even if he don't check message when next time he logs in it will not be there (if no new pm's)


I know that this is not part of this mod, but together with this mod default pop up window is unnecessary

[boydy]

Ah ok I understand now, is that a default setting within bulletin as I have a clean test install of vbulletin 4.1.3 and I don't get that popup :s . I'm not available tonight but I will get straight on it tomorrow at some point.

Cheers.

[goxy63]

I have VB 4.1.3 also, but pop ups are there (you see only once pop up per message)
Will check my settings and at vb.com, maybe its cause of some settings, there is 1000 settings withing VB and maybe I am missing something. Thanks

[boydy]

Goxy, i've had a look around my templates, if you cannot find the setting then try the following:

Open template - Private Message Templates -> pm_popup_script

Delete content of template and save. Like i said i think it must be an option as i don't get it at all.

[goxy63]

Hi again

Well I found how to take care about mentioned problem with pop up message, it was in VB options
AdminCP > Settings > Options > User Registration Options > Default Registration Options
and
AdminCP > Maintenance > Execute SQL Query

...and select the 'No - Pop up a Notification Box When a Private Message is Received' from the dropdown and press 'Continue'.

As VB support suggested and it worked for me

But then another problem was found, with your notification code I had problem with "Radio and TV Player 4.x"mod which is one of my favourite
Problem was that within radio and station pages I could not choose any stations or whatever, think its releted to JS....but its beyond me how to resolve that
I love your way of notification but with jQuery its making trouble for mods like one I mentioned

Thanks

[UKCE_Hitman]

Installed thx