AvacDom: Private Message Pop Up List

This tutorial is based off of this: http://www.avacweb.com/t161-avacdom-selector-method
If you haven't read that thread then you should do so now, as it is needed for this tutorial.


The script in this tutorial is based off of my own selector system, which you will have seen in the topic above.
This is the first tutorial out of (hmm, not decided how many yet) of my tutorials based off of the topic above.

What the script will do, is it will add an onclick function to the link in the navbar which when clicked will pop up a nice little box underneath showing you your private messages. This means you can view your private messages from any page. AND each time you click the link (to open the box) the messages will be updated, so you can check if you have new messages without even refreshing!

Here's an image of the box:


Underneath it has the button to close it, and also a button to visit the inbox page.
So after installing the script, your Private message link in the navbar will pop up that box.

First of all you will need to add this to your CSS:

Code:


#LGprivs {
  position: absolute;
  padding: 5px;
  background: #e1ebf2;
  border: 1px solid #c05;
  max-width: 300px;
  z-index: 999;
  box-shadow: 3px 3px 3px #888;
}
#LGprivs .mark, #LGprivs input { display: none; }
a.avbtn {
  background: #105289;
  color: #fff;
  cursor: pointer;
  border: 1px solid #105289;
  padding: 3px;
  width: 50%;
  display: block;
  margin: 1px auto;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
}
a.avbtn:hover {
  background: #e1ebf2;
  color: #c05;
}

And then go to either an announcement box, or a new custom widget and place this in it:
(for phpbb3)

Code:


<div id="LGprivs" style="display: none"></div>
<script>
var x=avac('#i_icon_mini_message<');
x ? x : avac('#i_icon_mini_new_message<');
x.setAttribute('onclick','loadPrivs(event);'); x.href="#";

function loadPrivs(e){
  var x=avac('#LGprivs');
  avac('body').appendChild(x);
  var selector='#privmsgs-menu+[3](ul[1])';
  x.style.top=e.clientY+10+'px';
  x.style.left=e.clientX-20+'px';
  avacLoad('/privmsg?folder=inbox '+selector,x,function(){
     this.style.display="block"
     this.innerHTML+='<br><a href="/privmsg?folder=inbox" class="avbtn">Visit Inbox</a><br><a onclick="jQuery(this.parentNode).hide()" class="avbtn">Close</a>';
  });
}
</script>


This code is for PHPBB3, in the next few days I will maybe share it for invision and PunBB.
The code uses AvacDom selectors for selecting elements. It also uses the avacLoad function which is used to load the inbox page, and grab the messages, then display it on the page.

In the meantime I wonder if anyone can figure it out for other board types. As it is only one line which needs change and that is this line:
var selector='#privmsgs-menu+[3](ul[1])';
But some CSS will need changing too.

So try learning this new AvacDom selector method and you'll be able to figure it out
Learn about it here: http://www.avacweb.com/t161-avacdom-selector-method

not working for me

If I remember correctly, you use phpbb2, which this is for phpbb3.

I switched to phpbb3..

i'm gonna try the codes again

Today can't open messages unless get new message. Last two days working well.

i have the same problem...

I'll look into it.

and punbb?

is possible?