Abrir pop-up si hay una nueva noticia

SeaPirates · #1 (**permalink**) 05/09/2009, 07:30

Hola, necesito que cuando haya una nueva noticia se abra un pop-up al medio de la pagina, seria un pop-up pero no de ventana si no un pop-up que se abra dentro de la pagina, el sistema de noticias es cutenews, ya pregunte alli pero no saben como hacerlo...

Si no sim se puede, tambien estaria bien simplemente con un boton o texto que parpadee cuando haya una nueva noticia

Adler · #2 (**permalink**) 05/09/2009, 13:17

Hola

Hace poco monté un prototipo en el que se consulta una bd cada x tiempo y si hay nuevos registros, estos son mostrados en una ventana emergente. Si te interesa dímelo y te paso los script. Esta montado en (AJAX, javascript y ASP)

Suerte

SeaPirates · #3 (**permalink**) 06/09/2009, 05:43

vale gracias, lo necesitare.
Saludos,

Adler · #4 (**permalink**) 07/09/2009, 04:10

Hola

No es el foro apropiado pero aquí lo tienes. Espero que te ayude

VentanaMessenger.html

Código javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<script type="text/javascript" src="./leerjsdeajax.js"></script>
<script type="text/javascript">
 function creaAjax(){
    var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
    var ajax = false;
    for(var i=0 ; !ajax && i<ajaxs.length ; i++){
        try{ 
            ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
        }
        catch(e) { 
            ajax = false; 
        }
    }
    if(!ajax && typeof XMLHttpRequest!='undefined') {
        ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
    }
    return ajax;
}
 
 
function Ventana() {
var ajax=creaAjax();
var objetosel = document.getElementById("contenedor");
ajax.open('GET','ventanamessenger_ajax.asp',true);
ajax.send(null);
ajax.onreadystatechange = function() {
 
        if (ajax==null){
        alert ("Tu navegador web no soporta AJAX!");
        return;
    }
 
        if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
                                        objetosel.innerHTML = "Cargando ...";
            }
 
                else if (ajax.readyState==4){
                    if(ajax.status==200){   
 
        var scs=ajax.responseText.extractScript();
            objetosel.innerHTML = ajax.responseText.stripScript();
        scs.evalScript(); 
 
 
                   }
                    else if (ajax.status==404)
                                             {
 
                                    objetosel.innerHTML = "La dirección no existe";
                                             }
                                     else
                                             {
                                    objetosel.innerHTML = "Se ha producido un error";
                                             }
                                    }
                  }
        
}
 
window.setInterval("Ventana()",90000);
window.onload = function () {setTimeout("Ventana()",1000);};
</script>
<style type="text/css">
#VentanaTipoMsgr { position:fixed; z-index:15000; right:2px; bottom:-2px; padding:0px; width:207px; height:123px; background:transparent url(cuerpo_ventanamodal.gif); }  
body > div#VentanaTipoMsgr { position:fixed; z-index:15000; right:2px; bottom:-2px; padding:0px; width:207px; height:123px; background:transparent url(cuerpo_ventanamodal.gif); }
#VentanaTipoMsgr a { font-family:tahoma; font-size:9px; color:#59616E; font-weight:bold; text-decoration:none; }
#btn_vm_paginador a{ background-color:#FFFFFF; color:#59616E; font-family:Arial, Helvetica, sans-serif; font-size:9px; font-weight:900;text-decoration:none;padding:2px; border: 1px solid #C9C9C9;border-width: 1px 1px 1px 1px; }
</style>
</head>
<body>
<table border="1" width="800px">
<tr height="500px">
<td>Contenido de la página</td>
</tr>
</table>
 
 
<div id="contenedor">
</div>
 
<div id="VentanaTipoMsgr" style="bottom:-200px; display:none;">
<div style="position:absolute; top:3px; right:5px;cursor: pointer;"><img id="btn_vm_cerrar" src="cuerpo_cerrar.gif" width="15px" height="20px" border="0" /></div>
<div id="CabezaMsg" style="padding:6px 6px 6px 3px; text-align:left; font-family:tahoma; font-size:11px; font-weight:bold; color:#000000;"></div>
<div id="CuerpoMsg" style="position:absolute; top:30px; right:5px; left:5px; text-align:left; color: #59616E; font-size: 9px; font-family:verdana;"></div>
<div style="clear:both;"></div>
</div>
 
 
</body>
</html>

leerjsdeajax.js

Código javascript:

Ver originalvar tagScript = '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)';
/**
* Eval script fragment
* @return String
*/
String.prototype.evalScript = function()
{
        return (this.match(new RegExp(tagScript, 'img')) || []).evalScript();
};
/**
* strip script fragment
* @return String
*/
String.prototype.stripScript = function()
{
        return this.replace(new RegExp(tagScript, 'img'), '');
};
/**
* extract script fragment
* @return String
*/
String.prototype.extractScript = function()
{
        var matchAll = new RegExp(tagScript, 'img');
        return (this.match(matchAll) || []);
};
/**
* Eval scripts
* @return String
*/
Array.prototype.evalScript = function(extracted)
{
                var s=this.map(function(sr){
                var sc=(sr.match(new RegExp(tagScript, 'im')) || ['', ''])[1];
                if(window.execScript){
                window.execScript(sc);
                }
                else
                {
                 window.setTimeout(sc,0);
                }
                });
                return true;
};
/**
* Map array elements
* @param {Function} fun
* @return Function
*/
Array.prototype.map = function(fun)
{
        if(typeof fun!=="function"){return false;}
        var i = 0, l = this.length;
        for(i=0;i<l;i++)
        {
                fun(this[i]);
        }
        return true;
};

ventanamessenger_ajax.asp

Código asp:

Ver original' Nos conectamos a la bd
' Hacemos la consulta
 
set rs = oConn.Execute(SQL)
 
registros = rs.getrows()
rs.Close
Set rs = Nothing
oConn.Close
Set oConn = Nothing
 
TextoMensaje = ""
IF UBound(registros,2) = 0 then
TextoMensaje =  "'De: <a href=autor target=_blank>" & registros(De,0) & "</a><br />Asunto: <a href=mensaje target=_blank>" & registros(Asunto,0) & "</a><br/>Mensaje: " & Mid(registros(Contenido,0),1,80) &"'"
 
ELSE
 
For i = 0 to UBound(registros,2)
If i <> 0 then
TextoMensaje = TextoMensaje & ","
End If
 
If i = 0 then ' es el primero de varios
TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=\'_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\'><a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i+1&");\'>Siguiente &raquo;</a></div>'"
Elseif i < UBound(registros,2) then
'TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\' onclick=\'vm_paginador("&i-1&");\'>&laquo; Anterior</div>&nbsp;&nbsp;&nbsp;<div id=\'btn_vm_paginador\' align=\'center\'  onclick=\'vm_paginador("&i+1&");\'>Siguiente &raquo;</div>'"
TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\'><a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i-1&");\'>&laquo; Anterior</a>&nbsp;&nbsp;&nbsp;<a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i+1&");\'>Siguiente &raquo;</a></div>'"
Else ' es el último
TextoMensaje = TextoMensaje & "'De: <a href=\'autor\' target=\'_blank\'>" & registros(De,i) & "</a><br />Asunto: <a href=\'mensaje\' target=\'_blank\'>" & registros(Asunto,i) & "</a><br/>Mensaje: " & Mid(registros(Contenido,i),1,80) &"<br /><br /><div id=\'btn_vm_paginador\' align=\'center\'><a href=\'javascript:void(0);\' onclick=\'vm_paginador("&i-1&");\'>&laquo; Anterior</a></div>'"
End If
 
Next 'i
END IF
%>
 
<script type="text/javascript">
var msg = new Array(<%=TextoMensaje%>);
var Ventana_Modal = {};
Ventana_Modal.banner = {
 posicion : {
 bajar_pos : '-127',
 subir_pos : '-4'
 }
};
Ventana_Modal.banner.hoja = 'posicion';
// Variables Globales
var vmDivID = 'VentanaTipoMsgr';
var Retraso = 5 * msg.length;
 
 
vm_retraso(Retraso);
 
//--[Funciones]-----------------------------------------------------------------//
 
var btn_vm_cerrar_elem = document.getElementById('btn_vm_cerrar');
btn_vm_cerrar_elem.onclick = function (){
vm_mover(vmDivID,Ventana_Modal.banner[Ventana_Modal.banner.hoja].bajar_pos, "' + msg[0] + '",'bajar');
return false;
}
 
 
function vm_paginador(mensajeID) {
 var soportado = (document.getElementById);
if (!soportado) return;
var elMsg = document.getElementById('CuerpoMsg');
elMsg.innerHTML = msg[mensajeID];
}
 
 
function vm_retraso(seg){
seg = seg || 0;
setTimeout('vm_mover(vmDivID,' + Ventana_Modal.banner[Ventana_Modal.banner.hoja].subir_pos + ', "' + msg[0] + '");',1000 * seg);
setTimeout('vm_mover(vmDivID,' + Ventana_Modal.banner[Ventana_Modal.banner.hoja].bajar_pos + ', "' + msg[0] + '",\'bajar\');',15000 * msg.length);
}
 
var elemento
var alto
var leyenda
function vm_mover(elemID,x,txt,direccion){
elemento = elemID
alto = x
leyenda =  txt
 
var soportado = (document.getElementById);
if (!soportado) return;
var DIVruta = document.getElementById(elemento);
var Cortina = parseInt(DIVruta.style.bottom);
var cabecera = document.getElementById('CabezaMsg');
var texto = document.getElementById('CuerpoMsg');
 
DIVruta.style.display = 'block';
if(direccion == 'bajar'){
 
if(Cortina > x){
Cortina -= 5;
DIVruta.style.bottom = Cortina + 'px';
setTimeout('vm_mover(elemento,alto,leyenda,\'bajar\');',15);
}
}else{
if(Cortina < x){
Cortina += 5;
DIVruta.style.bottom = Cortina + 'px';
cabecera.innerHTML = "Tienes (<span style='color:#FF0000;'><%=UBound(registros,2)+1%></span>) mensajes sin leer";
texto.innerHTML = leyenda;
setTimeout('vm_mover(elemento, alto,leyenda);',15);
}
 }
}
</script>

Suerte

SeaPirates · #5 (**permalink**) 08/09/2009, 07:43

Me puedes explicar un poco como funciona tu script? Por cierto, funciona con cutenews?

America|UNK · #6 (**permalink**) 08/09/2009, 08:58

Tu popup quieres mostrarlo en todas las páginas o solo en donde aparecen las noticias?.
A que le estas llamando nueva noticia, a la última noticia o a la que fue añadido hace 1 ó 3 días?

Adler · #7 (**permalink**) 08/09/2009, 11:15

Cita:

Iniciado por SeaPirates

Me puedes explicar un poco como funciona tu script? Por cierto, funciona con cutenews?

A grandes rasgos se trata de hacer una consulta a la bd via ajax. En la respuesta además de enviar los registros filtrados se envía javascript para poder desplegar y plagar la capa con los datos obtenidos de la bd. Pero lo mejor es que lo pruebes y veras que es sencillo de entender.

Con respecto a si funciona con cutenews, pues no lo se. Pero creo que tu pregunta está mas enfocada a si se puede adaptar a ese sistema y la respuesta continua siendo no los ya que nunca he usado ese sistema

Suerte