jGrowl Popup messages

[Post Bot]

jGrowl Popup messages
Written by Earni

ok so i found this and thought someone might be interested in having it on their board. mainly because it looks nicer than any popups from your browser. i have implemented it to show a message to guests and also to popup when you recieve a PM.
Only downside is, you cant use any links in the text which is a shame.

here is the original jGrowl
http://stanlemon.net/projects/jgrowl.html#samples

and here it is on my test board
(link removed for security reasons)

let me know what you would like notifications or popups for because it can do quite a lot. its very easy to customise and looks classy on any forum.

So far this is only tested on Subsilver2 and subsilver2 based styles, if someone fancies trying it on Prosilver, be my guest but don't blame me if it doesnt work lol.
[edit]Thanks phpfan, now tested and working on Prosilver Style[/edit]

Files needed to edit:
Overall_header.html

Included Folders:
jgrowl

Open: overall_header.html
Find:

Code: Select all

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

Add After:

Code: Select all

<style type="text/css">

div.jGrowl {
	padding: 			10px;
	z-index: 			9999;
}

/** Special IE6 Style Positioning **/
div.ie6 {
	position: 			absolute;
}

div.ie6.top-right {
	right: 				auto;
	bottom: 			auto;
	left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.top-left {
	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.bottom-right {
	left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.bottom-left {
	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

div.ie6.center {
	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	width: 				100%;
}

/** Normal Style Positions **/
body > div.jGrowl {
	position:			fixed;
}

body > div.jGrowl.top-left {
	left: 				0px;
	top: 				0px;
}

body > div.jGrowl.top-right {
	right: 				0px;
	top: 				0px;
}

body > div.jGrowl.bottom-left {
	left: 				0px;
	bottom:				0px;
}

body > div.jGrowl.bottom-right {
	right: 				0px;
	bottom: 			0px;
}

body > div.jGrowl.center {
	top: 				0px;
	width: 				50%;
	left: 				25%;
}

/** Cross Browser Styling **/
div.center div.jGrowl-notification, div.center div.jGrowl-closer {
	margin-left: 		auto;
	margin-right: 		auto;
}

div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
	background-color: 		#000;
	color: 					#fff;
	opacity: 				.85;
	filter: 				alpha(opacity = 85);
	zoom: 					1;
	width: 					235px;
	padding: 				10px;
	margin-top: 			5px;
	margin-bottom: 			5px;
	font-family: 			Tahoma, Arial, Helvetica, sans-serif;
	font-size: 				12px;
	text-align: 			left;
	display: 				none;
	-moz-border-radius: 	5px;
	-webkit-border-radius:	5px;
}

div.jGrowl div.jGrowl-notification {
	min-height: 			40px;
}

div.jGrowl div.jGrowl-notification div.header {
	font-weight: 			bold;
	font-size:				10px;
}

div.jGrowl div.jGrowl-notification div.close {
	float: 					right;
	font-weight: 			bold;
	font-size: 				12px;
	cursor:					pointer;
}

div.jGrowl div.jGrowl-closer {
	height: 				15px;
	padding-top: 			4px;
	padding-bottom: 		4px;
	cursor: 				pointer;
	font-size:				11px;
	font-weight: 			bold;
	text-align: 			center;
}

</style>
		<script type="text/javascript" src="{ROOTPATH}images/jgrowl/jquery-1.3.2.js"></script>
<script type="text/javascript" src="{ROOTPATH}images/jgrowl/jquery.ui.all.js"></script>
<script type="text/javascript" src="{ROOTPATH}images/jgrowl/jquery.jgrowl.js"></script>

Change YOURURL to wherever you have uploaded the files.

Find:

Code: Select all

<!-- IF S_USER_PM_POPUP -->
	if ({S_NEW_PM})
	{
		popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
	}
<!-- ENDIF -->

Delete it.

Find:

Code: Select all

</head>

Add Before:

Code: Select all

<script type="text/javascript">

		// In case you don't have firebug...
		if (!window.console || !console.firebug) {
			var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
			window.console = {};
			for (var i = 0; i < names.length; ++i) window.console[names[i]] = function() {};
		}

		(function($){

			$(document).ready(function(){

				// This value can be true, false or a function to be used as a callback when the closer is clciked
				$.jGrowl.defaults.closer = function() {
					console.log("Closing everything!", this);
				};
				
				// A callback for logging notifications.
				$.jGrowl.defaults.log = function(e,m,o) {
					$('#logs').append("<div><strong>#" + $(e).attr('id') + "</strong> <em>" + (new Date()).getTime() + "</em>: " + m + " (" + o.theme + ")</div>")
				}				
				<!-- IF S_DISPLAY_PM and (S_USER_NEW_PRIVMSG or S_USER_UNREAD_PRIVMSG) -->
				$.jGrowl("You have {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD --> and {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->.", { header: 'Hello {S_USERNAME}', sticky: true, });
				<!-- ENDIF -->
				
				<!-- IF not S_IS_BOT and not S_USER_LOGGED_IN -->
				$.jGrowl("Welcome to {SITENAME} If you are a registered user, Log In, Otherwise feel free to register.", { header: 'Hello Guest', sticky: true, });
				<!-- ENDIF -->
			});
		})(jQuery);

		</script>

Finally, upload jgrowl folder to... forumroot/images/

Refresh your templates and should be working

[Ashley.S.]

This is great Thanks, all I would suggest in the end so you don't have to worry about entering your domain name is replacing:

Code: Select all

<script type="text/javascript" src="http://www.YOURURL.com/FORUM/images/jgrowl/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://www.YOURURL.com/FORUM/images/jgrowl/jquery.ui.all.js"></script>
<script type="text/javascript" src="http://wwwYOURURL.com/FORUM/images/jgrowl/jquery.jgrowl.js"></script>

with:

Code: Select all

<script type="text/javascript" src="{ROOTPATH}images/jgrowl/jquery-1.3.2.js"></script>
<script type="text/javascript" src="{ROOTPATH}images/jgrowl/jquery.ui.all.js"></script>
<script type="text/javascript" src="{ROOTPATH}images/jgrowl/jquery.jgrowl.js"></script>

[Stoker]

Thanks Ashley

[Ashley.S.]

no problem

[neuropass]

with Mchat installed you have to delete this line in the overalheader. Otherwise it won't work...

Code: Select all

<script type="text/javascript" src="{ROOT_PATH}mchat/jquery_core_mini.js"></script>

anyway, is it possible to have "clickable" the new meesages in the popup?

so you don't need to close it and then click on the new pms..

Also do you guys know the query to set the pop message for every user in the forum?

[Aston777]

Hello everyone, great site!

I have the following problem

I'm editing a phpbb3 forum 3.1.7 and install the mod "jGrowl Popup messages.

I worked perfect until you install the navigation bar MOD [BETA] phpbb.com style menu ", and the Popup jGrowl disappeared.

I can not install both mods, it's as if they cancel each other.

if I get the following code for the mod "[BETA] phpbb.com style menu":

Code: Select all

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

The notification window mod "jGrwl Popup messages" magically reappear, otherwise if I add the code before </ head> according to the directions, the jGrw popup disappears.

Is there any solution for this problem?

I am using the style "se_square_left".

Greetings and excuse my bad English.

[Stoker]

I think it will work of you delete the first line:

Code: Select all

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

[Aston777]

I think it will work of you delete the first line:

Code: Select all

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

It works!!!!





Thank you Stoker!

[Stoker]

No problem
The problem was that jquery was included twice. Both the menu and jGrowl uses jquery and therefore causes a conflict.

[Ælly]

Not works ç____ç