Notificaciones y mensajes en popups

Hola que tal en esta vez veremos como podemos hacer un sistema de notificaciones + mensajeria + jquery+ajax+css
todo en tiepo real

efectos.js

$(document).ready(function()
{
$("#messages").click(function(){
$("#messagesContainer").fadeToggle(300);
$("#messages_count").fadeOut("slow");
return false
});

//Document Click
$(document).click(function()
{
$("#messagesContainer").hide();
});
//Popup Click
$("#messagesContainer").click(function()
{
	//esto siquereis poner en return true para que os ande los links pero se le das click en el contener de messges se oculta 
return false
});

});

menu.php *en el id se le pone en el codigo de efectos.js se le yama asi como si se lo pusieron en mi caso lo cree con messages y notificaciones
o tambien pueden hacer un login flotante tipo popup o lo que quieran hacer

<a title="Mensajes" id="messages" href="<?php echo $urlWeb?>url?go=user/mensajes.php">

<div id="item_op_n">
 <span class="notifica_msn" id="men_live" style="display: none"><span id="conteo_msn"></span></span>
  <img src="data:image/png;base64,<?php echo base64_encode(file_get_contents($urlWeb.'img/messaje.png'))?>" width="17" height="20"></div></a>

estilos.css en el estilo lo modificar la posicion que este la notificaciones de pop ups

<!--messages -->
#messages_li{position:relative}
#messagesContainer {
margin-top: 20px;
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 30px;
margin-left: -143px;
width: 353px;
z-index: -1;
display: none;
}#messagesContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#messagesTitle {
z-index: 1000;
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
width: 336px;
border-bottom: 1px solid #dddddd;
}#messagesBody {
padding: 33px 0px 0px 0px !important;
}
#messagesFooter {
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}
#messages_count {
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 77px;
border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}

bubble_messages.php
a todo esto es a su gusto

<?php 
if(isset($_COOKIE['idcookie'])){
$user=$_COOKIE['idcookie'];
mysql_select_db($database_conexion, $conexion);
$query_buble_notifications = sprintf("SELECT *  FROM r_message WHERE para=$user   ORDER BY id DESC LIMIT 3");
$buble_notifications = mysql_query($query_buble_notifications, $conexion) or die(mysql_error());
$row_buble_notifications = mysql_fetch_assoc($buble_notifications);
$totalRows_buble_notifications = mysql_num_rows($buble_notifications);

?>
<? if ($totalRows_buble_notifications==0){?>

<style>
#notificationsBody {
padding: 33px 0px 0px 0px !important;
min-height: 0px;
}
</style>
<? }?>
<div id="messagesContainer" style="z-index:999;">
<div id="messagesTitle">Mensajes</div>
 <?php do { ?>
      <?php if ($totalRows_buble_notifications==!0){?>


      <div class="global" id="messagesid">
        <div class="size21">
        <a onclick="go(1,<? echo $row_buble_notifications['code']?>)"><? if($row_buble_notifications['asunto']==NULL or ''){
			echo 'Sin asunto';
			}else{
				
				echo $row_buble_notifications['asunto'];
				};?></a>
        
        </div>
                 
        <div id="info_post">
<span class="nombre_user">          
 <a href="<?php echo $urlWeb.'perfil/',usuario($row_buble_notifications['autor']);?>">
		  <?php echo usuario($row_buble_notifications['autor']);?></a> <?php echo hace($row_buble_notifications['fecha']);?></span>
        </div>
      </div>
<?php }else{?>
<h4><div class="global">
	  <div class="size21">No tienes mensajes</div></div> 
</h4><? }?>
      <?php } while ($row_buble_notifications = mysql_fetch_assoc($buble_notifications)); ?>





<div id="messagesBody" class="messages">
</div>
<div id="messagesFooter"><a onclick="notifications()">Mostrar mas</a></div>
</div>

<? }else{header('location:'.$urlWeb);
}?>

tiene buena pinta el script hay que probarlo +5

Si esta beuno esto me llovo un par de dias desarollarlo

Hola chicos me falto ponerle un script
mas que acabo de crear
es sobre el de escape

$(document).bind('keydown',function(e){
	if ( e.which==27){
	$('#buscar').focus();
	$("#resultados").hide()
	$("#buscar").val(null)
	$('#notificationContainer').hide()
	}});
 

al precionar la tecla esc es cierra la notificacion

me puse a desarollar este recien lo acabo de terminar es de el problema que tiene es sobre el return pero ya esta resulto
lo que tienen uqe hacer es generar un codigo ajax en jquery ahi os paso

efectos.js

function go_m(id){ // por que go_m  go_m es ir a mensajes y go_n seria notificaciones 
	$.ajax({
	type: 'POST',
	url: urlWeb + 'inc/redic_m.php',
	data: 'id=' + id,
	success: function(htmlres) {
location.href=  htmlres;
}});}

redic_m.php

<?php require_once('../Connections/conexion.php'); 
mysql_select_db($database_conexion, $conexion);
$query_sacar_m = "SELECT * FROM r_message WHERE code=".$_POST['id'];
$sacar_m = mysql_query($query_sacar_m, $conexion) or die(mysql_error());
$row_sacar_m = mysql_fetch_assoc($sacar_m);
$totalRows_sacar_m = mysql_num_rows($sacar_m);

echo $urlWeb.'user/vermsn.php?code='.$row_sacar_m['code'];

mysql_free_result($sacar_m);
?>

a este script lo yamen como os querias es sullo editenlo hagan lo que quieran siempre y cuento agradecer sobre los script

bubble_messages.php

codigo actualizado

<?php 
if(isset($_COOKIE['idcookie'])){
$user=$_COOKIE['idcookie'];
mysql_select_db($database_conexion, $conexion);
$query_buble_notifications = sprintf("SELECT *  FROM r_message WHERE para=$user   ORDER BY id DESC LIMIT 3");
$buble_notifications = mysql_query($query_buble_notifications, $conexion) or die(mysql_error());
$row_buble_notifications = mysql_fetch_assoc($buble_notifications);
$totalRows_buble_notifications = mysql_num_rows($buble_notifications);

?>
<? if ($totalRows_buble_notifications==0){?>

<style>
#notificationsBody {
padding: 33px 0px 0px 0px !important;
min-height: 0px;
}
</style>
<? }?>
<div id="messagesContainer" style="z-index:999;">
<div id="messagesTitle">Mensajes</div>
 <?php do { ?>
      <?php if ($totalRows_buble_notifications==!0){?>


      <div class="global" id="messagesid">
        <div class="size21">
        <a class="manita" onclick="go_m(<? echo $row_buble_notifications['code']?>)"><? if($row_buble_notifications['asunto']==NULL or ''){
			echo 'Sin asunto';
			}else{
				
				echo $row_buble_notifications['asunto'];
				};?></a>
        
        </div>
                 
        <div id="info_post">
<span class="nombre_user">          
 <a href="<?php echo $urlWeb.'perfil/',usuario($row_buble_notifications['autor']);?>">
		  <?php echo usuario($row_buble_notifications['autor']);?></a> <?php echo hace($row_buble_notifications['fecha']);?></span>
        </div>
      </div>
<?php }else{?>
<h4><div class="global">
	  <div class="size21">No tienes mensajes</div></div> 
</h4><? }?>
      <?php } while ($row_buble_notifications = mysql_fetch_assoc($buble_notifications)); ?>





<div id="messagesBody" class="messages">
</div>
<div id="messagesFooter"><a onclick="notifications()">Mostrar mas</a></div>
</div>

<? }else{header('location:'.$urlWeb);
}?>

mas adelate les paso un codigo para hacerlo en tiepo real
a media que alguien te cometa o te enviar un privado
que se te notifique y se actualize la div para que no tengas que recargar la web