Mostrando entradas con la etiqueta ventana emergente. Mostrar todas las entradas
Mostrando entradas con la etiqueta ventana emergente. Mostrar todas las entradas
jueves, 12 de marzo de 2009
Enlazar un vínculo en ventana nueva posicionable y dimensionable
Si habéis observado, en este blog se presentan determinados vínculos a documentos que se cargan en ventanas emergentes nuevas. Es decir, ventanas que no ocupan toda la pantalla y que se pueden configurar, tanto en tamaño como en posición.
¿Cómo se hace esto?
Lo primero que tenemos que tener es lo de siempre: un servidor que nos permita el almacenamiento sin ninguna restricción de nuestros archivos personales. Lo que ya hemos comentado en más de una ocasión para el tema de los archivos .mp3 y .swf.
En esta ocasión para los archivos .doc (entre otros posibles formatos como veremos).
Pasos a seguir:
1.- En la plantilla del blog. En Diseño > Edición de HTML pegamos este código justo debajo de la etiqueta <head>
<script language="'JavaScript'" type="'text/javascript'">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=yes,scrollbars=1,location=0,statusbar=1,status=1,menubar=0,resizable=1,width=500,height=700,left = 0,top = 0');");
}
</script>
Los parámetros width y height hacen referencia al ancho y al alto de la ventana emergente. En este caso están a 500 píxeles de ancho y 700 de alto. Lógicamente son modificables...
Los dos valores siguientes el left y el top están a 0, es decir, la ventana se cargará en el extremo izquierdo superior (coordenadas 0,0). Si quieres modificar la posición, cambia los ceros por otros valores...
2.- Una vez hecho esto, en la entrada correspondiente, al hacer un vínculo al documento tenemos que añadir un fragmento de código que "llame" a esa función javascript que hemos colocado en la plantilla.
El código quedaría así:
<a href="javascript:popUp('http://ladireccionquesea.doc')">el texto que corresponda</a>
He hecho pruebas con nuestro Wikispaces (el servidor que nos proporciona las URLs limpias después de los trucos explicados...) y no funciona del todo bien.
Al menos no con todos los navegadores.
Vamos a poner un ejemplo que sí funciona correctamente. Alojador: servidor educativo, EducaMadrid. El documento original en este caso es un .html pero funciona igual de bien con cualquier otro formato.
Ejemplo 1
Seguimos con Wikispaces. Documento .doc de Word. No funciona bien con todos los navegadores.
Ejemplo 2
Ahora con Wikispaces. Documento .txt. Problema con los caracteres especiales, eñes, tildes...
Ejemplo 3
Ahora con Wikispaces. Documento .odt de OpenOffice.
Ejemplo 4
Ahora con Wikispaces. Documento en .html (página web).
Ejemplo 5
Probando con un documento .pdf alojado en fileDen.
Ejemplo 6
Probando con un documento .odt alojado en fileDen.
Ejemplo 7
Probando con un documento .pdf alojado en Wikispaces.
Ejemplo 8
Y oímos este precioso texto en la voz de Amancio Prada
"Que no se despierte" de Agustín García Calvo por Amancio Prada
Suscribirse a:
Entradas (Atom)
