Subscribe:

martes, 9 de marzo de 2010

Ventana flotante


Cada cierto tiempo maka ira poniendo aqui en el blog codigos para sus paginas o blogs que podrian mejorar la eficiencia y/o la apariencia.

Para hoy maka pondra como crear una ventana flotante como la que tiene la pagina en la parte superior, esta ventana flotante puede arrastrarse por toda la pagina lo que puede su util para ver toda la pagina sin perder la ventana flotante, dentro de la ventana puede poner lo que desee, reproductores de audio, chats, avisos o lo que quiera.


para agregar un gadget en su blog hay que ir a Personalizar > Diseño > Elementos de la pagina, donde se ve un esquema de la pagina.


Ahora se agrega un gadget donde dice "Añadir un gadget".


Aparece una lista de gadgets para agregar, debe elegir el que dice HTML/Javascript para agregar gadgets personalizados.


Ahora se ve una ventana donde aparecen 2 entradas de texto: "Titulo" y "Contenido", es importante no escribir un titulo, de esa forma no ocupara espacio.

donde dice contenido pondremos el codigo, primero abra una tiqueta de javascript asi:

<script languaje="javascript">

//ahora debajo de eso, para capturar el mouse dependiendo de cada navegador web se usa el siguiente codigo:

if (document.layers) { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} else { // Netcsape 6
    document.onmousemove = captureMousePosition;
}

//Luego de eso, declaramos algunas variables que usaremos mas adelante que serviran para mover el cuadro

xclick = 0;
yclick = 0;
curx = 0;
cury = 0;
moving = 0;
xMousePos = 0;
yMousePos = 0;
xMousePosMax = 0;
yMousePosMax = 0;

//La siguiente funcion captura la posicion del mouse

function captureMousePosition(e) {
    if (document.layers) {
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    } else if (document.all) {
        xMousePos = window.event.x+document.body.scrollLeft;
        yMousePos = window.event.y+document.body.scrollTop;
        xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
        yMousePosMax = document.body.clientHeight+document.body.scrollTop;
    } else {
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    }
    if(moving){ move(); }
}

//La siguiente funcion indica la pocicion del mouse al hacer click en el cuadro para moverlo

function startmove(){
    if(moving==0){
        xclick=xMousePos;
        yclick=yMousePos;
        curx=parseInt(document.getElementById('floatwin').style.left);
        cury=parseInt(document.getElementById('floatwin').style.top);
        moving=1;
    }
}

//La siguiente funcion indica el cambio de posicion y lo mueve a esa posicion

function move(){
    wid=curx + xMousePos - xclick;
    document.getElementById('floatwin').style.left=wid + 'px';
    wid=cury + yMousePos - yclick;
    document.getElementById('floatwin').style.top=wid + 'px';
}

//Terminado todo el bloque de script solo falta cerrarlo

</script>

Ahora hay que poner la tabla en si, ya tiene todo lo necesario para funcionar, solo hay que hacerla con las funciones del script:

<table id="floatwin" style="position:absolute; left:800px; top:20px;" cellspacing="0">
<tr><td width="150px" bgcolor="#0f9404" onmouseover="document.body.style.cursor='move'"  onmouseout="document.body.style.cursor='auto'" onmousedown="startmove(); document.getElementById('floatwin').style.opacity=0.5;" onmouseup="moving=0; document.getElementById('floatwin').style.opacity=1;">
<h3>Ventana flotante</h3></td>
<td width="50" bgcolor="#0f9404" align="right"><a onclick="document.getElementById('floatwin').style.visibility='hidden';">X</a></td></tr>
<tr><td width="200" bgcolor="#FFFFFF" colspan="2">Ponga el contenido aqui</td></tr>
</table>

Con esto la tabla esta creada y funcional, puede modificarse los atributos "left" y "top" para que aparezca en distintas pociciones, los atributos "width" si se quiere otro ancho, los atributos "bgcolor" si se desea otro color para la tabla, los atributos "opacity" si se quiere cambiar la transparencia (entre 0 y 1).

Y listo, ya esta su ventana flotante!

Blogged with the Flock Browser

2 comentarios:

jucavago dijo...

Excelente pero no se cierra... podrias chekearlo pliss

maka dijo...

Ha sido probado y ha funcionado, si quiere deje la dirección de su blog o página para revisar.

Publicar un comentario