w3Opacity

[JuanHBiscaia]

acredito que muita gente aqui já usou o w3Opacity... estou usando tem pouco tempo, portanto estou com algumas duvidas, como: Como eu faço pra usar seus recursos dentro de uma função js ?

eu tentei, mas n da certo, só to conseguindo usar ele nos eventos dos meus elementos html (onsubmit, onclick, onblur, etc...)

por favor, preciso de ajuda urgente

[babaloricha]

cara depende como você passa o id!

eu tentei com this não deu certo mas passando o id em forma de string rola bunito!

[KaKarotto]

Eu nunca usei W3Opacity, poste seus códigos que fica muito mais fácil de ajudar.

[JuanHBiscaia]

esse é o código do w3Opacity:

/*
    w3Opacity (1.0) - 15/01/2007
    Por Leandro Vieira Pinho - http://leandro.w3invent.com.br
    
    Para informações sobre o w3Opacity viste:
    http://leandro.w3invent.com.br/labs/
    
    Dúvidas, sugestões, bugs?
    http://leandro.w3invent.com.br/labs/forum
*/
var w3Opacity = {
    /**
     * Método que realiza o fadeOut e fadeIn
     * @param strObjId {string} - Nome do atributo ID do objeto que receberá o efeito
     * @param intOpacityStart {number} - Número inicial para o efeito
     * @param intOpacityEnd {number} - Número final para o efeito
     * @param intMillisecond {number} - Número (em milisegundos) para o tempo de duração do efeito
     * @param fnOnFinish {} - Função a ser chamada quando o efeito terminar
     * Exemplos:
     * Não chamar uma função ao terminar o efeito: w3Opacity.fading("obj_id",0,100,400);
     * Chamar uma função ao terminar o efeito: w3Opacity.fading("obj_id",100,0,400,nome_da_funcao);
     */
    fading: function(strObjId,intOpacityStart,intOpacityEnd,intMillisecond,fnOnFinish) {
        var intSpeed = Math.round(intMillisecond / 100);
        var intTimer = 0;
        // Processo para o FadeOut
        if ( intOpacityStart > intOpacityEnd ) {
            for ( i = intOpacityStart; i >= intOpacityEnd; i-- ) {
                if ( intTimer == 100 && typeof(fnOnFinish) != "undefined" ) {
                    setTimeout("w3Opacity.change_opacity('" + strObjId + "'," + i +"," + fnOnFinish + ")",(intTimer * intSpeed));
                } else {
                    setTimeout("w3Opacity.change_opacity('" + strObjId + "'," + i +")",(intTimer * intSpeed));                    
                }
                intTimer++;
            }
        // Processo para o FadeIn
        } else if ( intOpacityStart < intOpacityEnd ) {
            for ( i = intOpacityStart; i <= intOpacityEnd; i++ ) {
                if ( intTimer == 100 && typeof(fnOnFinish) != "undefined" ) {
                    setTimeout("w3Opacity.change_opacity('" + strObjId + "'," + i +"," + fnOnFinish + ")",(intTimer * intSpeed));
                } else {
                    setTimeout("w3Opacity.change_opacity('" + strObjId + "'," + i +")",(intTimer * intSpeed));
                }
                intTimer++;
            }                
        }
    },
    /**
     * Método que verifica a opacidade do objeto e realiza um fadeOut ou fadeIn :)
      * @param strObjId {string} - Nome do atributo ID do objeto que receberá o efeito
     * @param intMillisecond {number} - Número (em milisegundos) para o tempo de duração do efeito
     * Exemplos:
     * w3Opacity.toggle("obj_id",400);
     */
    toggle: function(strObjId,intMillisecond) {
        if ( this.get_opacity(strObjId) < 1 ) {
            // fadeIn
            this.fading(strObjId,0,101,intMillisecond);    
        } else {
            // fadeOut
            this.fading(strObjId,101,0,intMillisecond);
        }
    },
    /**
     * Método que define uma opacidade para o objeto
     * @param strObjId {string} - Nome do atributo ID do objeto que receberá o efeito
     * @param intOpacity {number} - Número inteiro que será o valor da opacidade
     */
    set: function(strObjId,intOpacity) {
        this.change_opacity(strObjId,intOpacity);
    },
    /**
     * Método interno, utilizado para alterar a opacidade do objeto
     */
    change_opacity: function(strObjId,intOpacity,hasFnOnFinish) {
        if (typeof(hasFnOnFinish) != "undefined") {
            hasFnOnFinish();
        }
        var objStyle = this.$(strObjId).style;
        objStyle.opacity = (intOpacity / 101);
        objStyle.MozOpacity = (intOpacity / 101);
        objStyle.KhtmlOpacity = (intOpacity / 101);
        objStyle.filter = "alpha(opacity=" + intOpacity + ")";
    },
    $: function(strObjId) {
        return document.getElementById(strObjId);
    },
    get_style: function(strObjId,strStyleProperty) {
        var objToGetStyle = this.$(strObjId), styleValue;
        // Para o Internet Explorer
        if ( objToGetStyle.currentStyle ) {
            styleValue = objToGetStyle.currentStyle[strStyleProperty];
        // Para o Firefox, Opera, ...
        } else if ( window.getComputedStyle ) {
            styleValue = document.defaultView.getComputedStyle(objToGetStyle,null).getPropertyValue(strStyleProperty);
        }
        return styleValue;
    },
    get_opacity: function(strObjId) {
        var opacity;
        if ( opacity = this.get_style(strObjId,'opacity') ) {
            return parseFloat(opacity);
        }
        if ( opacity = (this.get_style(strObjId,'filter') || '').match(/alpha\(opacity=(.*)\)/) ) {
            if ( opacity[1] ) {
                return parseFloat(opacity[1]) / 100;
            } else {
                return 1.0;
            }
        // Caso não seja aplicado ao objeto um filter... será retornado undefined. Então, considero como o objeto está visível: 100
        } else {
            return 1.0;    
        }
    }
};

eu descobri a forma como se simula o eventos dentro do código... é assim:

function simula_action(){

     var btn1 = document.getElementById('btn1'); // pega o objeto button do form pelo id

     btn1.onclick = function(){
       w3Opacity.fading('div1',100,30,300);
    }
}

window.onload = function(){
       simula_action();
}

o que eu fiz aqui:

1º -> peguei o elemento button por seu id e guardei em uma variavel

2º -> no evento onClick do button que eu peguei ele realiza a function do w3Opacity de fading na div1, o opacity=alpha original é 100 e vai terminar em 30, tudo isso em 300 milisegundos...

3º -> ao carregar a janela (onLoad) ele carrega a função que simula o onclick do button e fica aguardando o usuário executar algo com o button...

é isso... dessa forma da pra simular qualquer evento direto no código js, sem ter que ficar "sujando" o código html com enventos nas tags e tornando a manutenção do seu site mais fácil...

quanto ao w3Opacity eu coloquei o código aqui porque o site oficial ta fora do ar, pelo menos pra mim, quem quiser tentar o acesso procure por w3Opacity no google que vai encontrar de primeira... ou tente acessar:

http://leandro.w3invent.com.br/labs/