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:

CaixaDeLuz.definirClasses(’NOME_DE_UMA_CLASS‘);
CaixaDeLuz.definirBotaoFechar(’URL_IMAGEM_FECHAR‘);
CaixaDeLuz.carrega();

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.rar

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

rolagem = new Rolagem();
rolagem.definirCaixaRolagem(‘STRING_ID_OBJETO’ OU document.getElementById(’OBJ’));

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):
onmousedown=”rolagem.definirDirecao(’cima’); rolagem.rolar();”
onmouseup=”rolagem.parar();”
onmouseout=”rolagem.parar();“

DESCER TEXTO (Seta para cima):
onmousedown=”rolagem.definirDirecao(’baixo’); rolagem.rolar();”
nmouseup=”rolagem.parar();”
onmouseout=”rolagem.parar();“

Bom… é isso!

Abs,

Chapoo

Mais uma vez estou aqui para compartilhar algumas idéias, desta vez fiz uma classe que foge um pouco do meu dia-a-dia, um tipo de animação em Javascript.

Um amigo precisava fazer um efeito para realçar um objeto e então como qualquer desafio disse que faria e acabou resultando na classe ‘Realce’. Só que como já estava com a mão na massa fiz a classe (Estática) ‘Hexadecimal’ que basicamente converte uma cor hexa (Ex.: FF0000) para decimal (Ex.: 255, 0, 0) e vice-versa, segue a implementação:

Ah… usaremos também a classe estática ‘Delegate’ que disponibilizei no exemplo de Drag anterior.

Baixe o pacote: Realce.rar

Após incluir em seu código as 3 classes você apenas precisa instanciar a classe ‘Realce’ e aplicar os métodos:

r = new Realce();
r.definirObjeto('STRING_ID_OBJETO' OU document.getElementById('OBJ'));
r.definirCorInicial('FF0000');
r.definirCorFinal('FFFF00');
r.realcar();

 

Executanto o script acima o efeito que teremos é o realce da cor definida como Inicial para o ‘FFFFFF’ que é o branco, mas se após aplicar o método ‘definirCorInicial’ você aplicar o outro método da classe ‘definirCorFinal’ definindo outra cor, a animação vai realçar de uma cor para outra.

Espero que tenham gostado…

Abs,
Chapoo

Estes dias precisei passar uma variável para uma outra função e não conseguia se não fosse por variável global. Pois bem, seria muito fácil eu criar uma variável no começo do código e atribuir o valor a ela e depois pegar onde quisesse, porém não tinha acesso ao script principal e tive que dentro de uma função criar uma variável global para que a outra função enxergasse a variável. 

Olhem como fiz:

<script type=”text/javascript”>
	function executaAjax(id) {
		top.novaVariavelGlobal = id;

		…
			objAjax.onreadystatechange = funcaoExecutora;
		…
	}

	function funcaoExecutora() {
		alert(novaVariavelGlobal);
	}

	executaAjax(’id_teste’);
</script>

Notem que quando vou usa-lá não preciso mais do ‘top.’, pois agora ela é global.

Segue um exemplo para testarem:

<script type=”text/javascript”>
	function executa(id) {
		top.novaVariavelGlobal = id;

		document.onkeypress = funcaoExecutora;
	}

	function funcaoExecutora() {
		alert(novaVariavelGlobal);
	}

	executa(’1′);
</script>

É só criar uma página com o script acima e apertar o <ENTER>.

Abs,
Chapoo!

Neste momento que escrevo, o Inter fez um gol com o atacante Nilma (Ex-Corinthians), porém foi anulado um gol legítimo do tricolor…

De volta ao foco…

Vou disponibilizar hoje uma classe que fiz de Drag’n Drop. É muito fácil utilizá-la, porém estou com outras idéias para melhorar e deixar sua implementção mais simples ainda.

Para começar os OBJETOS (DIV, SPAN, ETC) tem que ter o position:absolute, depois siga o exemplo abaixo:

Baixe o arquivo: Drag

<script type=”text/javascript” src=”drag.js”><!–//–></script>
<script type=”text/javascript”>
objDrag = [];

onselectstart = function() { return false; }
ondragstart = function() { return false; }

objDrag['ID1'] = new Drag(); // Para cada obj que deve ser “dragavel”
objDrag['ID2'] = new Drag();
</script>
<div id=”ID1” onmousedown=”objDrag[this.id].definirLayer(this); objDrag[this.id].ligarDrag(event);” onmouseup=”objDrag[this.id].desligarDrag();”><!–//–></div>
<div id=”ID2” onmousedown=”objDrag[this.id].definirLayer(this); objDrag[this.id].ligarDrag(event);” onmouseup=”objDrag[this.id].desligarDrag();”><!–//–></div>

Pronto é isso que precisa fazer para ter objetos com Dran’n Drop.

Obs.: Os div’s acima estão sem conteúdo/css sendo apenas para ilustrar os objetos, use blocos com conteúdos e formatados.

Abs,
Chapoo!

O valor decimal de ? = 63
O valor hexa de & = 26

Ao contrário do que se imagina estas situações são mais comuns do que parece.

Abs,
Chapoo!

Como podem ver (lá no canto inferior direito) o Caineli fez o site para min e ficou muito show, com temas que curto e tal… usou até a caveira do The Punisher! :P

Obrigado Caineli você é o cara!

Abs,

Chapoo!