jGrowl Popup messages

Modifications for phpBB3. Try the Mods here and share Your own Mods
There is no support here! Only Read Access!
Forum rules
You dont have to use ModX or make your mod AutoMod compatible. A simple textfile is fine
But if you post Mods here You also have to give support
User avatar
Post Bot
BBCoder II
BBCoder II
Posts: 44
Joined: 04 Mar 2010, 18:53

jGrowl Popup messages

Post by Post Bot » 24 Apr 2010, 20:08

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
You do not have the required permissions to view the files attached to this post.


User avatar
Ashley.S.
BBCoder II
BBCoder II
Posts: 36
Joined: 05 Mar 2010, 10:24
Location: Falmouth, Cornwall, UK

Re: jGrowl Popup messages

Post by Ashley.S. » 25 Apr 2010, 11:58

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>
Regards,
-Ashley.S. [ Pluto Hosting Managing Director & ProphpBB Moderator ]

User avatar
Stoker
Site Admin
Site Admin
Posts: 3505
Joined: 12 May 2008, 21:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark

Re: jGrowl Popup messages

Post by Stoker » 26 Apr 2010, 12:01

Thanks Ashley
Board rules! No PM support
Sure, I can install the Mod for you ;)
Like the site? Then buy me a bear

User avatar
Ashley.S.
BBCoder II
BBCoder II
Posts: 36
Joined: 05 Mar 2010, 10:24
Location: Falmouth, Cornwall, UK

Re: jGrowl Popup messages

Post by Ashley.S. » 26 Apr 2010, 13:21

no problem 8-)
Regards,
-Ashley.S. [ Pluto Hosting Managing Director & ProphpBB Moderator ]

User avatar
neuropass
BBCoder IV
BBCoder IV
Posts: 173
Joined: 11 Apr 2010, 00:33

Re: jGrowl Popup messages

Post by neuropass » 01 May 2010, 14:54

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?
Last edited by neuropass on 01 May 2010, 15:01, edited 2 times in total.
Modd it up! TweakScene ;-) Support us! || Follow us ||

Image


User avatar
Aston777
BBCoder II
BBCoder II
Posts: 5
Joined: 01 May 2010, 04:33

Re: jGrowl Popup messages

Post by Aston777 » 19 May 2010, 08:41

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.
Last edited by Aston777 on 14 Jun 2010, 23:41, edited 3 times in total.

User avatar
Stoker
Site Admin
Site Admin
Posts: 3505
Joined: 12 May 2008, 21:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark

Re: jGrowl Popup messages

Post by Stoker » 19 May 2010, 08:55

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>
Board rules! No PM support
Sure, I can install the Mod for you ;)
Like the site? Then buy me a bear

User avatar
Aston777
BBCoder II
BBCoder II
Posts: 5
Joined: 01 May 2010, 04:33

Re: jGrowl Popup messages

Post by Aston777 » 19 May 2010, 19:32

Stoker wrote: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!!!!

Image



Thank you Stoker!

User avatar
Stoker
Site Admin
Site Admin
Posts: 3505
Joined: 12 May 2008, 21:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark

Re: jGrowl Popup messages

Post by Stoker » 19 May 2010, 21:01

No problem ;)
The problem was that jquery was included twice. Both the menu and jGrowl uses jquery and therefore causes a conflict.
Board rules! No PM support
Sure, I can install the Mod for you ;)
Like the site? Then buy me a bear

Ælly
BBCoder II
BBCoder II
Posts: 40
Joined: 15 Mar 2010, 01:08

Re: jGrowl Popup messages

Post by Ælly » 08 Jun 2010, 13:00

Not works ç____ç