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
o tambien pueden hacer un login flotante tipo popup o lo que quieran hacer
a todo esto es a su gusto
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); }?>
6
Puntos
Puntos
4324
Visitas
Visitas
6
Resp
Resp
Por fc2014 hace 113 meses
Experto
Respuesta #1
tiene buena pinta el script hay que probarlo +5
1
Puntos
Puntos
Por zerodarck hace 113 meses
Experto
Respuesta #2
Si esta beuno esto me llovo un par de dias desarollarlo
6
Puntos
Puntos
Por fc2014 hace 113 meses
Experto
Respuesta #3
Hola chicos me falto ponerle un script
mas que acabo de crear
es sobre el de escape
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
6
Puntos
Puntos
Por fc2014 hace 113 meses
Experto
Respuesta #4
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
a este script lo yamen como os querias es sullo editenlo hagan lo que quieran siempre y cuento agradecer sobre los script
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
1
Puntos
Puntos
Por fc2014 hace 113 meses
Experto
Respuesta #5
bubble_messages.php
codigo actualizado
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); }?>
1
Puntos
Puntos
Por fc2014 hace 113 meses
Experto
Respuesta #6
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
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
1
Puntos
Puntos
Por fc2014 hace 113 meses
Experto