JMiur [E]

Prototype Window Class (PWC) es una librería que permite generar ventanas de alerta de muchas formas diferentes. Requiere de Prototype y es bastante pesada (64KB) pero es una opción si se hace un uso intesivo de estas cosas ya que no sólo admite generar ventanas standard sino también abrir direcciones URL, crear cajas de dialogo o login e incluso usar Ajax.

Mostrar ejemplos es bastante complicado de hacer ya que aquí están funcioanando otros scripts pero, su uso es relativamente sencillo y la página del autor tiene abundante documentación al respecto. Si descargamos el ZIP que ofrecen, allí nos encontraremos con muchas más cosas, incluyendo ejemplos diversos, distintos temas que pueden usarse para personalizar el CSS y una explicación detallada de cada función.

Básicamente, necesitamos Prototype, el script window.js y uno de los archivos CSS (default.css es el más simple y con el que conviene empezar). Todo eso, lo agregamos antes de </head>:
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;prototype&quot;, &quot;1.6.1.0&quot;);
</script>
<script type='text/javascript' src='URL_window.js'>&jt;/script>
<link href='URL_default.css' rel='stylesheet" type='text/css' />
El CSS, como siempre, podemos enlazarlo o agregarlo directamente:
<style type='text/css' >
... y aquí colocamos el contenido del archivo ...
</style>
Para crear esas ventanas también utilizamos JavaScript; algo así, crearía una ventana sencilla:
<script>
win = new Window({className: "dialog", title: "UN EJEMPLO", width:200, height:150, destroyOnClose: true, resizable: true, recenterAuto:false});
win.getContent().update("<h1>MI EJEMPLO</h1>");
win.showCenter();
&jt;/script>
Una serie de scripts extras nos permiten ampliar las posibilidades:
  • window_effects.js agrega efectos especiales a las ventanas
  • window_ext.js permite manejar cookies
  • tooltip.js permite agregarle funciones para crear tooltips (obviamente)
  • debug.js y extended_debug.js son extensiones interesantes para desarrolladores




Algo similar pero bastante más simple es el script llamado DHTML Popup Window ya que es mucho más liviano (8KB) y no requiere ninguna librería extra. Descargamos el demo desde la página del autor y allí nos encontraremos con el script llamado popup-window.js y el CSS básico llamado sample.css.

También los agregamos antes de </head>:
<script type='text/javascript' src='URL_popup-window.js'></script>
<style type='text/css' >
... y aquí colocamos el contenido del archivo CSS ...
</style>
Lo usamos en un enlace, agregando la llamada al evento onclick:
<a href="javascript:void(0);" onclick="popup_show('idDIV', 'idDRAG', 'idEXIT', 'posicion', X, Y, 'idREL');"> CLICK </a>
donde:

idDIV es el nombre del elemento oculto donde agregaremos el contenido a mostrar
idDRAG es el nombre del elemento que usaremos para arrastrar la ventana
idEXIT es el nombre del elemento que usaremos para cerrar la ventana
posicion es uno de estos valores: element, element-right, element-bottom, mouse, screen-top-left, screen-center, screen-bottom-right
X, Y son la distancia relativa si se posicionan respecto de otro elemento

Un ejemplo:
<!-- el enlace -->
<a href="javascript:void(0);" onclick="popup_show('popupDEMO', 'popupdragDEMO', 'popupexitDEMO', 'screen-center', 0, 0);"> abrir pop-up </a>

<!-- el contenido oculto -->
<div id="popupDEMO" class="sample_popup" style="display: none;">
<div id="popupdragDEMO" class="menu_form_header">
<img id="popupexitDEMO" class="menu_form_exit" src="URL_unaimagen" />
</div>
<div class="menu_form_body">
... el contenido a mostrar ...
</div>
</div>

21 comentarios:

José GDF  

Mi pregunta es sobre el segundo método, ya que el primero no lo voy a usar, al tener JQuery. En el evento onclick hay que poner la id del elemento oculto, como dices: "idDIV es el nombre del elemento oculto donde agregaremos el contenido a mostrar". ¿Quiere decir eso que si fallara el script o el ususario tuviera JavaScript desactivado, se vería ese elemento oculto?

Responder
Graciela  

Hoy es lunes, qué noticia ;)
vos crees que me metería en semejante lío, no no Señor Jmiur usted equivoca, necesito paz en la plantilla y los pop-up PUM PARA ARRIBA me resultan molestos -pobrecitos!- :P

Responder
JMiur  

José GDF:
Si, así es pero, son detalles que no pueden tenerse en cuenta. Por supuesto no puede usarse JavaScript o CSS para ahregar información sensible, passwords, etc. No es necesario que "falle" algo, cualquiera puede deshabilitar los scripts y los estilos desde el mismo navegador, mirar el código fuente o utilizar herramientas como Firebug para "ver" algo oculto.

Graciela:
Hoy es lunes, eso es verdad :D

Responder
Lagarto  

Hola Jmiur, paso a avisarte que tu enlaze de descarga del DHTML Popup Window esta mal ya que creo copiaste la ruta de la imagen, bueno solo te paso el dato, exelente esta me servira muy bien.

Responder
ymmot  

:-) ... buenos dias, tardes, noches.

Sobre el segundo metodo "DHTML Popup Window",... que ya mencione en uno de los comentarios de:

http://vagabundia.blogspot.com/2008/05/simulando-ventanas-de-alerta.html

... teneis un ejemplo funcionando en la pagina que puse en dicho comentario,... mirar el "codigo fuente",... ya que tengo costumbre de documentarlo e igual os da mas ideas.

Ando falto de tiempo y me volvi algo perezoso para publicar "codigo blogger",... asi que me alegra que JMiur haya escrito esta entrada mencionando esa posibilidad.

Salu2, ymmot ;-)

Responder
Adriana Paoletta  

Mi blog no se de que forma genera pop ups de distintas publicidades :X.Cómo puedo hacer para eliminarlos?
Gracias
Adriana

Responder
JMiur  

Adriana:
El problema es el contador de miarroba que está en la sidebar dentro de DIRECTORIOS DE BLOGS. Deberías cambairlo ya que todos los contadores de miarroba agregan pop-ups con publicidad. Una vez eliminado el script, borra la caché del navegador.

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

holas, quiero saber porque mi blog genera muchos pop-ups de publicidades que no eh colocado y como hago para eliminarlos?, y tambien porque demora algo en cargarse mi página.

Muchas gracias

Responder
JMiur  

Lo mas probable es que los pop-ups sean generado por el uso de las estadísticas de Motigo ya que ese servicio, incluye publicidad.

La demora es provocada por la gran cantidad de gadgets que se cargan. Algunos scripts muestran mensajes extraños:

"La página web en flowkaleta.iespana.es ha sido informada como una página de ataque y ha sido bloqueada según sus preferencias de seguridad."

http://flowkaleta.iespana.es/chica_flowkaleta/files/tabber.js
http://flowkaleta.iespana.es/chica_flowkaleta/files/swfobject.js
http://flowkaleta.iespana.es/chica_flowkaleta/files/swfobject_002.js
http://flowkaleta.iespana.es/chica_flowkaleta/files/democracy.js
http://flowkaleta.iespana.es/chica_flowkaleta/files/highslide.js

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

osea lo que tengo que hacer es quitar las estadisticas de Motigo y los archivos alojados en iespana.
Te hago un listado para que me digas k mas puedo borrar si no es mucha molestia :$ :

ademails
whos.amung.us
geovisite.com
Histats
page rank
technorati
feedburner
alexa o alguno que tu consideres ineseraio.

y que consejo me darias para que mi web carge mas rapido?
borrar los script que mas señalado o optimizar mas las imagenes??
tambien la posibilidad de poner menos cantidad de entradas en la home?
o algun script que te permita cargar la web rapido??

Gracias por tus aportes y ayuda y consejo al que te lo necesite, espero su respuesta.

Responder
JMiur  

Para eliminar los pop-ups debes quitar todo lo que sea de Motigo.

Yo no puedo decirte que es necesario o innecesario, esa es una opinión subjetiva así que cualquier cosa que diga es discutible. Ahi veo varias cosas que son estadísiticas, en lo personal, las considero irrelevantes pero, mucho más pesado que eso es todo lo que tenga que ver con video, chat, etc.

Todo lo que has dicho es correcto y sirve para aumentar la velocidad: disminuir la cantidad de entradas, eliminar servicios innecesarios, etc

Responder
Viridiana V.  

Muchas gracias! funciona super bien!

Solo como dato, hay que cambiarle la variable de la imagen por la que nosotros necesitemos y listo.

Responder
L  

Hola JMiur ..Gracias por el post muy uitil.
ya instale el DHTML Popup pero necesito ayuda porfavor..
con la posicion y alineacion del pop-up y la verdad es que no se mucho de esto...asi que hice una captura para explicarme ¬¬" :) https://lh5.googleusercontent.com/-rO2p9AtlOr0/Tp5neXXVAWI/AAAAAAAAAqU/DvSgP2JbEQM/s912/Captura.png
llevo tiempo queriendo añadir un chat asi, pero nada que salia probe por otros medios pero no me salia..jaja
igual Muchas gracias por el post y gracias de antemano

Responder
JMiur  

Tendría que ver qué valores usas para definir la posición,no recuerdo con exactitud el método pero depende de dos datos:

posicion que puede ser element, element-right, element-bottom, mouse, screen-top-left, screen-center, screen-bottom-right

X, Y que es la distancia relativa si se posiciona respecto de otro elemento

Como te dije, no sé que valores estas usando.

Responder
L  

Gracias por la respuesta JMiur
la verdad es que no se cuales son los valores que mencionas
pero aqui esta mi plantilla :D ojala te sirva
https://sites.google.com/site/ecuasagas/archivador/MiPlantilla.xml
otra vez ..Gracias!!

Responder
JMiur  

Pero alli yo no veo que hayas agregado nada de todo esto, no esta es script ni tu ejemplo.

Responder
L  

JMiur gracias por tu respuesta y...lo siento me habia equivocado de plantilla y ademas no le habia hecho unos ajustes y mas pero ahora si esta: https://sites.google.com/site/ecuasagas/archivador/MiPlantilla.xml
ya puse el enlace para el pop-up en un gadget este el codigo que use:
https://sites.google.com/site/ecuasagas/archivador/Gadget-chat.txt
y como te habia mencionado antes..como hago para que se mantenga en su posicion al hacer scroll y para alinearlo asi:
https://sites.google.com/site/ecuasagas/archivador/Captura.png
Y como siempre Gracias JMiur x tu gran ayuda

Responder
JMiur  

Tendría que verlo funcionando online, caso contrario, tendría que instalar la plantilla etc etc.

Responder
L  

perdon otra vez :)
este es mi blog
http://ecua-sagas.blogspot.com/

Responder
JMiur  

Pués no sé. Lo he mirado y no veo forma de resolver el tema. En mi monitor, el pop-up se ve raro y posicionado muy a la derecha de la ventana del monitor. Podría ser debido a que el enlace que tiene position fixed y el div oculto, estén el el mismo widget; puede ser que colocándolos en widgets diferentes, se pueda controla mejor la posición.

Responder
L  

si ya me lo imaginaba ¬¬"
pero igual gracias ya cualquier rato lo usare :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR