@alterebro

Alter Ebro Expanding Modal Window

miércoles, febrero 02, 2005 @13:39

Este es uno de mis primeros scripts, la vieja ventana pop-up expandible. Funciona abriendo gradualmente una nueva ventana del navegador con un iframe en su interior que carga la URL pasada como parámetro a la función.
En el momento de los tests sobre diferentes navegadores (hace más de un año), funciono de forma esperada en Firebird, Internet Explorer 6, K-Meleon y Netscape Navigator 6.2 sobre Windows PC y con ciertos problemas a la hora de redimensionarse en Safari de Mac.

La función necesita de 4 parámetros que son las dimensiones finales en pixeles de ancho y alto que tendra el tamaño final de la ventana (como número entero), la ruta URL de la página a abrir y la cadena con el título que se desea para esta nueva ventana.

// ALTER EBRO EXPANDING MODAL WINDOW by Jorge Moreno [ www.alterebro.com ]
function aeWdw(ancho,alto,pagina,titulo) {
var codigo = "<html><head><title>"+titulo+"</title>\n"+
"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">\n"+
"<meta http-equiv=\"Author\" content=\"Jorge Moreno [ www.AlterEbro.com ]\">\n"+
"<scr"+"ipt language=\"JavaScript\" type=\"text/javascript\">\n"+
"var incrementoX=100;\n"+
"var incrementoY=100;\n"+
"var ancho="+ancho+";\n"+
"var alto="+alto+";\n"+
"function mueveVentana() {\n"+
" var centroX = (screen.width-document.body.offsetWidth)/2;\n"+
" var centroY = (screen.height-document.body.offsetHeight)/2;\n"+
" incrementoX += (ancho - document.body.offsetWidth)/10;\n"+
" incrementoY += (alto - document.body.offsetHeight)/10;\n"+
" window.resizeTo(incrementoX,incrementoY);\n"+
" window.moveTo(centroX,centroY);\n"+
" muevete = window.setTimeout ('mueveVentana();',20);\n"+
" if ((document.body.offsetWidth == ancho) && (document.body.offsetHeight == alto)) {\n"+
" clearTimeout(muevete);\n"+
" }\n"+
" }\n"+
"</scr"+"ipt>\n"+
"<style type=\"text/css\">\n"+
" body { margin: 0px; border: none; }\n"+
" #aeDIV { width: 100%; height: 100%; }\n"+
"</style>\n"+
"</head><body>\n"+
"<div id=\"aeDIV\"><iframe src=\""+pagina+"\" name=\"aeIFrame\" width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe></div>\n"+
"<scr"+"ipt language=\"JavaScript\" type=\"text/javascript\">mueveVentana();</scr"+"ipt>\n"+
"</body></html>";

var izquierda = (screen.width-100)/2;
var arriba = (screen.height-100)/2;

alterEbroWindow = window.open('', '', 'width=100, height=100, top='+arriba+', left='+izquierda+', scrollbars=auto');
alterEbroWindow.document.open();
alterEbroWindow.document.write(codigo);
alterEbroWindow.document.close();
}

Como ejemplo de uso, pongamos que queremos abrir una nueva ventana de 600x400 pixels cargando la página de google, lo podriamos hacer de la siguiente forma:

<!-- HTML -->
<a
href="http://www.google.com"
title="Google Web Search"
onclick="aeWdw(600, 400, this.href, this.title); return false;">
Alter Ebro Expanding Modal Window
</a>

Etiquetas:

0 comentarios

Publicar un comentario

Suscribirse a Enviar comentarios [Atom]

Enlaces a esta entrada:

Crear un enlace