Ventanas flotantes
Estoy interesado en la manera de hacer ventanas flotantes para mostrar información adicional como imagenes o texto, pero necesito saber como se maneja y como se coloca las coordenadas para ubicar a dicha ventana flotante.
1 respuesta
Respuesta
1
Kamus te envio un ejemplo de ventanas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ventanas ATTE. AZTEKASILEX</title>
<script type="text/javascript">
function wreporte(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=1,scrollbars=1,location=0,statusbar=1,menubar=1,resizable=1,width=600,height=600,left = 200,top = 25');");
/*Barra herraminetas, scroll, ubicacion, barrade estado, bara menu, ajustable, ancho ventana, alto ventana, posicion izq, posicion superiror
NOTA: PARA HABILITAR (1) Y DESHABILITAR (0)*/
}
function wchic(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=500,left = 270,top = 150');");
}
</script>
</head>
<body>
<p><a href="javascript:wchic('http://www.google.com')">Link Ventana 1 </a></p>
<p><a href="javascript:wreporte('http://www.google.com')">Link Ventana 2 </a></p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ventanas ATTE. AZTEKASILEX</title>
<script type="text/javascript">
function wreporte(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=1,scrollbars=1,location=0,statusbar=1,menubar=1,resizable=1,width=600,height=600,left = 200,top = 25');");
/*Barra herraminetas, scroll, ubicacion, barrade estado, bara menu, ajustable, ancho ventana, alto ventana, posicion izq, posicion superiror
NOTA: PARA HABILITAR (1) Y DESHABILITAR (0)*/
}
function wchic(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=500,left = 270,top = 150');");
}
</script>
</head>
<body>
<p><a href="javascript:wchic('http://www.google.com')">Link Ventana 1 </a></p>
<p><a href="javascript:wreporte('http://www.google.com')">Link Ventana 2 </a></p>
</body>
</html>
Saludos
Estuve leyendo tu codigo, pero no es lo que busco así que vuelvo a planteartela idea con más detalle.
Quiero crear una ventana flotante en la misma página abierta, es una pequeña ventana que he visto, pero no se si está hecha en JavaScript, Flash o DHTML; no es una nueva ventana de explorador como en le codigo que tu me muestras.
Mi idea es parecida a la que aparece en www.bombonazo.com.
Además, quisiera que me ayudes con documentacion de JavaScript, ya que desconozco los parametros que aceptan las funciones como open(....) que me has mostrado en tu ejemplo y por ello me doy cuenta que conoces bastante de este lenguaje.
Espero me ayudes con estos problemitas y te agradezco por tu tiempo
Estuve leyendo tu codigo, pero no es lo que busco así que vuelvo a planteartela idea con más detalle.
Quiero crear una ventana flotante en la misma página abierta, es una pequeña ventana que he visto, pero no se si está hecha en JavaScript, Flash o DHTML; no es una nueva ventana de explorador como en le codigo que tu me muestras.
Mi idea es parecida a la que aparece en www.bombonazo.com.
Además, quisiera que me ayudes con documentacion de JavaScript, ya que desconozco los parametros que aceptan las funciones como open(....) que me has mostrado en tu ejemplo y por ello me doy cuenta que conoces bastante de este lenguaje.
Espero me ayudes con estos problemitas y te agradezco por tu tiempo
Haber alli te va
Codigo de html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script language="javascript" src="banners.js?aff=1&tipo=13"></script>
</head>
<body>
</body>
</html>
------------------------------
CODIGO DE BANNERS.JS
function closeDiv() {
document.getElementById('floatLayer').style.left = "-1000";
return false;
}
window.onerror = null;
var topMargin = 150;
var slideTime = 2500;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
function layerObject(id,left) {
if (ns6) {
this.obj = document.getElementById(id).style;
this.obj.left = left;
return this.obj;
}
else if(ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
return this.obj;
}
else if(ns4) {
this.obj = document.layers[id];
this.obj.left = left;
return this.obj;
}
}
function layerSetup() {
floatLyr = new layerObject('floatLayer', pageWidth * .5);
window.setInterval("main()", 10)
}
function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}
function main() {
if (ns4) {
this.currentY = document.layers["floatLayer"].top;
this.scrollTop = window.pageYOffset;
mainTrigger();
}
else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}
}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin;
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY;
floatStart();
}
animator();
}
}
function floatStart() {
var now = new Date();
this.A = this.targetY - this.currentY;
this.B = Math.PI / ( 2 * this.slideTime );
this.C = now.getTime();
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
this.A = this.A > 0 ? this.findHt : -this.findHt;
}
else {
this.D = this.currentY;
}
}
function animator() {
var now = new Date();
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
newY = Math.round(newY);
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )document.all.floatLayer.style.pixelTop = newY;
if ( ns4 )document.layers["floatLayer"].top = newY;
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px";
}
}
function start() {
if(ns6||ns4) {
pageWidth = innerWidth;
pageHeight = innerHeight;
layerSetup();
floatObject();
}
else if(ie4) {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
layerSetup();
floatObject();
}
}
document.write('<DIV id=floatLayer style="LEFT: -1000px; WIDTH: 200px; POSITION: absolute; TOP: 3px; HEIGHT: 140px; BACKGROUND-COLOR: #cccccc">');
document.write('<table border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">');
document.write('<tr><td border="1" align="right" bgcolor="#ffffff" colspan="4"><font size="1" face="Verdana" color="#000000">Cerrar</font><A onclick="return closeDiv()" href="http://www.google.com" target="_blank"><FONT size="1" face="Verdana" color="#000000">[X]</FONT></A></td></tr>');
document.write('<tr><td border="1" align="center" bgcolor="#ffffff" colspan="4"><a href="http://www.google.com" target="_blank"><img src=atencion.png alt="Click Aquí" border="0"></a></td></tr>');
document.write('</table></DIV>');
start();
Codigo de html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script language="javascript" src="banners.js?aff=1&tipo=13"></script>
</head>
<body>
</body>
</html>
------------------------------
CODIGO DE BANNERS.JS
function closeDiv() {
document.getElementById('floatLayer').style.left = "-1000";
return false;
}
window.onerror = null;
var topMargin = 150;
var slideTime = 2500;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
function layerObject(id,left) {
if (ns6) {
this.obj = document.getElementById(id).style;
this.obj.left = left;
return this.obj;
}
else if(ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
return this.obj;
}
else if(ns4) {
this.obj = document.layers[id];
this.obj.left = left;
return this.obj;
}
}
function layerSetup() {
floatLyr = new layerObject('floatLayer', pageWidth * .5);
window.setInterval("main()", 10)
}
function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}
function main() {
if (ns4) {
this.currentY = document.layers["floatLayer"].top;
this.scrollTop = window.pageYOffset;
mainTrigger();
}
else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}
}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin;
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY;
floatStart();
}
animator();
}
}
function floatStart() {
var now = new Date();
this.A = this.targetY - this.currentY;
this.B = Math.PI / ( 2 * this.slideTime );
this.C = now.getTime();
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
this.A = this.A > 0 ? this.findHt : -this.findHt;
}
else {
this.D = this.currentY;
}
}
function animator() {
var now = new Date();
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
newY = Math.round(newY);
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )document.all.floatLayer.style.pixelTop = newY;
if ( ns4 )document.layers["floatLayer"].top = newY;
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px";
}
}
function start() {
if(ns6||ns4) {
pageWidth = innerWidth;
pageHeight = innerHeight;
layerSetup();
floatObject();
}
else if(ie4) {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
layerSetup();
floatObject();
}
}
document.write('<DIV id=floatLayer style="LEFT: -1000px; WIDTH: 200px; POSITION: absolute; TOP: 3px; HEIGHT: 140px; BACKGROUND-COLOR: #cccccc">');
document.write('<table border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">');
document.write('<tr><td border="1" align="right" bgcolor="#ffffff" colspan="4"><font size="1" face="Verdana" color="#000000">Cerrar</font><A onclick="return closeDiv()" href="http://www.google.com" target="_blank"><FONT size="1" face="Verdana" color="#000000">[X]</FONT></A></td></tr>');
document.write('<tr><td border="1" align="center" bgcolor="#ffffff" colspan="4"><a href="http://www.google.com" target="_blank"><img src=atencion.png alt="Click Aquí" border="0"></a></td></tr>');
document.write('</table></DIV>');
start();
Saludos nuevamente
Ya he revisado el codigo a profundidad y está muy interesante aunque un poco complejo ya que desconozco JavaScript a profundidad.
Quiero agradecerte por el codigo y pedirte un poquito mas de ayuda con JavaScript, talvez con algun archivo o links para encontrar la documentación.
Ya he revisado el codigo a profundidad y está muy interesante aunque un poco complejo ya que desconozco JavaScript a profundidad.
Quiero agradecerte por el codigo y pedirte un poquito mas de ayuda con JavaScript, talvez con algun archivo o links para encontrar la documentación.
Gracias, ha sido una excelente respuesta
http://www.webestilo.com/
www.desarrolloweb.com
Mira el codigo que te mande es el exacto que ocupan en la pagina que me diste si es un poco complejo pero si lo ves a fondo es facil de entender tu solo cambiarias ancho y alto de venta, imagen y ruta url
www.desarrolloweb.com
Mira el codigo que te mande es el exacto que ocupan en la pagina que me diste si es un poco complejo pero si lo ves a fondo es facil de entender tu solo cambiarias ancho y alto de venta, imagen y ruta url