A Christmas Gift: VM Notifications
Posted December 24th 2011, 11:14am
Visitor Message Notifications
(for phpbb3 and invision, it might work in other versions... I didn't check)


PLEASE NOTE: for this tutorial to work you must have installed this: http://www.diondesigns.org/t440-
That tutorial will create a global variable accessible to other scripts which contains the user id number.


After doing so ... put this in a javascript file:
(i recommend putting this script ONLY FOR HOMEPAGE, NOT in all pages.)

var CopyrightNotice='Visitor Message Notification script for Forumotion Boards. Copyright © by LGforum. All Rights Reserved. Use and  modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. No distribution without consent.';
$(function(){
var a=new XMLHttpRequest();
a.onreadystatechange=function() {
if (a.readyState==4 && a.status==200) {
var x=a.responseText.indexOf('title="New message" /> by ');
if (x != -1) {
var c=a.responseText.substring(x,a.responseText.indexOf('</a>',x)+4);
var user=c.substring(26,c.length);
var html="<div id='LGnewVM'>Notification: '"+user+"' has left you a Visitor Message!<br><br><span onclick=\"document.getElementById('LGnewVM').style.display='none';\">Close</span></div>";
document.body.innerHTML+=html;
}
}
} a.open("GET","/u" +uid+ "wall",true); a.send(); });


And then this goes in your CSS to style it. Feel free to make it look more like your forum.
#LGnewVM {
position: fixed;
top: 5px; right: 5px;
border: 2px solid #105289;
background: #fff;
border-radius: 6px;
font-size: 13px;
text-align: center;
padding: 10px;
}
#LGnewVM span {
border: 1px solid #000;
background: #CCC;
color: #000;
padding: 3px;
cursor: pointer;
}
#LGnewVM span:hover {
background: #666;
color: #fff;
}


This script will provide you with a notification box in the top corner of the page when someone has posted a message on your wall (visitor messages) and will also grab the name of the person who has posted on your wall. (only the latest message)

Here's a screenshot of what it will look like:

Image
I admit the styling is simple... but i reckon you'll like it when you see it on your page.

I understand a lot of forums don't use the visitors message feature much, but now with notifications, here's your chance to make use of this feature ;)
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
A Christmas Gift: VM Notifications
Posted December 24th 2011, 12:04pm
Hi :)
I like the idea.
Whether I will bother or not is open at present.
I have never used "Visitor Messages".
On most forums I frequent this is the case too.
However this concept may well improve traffic in this area.
Good one... Image
φ
Posts: 33
Joined: September 25th 2011, 11:00pm
Location: UK
Likes Given: 17
Likes Received: 1
A Christmas Gift: VM Notifications
Posted December 24th 2011, 5:57pm
Hi :)
Gave it a go.
But get no pop-up.
This thread [url=/t440-]http://www.diondesigns.org/t440-[/url]
The tutorial link takes me nowhere.
So maybe I've got something wrong.
Though I get user id.
φ
Posts: 33
Joined: September 25th 2011, 11:00pm
Location: UK
Likes Given: 17
Likes Received: 1
1
#4
A Christmas Gift: VM Notifications
Posted December 24th 2011, 7:53pm
That tutorial needed some updating, which I just completed.

[url=/t440-]http://www.diondesigns.org/t440-[/url]

I have also edited the URLs in the posts accordingly.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
A Christmas Gift: VM Notifications
Posted December 24th 2011, 8:20pm
I like it :)
Thank you for sharing it!
φ
Posts:
Avatar
Guest
A Christmas Gift: VM Notifications
Posted December 25th 2011, 6:05am
@LGforum: nice :)
φ
Posts: 16
Joined: October 3rd 2011, 11:00pm
Location: india
Likes Given: 18
A Christmas Gift: VM Notifications
Posted December 26th 2011, 5:24am
@Dion:
Dion said:
That tutorial needed some updating, which I just completed.

[url=/t440-]http://www.diondesigns.org/t440-[/url]

I have also edited the URLs in the posts accordingly.


Hi :)
Many thanks.
I still can't get the VM notification to work.
But also now only get user id with the sight description.
As soon as I add the javascript, this disappears.
Which didn't happen before your edit.
Please do not spend time on this, if it is only me with problems.
This is more of an update.
As opposed to anything else.
φ
Posts: 33
Joined: September 25th 2011, 11:00pm
Location: UK
Likes Given: 17
Likes Received: 1
A Christmas Gift: VM Notifications
Posted January 6th 2012, 3:09pm
Thanks LG! Is there a way that this can be used for things like when someone requests friendship on the forum instead of for Visitor Messages?
φ
Posts: 280
Joined: October 2nd 2011, 11:00pm
Likes Given: 27
Likes Received: 4
A Christmas Gift: VM Notifications
Posted January 6th 2012, 3:23pm
[url=/t8467-]http://www.diondesigns.org/t8467-[/url]

Note: only members with a minimum number of posts can read the topic in the above link.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
A Christmas Gift: VM Notifications
Posted January 6th 2012, 4:11pm
Dion said:
[url=/t8467-]http://www.diondesigns.org/t8467-[/url]

Note: only members with a minimum number of posts can read the topic in the above link.
Thanks Dion!
φ
Posts: 280
Joined: October 2nd 2011, 11:00pm
Likes Given: 27
Likes Received: 4
A Christmas Gift: VM Notifications
Posted January 7th 2012, 7:28am
Can you make something like this for PM??
φ
Posts:
Avatar
Guest
A Christmas Gift: VM Notifications
Posted January 7th 2012, 9:10am
Its very easy to make your own pop up for PM's for boards with template editing.
Since you can remove the forumotion pop up.

Find this is the overall header template:
 <!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
pm.focus();
<!-- END switch_enable_pm_popup -->


And swap it all for this:
 <!-- BEGIN switch_enable_pm_popup -->
<div id="privMsgPopUp">
<a href="/privmsg?folder=inbox">You have new private messages.</a><br /><br />

<span class="closeBtn" onclick="document.getElementById('privMsgPopUp').style.display='none';">Close</span>
</div>
<!-- END switch_enable_pm_popup -->


And some CSS to style it:
         
#privMsgPopUp {
padding: 12px;
border: 1px solid #105289;
background: #DEE3E7;
position: fixed;
top: 10px; right: 15px;
text-align: center;
}
.closeBtn {
padding: 3px;
border: 1px solid #ccc;
background: #999;
color: #000;
cursor: pointer;
}
.closeBtn:hover {
background: #666;
color: #fff;
}


All this is, and the reason it works, is that adds an element to the overall header, which is fixed in the top corner and styled with css. However due to it being in between the new private message SSI's then it will only be loaded into the page if the user has a new private message, and hence displayed.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
A Christmas Gift: VM Notifications
Posted January 7th 2012, 1:20pm
Not works for me, why ?
φ
Posts: 63
Joined: November 7th 2011, 12:00am
Likes Received: 4
A Christmas Gift: VM Notifications
Posted January 7th 2012, 1:24pm
Make sure the second code is below the BODY tag. I forgot to mention that.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
A Christmas Gift: VM Notifications
Posted January 7th 2012, 1:39pm
LGforum said:
Make sure the second code is below the BODY tag. I forgot to mention that.

The second code ? you mean this code ?
 <!-- BEGIN switch_enable_pm_popup -->
<div id="privMsgPopUp">
<a href="/privmsg?folder=inbox"?You have new private messages.</a><br /><br />

<span class="closeBtn" onclick="document.getElementById('privMsgPopUp').style.display='none';">Close</span>
</div>
<!-- END switch_enable_pm_popup -->
φ
Posts: 63
Joined: November 7th 2011, 12:00am
Likes Received: 4
A Christmas Gift: VM Notifications
Posted January 7th 2012, 2:03pm
I get white popup window, Not (You have new private messages.) why ?
φ
Posts: 63
Joined: November 7th 2011, 12:00am
Likes Received: 4
A Christmas Gift: VM Notifications
Posted January 7th 2012, 5:11pm
I edited my post with the codes in. There was a slight typing error in the second code. Its fixed now and should work.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
A Christmas Gift: VM Notifications
Posted January 8th 2012, 4:29am
It works fine now.
but can i do the same idea with the reports popup and Friend Request (PunBB) ?
φ
Posts: 63
Joined: November 7th 2011, 12:00am
Likes Received: 4
A Christmas Gift: VM Notifications
Posted January 8th 2012, 9:45am
Yeah of course.

For reports find this in the overall header:
	<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
report.focus();
<!-- END switch_report_popup -->


and remove it.

The find the body tag, and underneath it put this:
	<!-- BEGIN switch_report_popup -->
<div id="reportPopup">
There are new reports to read.<br /><br />

<span class="closeBtn" onclick="document.getElementById('reportPopup').style.display='none';">Close</span>
</div>
<!-- END switch_report_popup -->


You'll need to style it using CSS... Just duplicate the same CSS as for the PM pop up i gave you but change this line :'#privMsgPopUp' to '#reportPopup'.

Being able to change the pop ups is actually one of the great benefits of templates. Not enough to make me change but still.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
A Christmas Gift: VM Notifications
Posted January 8th 2012, 8:06pm
It works fine with this line too;
There are new reports to read.



what about for Friend Request (PunBB) ?
φ
Posts: 63
Joined: November 7th 2011, 12:00am
Likes Received: 4

Who is online

Users browsing this forum: No registered users and 0 guests