Eu prefiro saber como foi feito ou no meu caso fazer a lógica “do zero” e fazer do meu jeito.

Estou disponibilizando uma classe estática que faz Fade in e Fade out de objetos HTML para ser usada, entendida, melhorada e porque não criticada?

Podem Ficar a vontade, testem e quaisquer dúvidas comentem.

Baixe o exemplo:

Fade (ZIP) ou Fade (RAR)

Abs,
Chapooo!

Segue uma classe que a muito tempo queria colocar mas por alguns detalhes não tinha como. É uma classe que serve para redimensionar objs html.

Para testar, baixe o arquivo zipado.

Neste script estou usando uma classe estática Rel onde é util para várias outras coisas.

Baixar o arquivo redimensionar

Bom, até mais!

Abs,
Chapoo

A pouco, desenvolvendo uma nova classe, me deparei com um problema chato.

Seguem as Situações:

Tinha numa classe, no método [this.iniciar] um código que seria executado quando um evento ocorresse, mas ao passar o método para o evento, das duas uma: Ou Conseguia pegar o evento e o escopo era perdido (situação 1) ou tinha o escopo (usando o Delegate) porém não tinha o evento :( (situação 2). Segue abaixo os exemplos:

Situação 1:

...
this.iniciar = function() {
    document.onmousemove = this.verifica;
}

this.verifica = function(e) {
    // Tenho o evento mas não tenho o escopo
}
...

Situação 2:

...
this.iniciar = function() {
    document.onmousemove = Delegate.create(this, this.verifica, Array(''));
}

this.verifica = function(e) {
    // Tenho o escopo mas não tenho o evento
}
...

Consegui resolver o problema da seguinte maneira:

NomeDaClasse = function() {
    with(this) {
        ...
        this.iniciar = function() {
            document.onmousemove = this.verifica;
        }

        this.verifica = function(e) {
            // Tenho o evento
            // Tenho o escopo
            teste(); // Não use o this.teste();
        }

        this.teste = function() {
            alert('Estou no escopo');
        }
        ...
    }
};

Imaginei que usando o with poderia ser uma luz e não acreditei que isso funcionaria até testar!!!

Obs.:
- No exemplo acima, se você usar o [this] dentro do evento, ou seja, dentro do método [this.verifica] você estará no escopo do objeto [document].
- Se você tiver uma função fora da classe com o nome idêntico de algum método da classe não vai dar conflito, porém você não vai acessar a função externa também!

Abs,
Chapooo!

Quando você está programando em Javascript Orientado a Objetos, você pode se deparar com diversos problemas e um deles é a perda de escopo do objeto (this). Uma solução simples é usar a classe Delegate, em poucas palavras ela executa uma função/método no contexto do objeto original.

Segue a classe abaixo:

// No Google...  - Estático
Delegate = {
    versao: "1.0"
}

Delegate.create = function(obj, func, args) {
    f = function() {
        var target = arguments.callee.target;
        var func   = arguments.callee.func;
        var args   = arguments.callee.args;

        return func.apply(target, (args.length < 1 ? arguments : args));
    };

    f.args = (args != undefined && args.length > 0 ? args : new Array());
    f.target = obj;
    f.func = func;

    return f;
}

Outra forma bacana e mais simples que achei:

Delegate = {
	create: function (obj, func, params) {
		var f = function() { return func.apply(obj, params); };

		return f;
	}
}

Exemplo da implementação:

...
this.a = function() {
// Não chame a função this.b() desta forma,
// pois ela executará antes do tempo correto
	setTimeout(Delegate.create(this, this.b, Array('')), 1000);
}

this.b = function() {
	alert(this.c());
}

this.c = function() {
	return 'Olá';
}
...

Essa classe me quebrou vários galhos.

Abs,
Chapoo

Já tinha feito várias POG’s para criar um Lightbox e acabei fazendo uma coisa mais descente e que possa ser facilmente usado.

Vamos a implementação:

Baixe o pacote Lightbox.rar, e inclua os arquivos em sua página.

Nas TAG’s A coloque as seguintes informações nos atributos a seguir:

title = Conteúdo da legenda da foto
rel = CaixaDeLuz
rev = Url da imagem grande

No onload ou após o carregamento do seu código coloque as linhas de JS:

<script type="text/javascript">
    CaixaDeLuz.definirClasses(’NOME_DE_UMA_CLASS‘);
    CaixaDeLuz.definirBotaoFechar(’URL_IMAGEM_FECHAR‘);
    CaixaDeLuz.carrega();
</script>

Os métodos ‘definirClasses‘ e ‘definirBotaoFechar‘ não são obrigatórios, se não forem invocados executarão suas situações padrões.

O que cada um faz…

definirClasses = Define uma classe CSS para os elementos onde pode-se, via CSS ajustar cores, bg’s e etc.
definirBotaoFechar = Define a imagem do ‘close’ da foto, se não for invocado o evento ‘close’ acontecerá quando a foto for clicada.

Bom… É isso!

Obs.: Você poderá usar N vezes em sua página.

Abs,
Chapoo

Já me pediram várias vezes algum script simples para fazer um scroll, então finalmente fiz uma classe para atender esta necessidade.

Fiz uma classe básica, mas vai ajudar quem gostaria de fazer um scroll personalizado e simples.

Segue a implementação:

Baixe o pacote Rolagem.zip

Crie o objeto ‘Rolagem’ passando como parâmetro o nome do objeto onde terá o scroll, exemplo:

<script type="text/javascript">
    rolagem = new Rolagem();
    rolagem.definirCaixaRolagem('STRING_ID_OBJETO' OU document.getElementById('OBJ'));
</script>

E na setas (para cima e para baixo) coloque as funções nos eventos ONMOUSEDOWN, ONMOUSEUP e ONMOUSEOUT como sugere abaixo, veja:

SUBIR TEXTO (Seta para baixo):

    <a href="javascript:;" onmousedown="rolagem.definirDirecao('cima'); rolagem.rolar();" onmouseup="rolagem.parar();" onmouseout="rolagem.parar();">SUBIR</a>

DESCER TEXTO (Seta para cima):

    <a href="javascript:;" onmousedown="rolagem.definirDirecao('baixo'); rolagem.rolar();" onmouseup="rolagem.parar();" onmouseout="rolagem.parar();">DESCER</a>

Bom… é isso!

Abs,

Chapoo