este javascript no me hace fade...

scorpionhack · #1 (**permalink**) 12/02/2009, 15:39

Buenas tengo el siguiente codigo para hacer un lightbox(un poco casero) ...

Código HTML:

<html>
	<head>
		<title>LIGHTBOX EXAMPLE</title>
		<style>
		.black_overlay{
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index:1001;
			-moz-opacity: 0.8;
			opacity:.80;
			filter: alpha(opacity=80);
		}
		.white_content {
			display: none;
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			padding: 16px;
			border: 16px solid orange;
			background-color: white;
			z-index:1002;
			overflow: auto;
		}
	</style>
	</head>
	<body>
		<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>

		<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
		<div id="fade" class="black_overlay"></div>
	</body>
</html>

el codigo va muy bien pero ahora tengo el siguiente codigo para hacerle un fade a los div...

y funciona perfectamente pero no se por que a los div de mi "lightbox" no les hace efecto...

Código:


function set_opacity(div, value) {
    div.style.opacity = value;
    div.style.MozOpacity = value;
    div.style.KhtmlOpacity = value;
    div.style.filter = 'alpha(opacity=' + value*100 + ')';
    div.style.zoom=1;//necesario para Explorer
}
var transicion=function(inicio,fin,segundos){
    var _this=this;
    this.test=0;
    if(_this.intervalo)clearInterval(_this.intervalo);
    if(this.val && Math.abs(fin-_this.val)<0.01)return;
    this.val=!this.val?inicio<1?inicio+.0001:inicio:this.val;
    set_opacity(this, this.val);
    this.pasos=(fin-inicio)/100;
    this.pausa=segundos*10;
    this.intervalo=setInterval(
    function(){
        if(_this.test>99 || Math.abs(fin-_this.val)<0.01){
          clearInterval(_this.intervalo);
        }
        _this.test++;
        //document.getElementById("log").innerHTML=_this.test;
        _this.val=_this.val+_this.pasos;
        if(_this.val<=.01) 
            _this.style.display='none';
        else
            _this.style.display='block';
        set_opacity(_this, _this.val);
    },this.pausa);
}
function ver(){
    var obj=document.getElementById("light");
    transicion.call(obj,0,1,3);
}
function cerrar(){
    var obj=document.getElementById("light");
    transicion.call(obj,1,0,3);
}

muchisimas Gracias

programeitor · #2 (**permalink**) 12/02/2009, 17:03

Cita:

if(_this.intervalo)clearInterval(_this.intervalo);
if(this.val && Math.abs(fin-_this.val)<0.01)return;
this.val=!this.val?inicio<1?inicio+.0001:inicio:th is.val;
set_opacity(this, this.val);
this.pasos=(fin-inicio)/100;
this.pausa=segundos*10;
this.intervalo=setInterval(
function(){
if(_this.test>99 || Math.abs(fin-_this.val)<0.01){
clearInterval(_this.intervalo);

el intervalo se lo aplicas a this ,pero despues lo intentas acceder con _this

Panino5001 · #3 (**permalink**) 12/02/2009, 17:50

No es eso. Para eso está var _this=this;
El problema es que nunca invoca la transición.

programeitor · #4 (**permalink**) 12/02/2009, 18:11

Es cierto que no llama a la funcion ver() en el codigo que ha mostrado, pero aunque lo llamara tampoco iba a tirar ya que _this es una variable local de la funcion transicion, y la igualdad var _this=this se pierde al salir de ella presisamente en this.intervalo=setInterval(function(){aqui _this no existe}

Panino5001 · #5 (**permalink**) 12/02/2009, 18:28

Estás equivocado... Precisamente _this resuelve el problema de la clausura. Fijate: http://www.disegnocentell.com.ar/new...cionSimple.php

scorpionhack · #6 (**permalink**) 13/02/2009, 10:09

Cita:

Iniciado por programeitor

Es cierto que no llama a la funcion ver() en el codigo que ha mostrado, pero aunque lo llamara tampoco iba a tirar ya que _this es una variable local de la funcion transicion, y la igualdad var _this=this se pierde al salir de ella presisamente en this.intervalo=setInterval(function(){aqui _this no existe}

vale aunque en el codigo que puse no llamaba a la funcion era por que l hice corriendo y me equivoque de archivo y coji el que me bajé de internet... pero en mi web si que lo llamaba... el error era por que llamaba a la funcion asi Ver(); con la primera letra en mayuscula...

programeitor · #7 (**permalink**) 13/02/2009, 15:43

Pues si, estaba equivocado en lo referente a _this, siempre pense que las variables locales se perdian al salir de la funcion, he de revisar el tema. Mis disculpas.

Bueno veo que ya se soluciono, tambien yo he salido sabiendo algo mas. Saludos.

Panino5001 · #8 (**permalink**) 13/02/2009, 16:02

Ja, ja, es un asunto medio engañoso: buscá en Google Closures o Clausuras.

programeitor · #9 (**permalink**) 13/02/2009, 17:27

En cuanto a las clausuras no tengo dudas, lo que no entiendo es que _this exista fuera de la funcion en la que fue declarada como variable local, a no ser que el tema esté en que al ser la funcion transicion una variable global y no una "funcion comun", las variables declaradas dentro de esa variable global tambien sean globales., debe ser asi sino no entiendo.

Panino5001 · #10 (**permalink**) 13/02/2009, 17:41

La cosa es así: dentro de la función transición hay otra función, y cuando eso sucede, la función interna comparte las variables locales de la función externa (las toma como si fueran globales). Podría decirse que esa función interna es a la función transición lo que la función transición es a window.

programeitor · #11 (**permalink**) 14/02/2009, 13:08

He estado "investigando" y todo depende de que no se entrecomille la accion del timeout, si se entrecomilla la accion digamos:

function()
{
_this=this
t=1000
setTimeout("alert(_this)",t)
}

devuelve que _this no esta definido, en cambio si la orden es:

setTimeout(function(){alert(_this)},t)

devuelve que _this es un objeto, el objeto this, como en tu script, y todo correcto.

__________________________________________________ __________________

Siguiendo las pruebas ,si se da el alert sin comillas, y fuera de funcion que le abarque:

setTimeout(alert(_this),t)

no hace el timeout y devuelve el objeto this, aunque despues da error de argumento no valido, esto quiere decir que la instruccion dentro del timeout o bien va dentro de una declaracion de funcion anonima o va entrecomillado.

Siguiendo con esta forma erronea ,una curiosidad.
Si intetamos asignar el valor de _this a una variable dentro del timeout

setTimeout(vlr=_this,t)

sigue sin hacer la pausa, pero _this es traspasado a vlr sin lanzar error de argumento no valido como hizo con el alert.

pero si a _this le damos un valor literal, y en el timeout le queremos dar ese valor a otra variable...:

_this="prueba"
setTimeout(vlr=_this,t)

devuelve que prueba no esta definido, asi como si prueba fuera una variable, pero si posteriormente comprobamos el valor de vlr nos devuelve "prueba" correctamente.

Sin embargo si la cadena literal asignada es un numero:

_this="2"

no da error (digamos ,2 no esta definido), sino que vlr contiene el literal "2" adecuadamente, en este caso no toma el literal como una variable.

Y si es un numero en toda regla:

_this=2

devuelve un error en la asignacion de argumento no valido, y el script se para sin posibilidad de averiguar que valor se le dio a vlr.

Espero que esto le valga a alguien para sacarlo de dudas, aunque a mi me ha dejado alguna sin resolver.

Saludos.