Inércia Sensorial

29 de November de 2005

Checkbox e radio com DOM

Filed under: Javascript — inerte @ 16:10

Para criar um checkbox (ou radio) com o Document Object Model, basta fazer:

1
2
3
4
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'name1';
checkbox.id = 'name1';

Para criar um input radio, basta mudar a propriedade type para “radio”.

Para ter o HTML do checkbox:

1
2
3
var div1 = document.createElement('div');
 
div1.appendChild(checkbox);

Bastando usar div1.innerHTML no seu Javascript para mostrar o checkbox.

24 de November de 2005

Tabelas dinâmicas

Filed under: Javascript — inerte @ 18:33

Criar tabelas dinamicamente com o Document Object Model, adicionando e removendo linhas e células, é extremamente fácil. Basicamente envolve a intercalação das funções createElement e appendChild.

Este artigo não seria possível sem a incrível documentação do Mozilla, especialmente “Traversing an HTML Table with JavaScript and DOM Interfaces“.

(more…)

22 de November de 2005

Rollover em linhas de tabelas, clique para marcação

Filed under: Javascript — inerte @ 13:04

Esta pequena função foi feita copiando parte do código encontrado no phpMyAdmin. Eu precisava colorir linhas de tabelas conforme o mouse passava por elas, e colorí-las também quando o usuário clicasse nelas.

No Javascript original do phpMyAdmin, o style com as cores de fundo das células estão dentro do <td>. Além disso, como todas as células tem a mesma cor de fundo, bastava pegar a cor do primeiro <td> e aplicá-la na linha inteira.

Como minhas definições de estilo estão dentro de arquivos .css, tive de mudar a maneira de pegá-las. E como algumas colunas possuíam cores de fundo, e outras não, criei uma matriz para guardar os valores originais. Então quando o usuário passa o mouse em um <tr> com esta função, as cores de fundo definidas no arquivo .css são armazenadas, e recuperadas quando o mouse deixa a linha.

(more…)

16 de November de 2005

Múltiplas classes CSS em um mesmo elemento

Filed under: CSS — inerte @ 20:49

Sim, é possível, e é muito fácil. Para aplicar mais de uma classe em um elemento, basta separar os nomes com espaços, por exemplo:

[html]lorem ipsum[/html]

Reverter a exclusão por svn de um arquivo

Filed under: Programação — inerte @ 20:41

Rodou svn delete arquivo.ext e se arrependeu? O Subversion permite desfazer essa ação. Você pode voltar o arquivo do repositório rodando svn revert arquivo.txt.

O comando find é recursivo

Filed under: Geral — inerte @ 09:08

O find do Linux já procura recursivamente nos diretórios especificados. Eu já sabia mas lembrei hoje (pouco café, dores no estômago), então fica eternizada essa lembrança.

Aconteceu porque precisei achar arquivos de backup em um diretório, que é feito assim:

find -name “*~”

11 de November de 2005

Pré-carregar imagem

Filed under: Javascript — inerte @ 14:16

O pré-carregamento de imagens em Javascript ajuda com troca de imagens, por exemplo nos eventos de clique ou passagem do mouse (onmousedown e onmouseover), pois o visitante não precisará esperar ser carregada a imagem apenas quando o navegador disparar o evento.

O pré-carregamento é feito com o seguinte código (lembre-se de colocar isso dentro de <script> e/ou <head>:

1
2
var imagem = new Image();
imagem.src = "caminho/arquivo.gif";

O código inicia um novo objeto do tipo Image e especifica o atributo scr com o caminho da imagem. Para os mais espertinhos da platéia, sim, isso é o mesmo que:

1
<img src="caminho/arquivo.gif" />

Para cada imagem a ser pré-carregada, você deve iniciar um objeto e especificar o src, duas, três, quatro vezes e assim por diante.

Para facilitar, vale a pena colocar numa matriz todas as imagens que você deseja carregar e apenas dar um laço nela.

1
2
3
4
5
6
7
// Lista do caminho e nome dos arquivos de imagem. Pode ter quantas você quiser :)
imagem_lista = Array('arquivo.gif', 'arquivo2.gif', 'arquivo3.gif');
imagem_qtd = imagem_lista.length;
for (i = 0; i < imagem_qtd; i++) {
    var preload = new Image();
    preload.src = imagem_lista[i];
}

E pronto 🙂 Todas as imagens da matriz imagem_lista serão carregadas pelo navegador quando o script acima rodar.

10 de November de 2005

Esticar uma caixa verticalmente com CSS

Filed under: CSS — inerte @ 16:55

Quando você quer esticar uma caixa via CSS para ocupar todo um espaço vertical, a solução mais óbvia é fazer:

[css].classe {
width:100%;
}[/css]

E funciona na maioria das vezes. Entretanto, quando o doctype está em modo strict, a caixa não esticará para preencher todo o espaço.

Isso acontece porque no modo strict, uma caixa tem o tamanho do conteúdo dela. Para deixá-la ocupar todo o espaço disponível, a “caixa-pai”, ou a que contém a caixa que precisamos esticar, também deve ter height:100%.

Quando nossa caixa está dentro de um <td>, ou <div>, é fácil, basta colocar na caixa-pai o estilo. Mas quando ela está dentro do <body>, é essa tag que deve receber o height:100%, pois o <body> é também uma “caixa”.

[css]body {
height:100%;
}[/css]

E pronto! Esteja dentro do <body> ou dos tipos mais comuns de caixas, você pode esticá-la para ocupar todo o espaço disponível na tela.

09 de November de 2005

Posições vertical e horizontal de um elemento

Filed under: Javascript — inerte @ 17:57

Depois de penar por uma hora para descobrir uma maneira multi-plataforma de recuperar as posições vertical e horizontal de um objeto na tela, achei uma solução.

Multi-plataforma no sentido que testei no Firefox 1.0.7, IE 6 e Opera 8.5 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function pegarPosicaoX(objeto)
{
    var atual_left = 0;
    if (objeto.offsetParent) {
        while (objeto.offsetParent) {
            atual_left += objeto.offsetLeft
            objeto = objeto.offsetParent;
        }
    }
    return atual_left;
}
 
function pegarPosicaoY(objeto)
{
    var atual_top = 0;
    if (objeto.offsetParent) {
        while (objeto.offsetParent) {
            atual_top += objeto.offsetTop
            objeto = objeto.offsetParent;
        }
    }
    return atual_top;
}

Para usar, supondo que temos um objeto com um id=”exemplo” na página, descobrimos a posição dele fazendo:

1
2
3
elemento = document.getElementById('exemplo');
x = pegarPosicaoX(elemento);
y = pegarPosicaoY(elemento);

Em um próximo post mostrarei porque cargas-da-água precisei descobrir a posição de um elemento (no meu caso, foi uma imagem).

07 de November de 2005

Como usar saquinho de gasolina

Filed under: Geral — inerte @ 23:26

Pois hoje acabou a gasolina, e quando fui dar a partida no carro, apenas um leve ronco do motor e nada dele sair do lugar.

Com o Rafael, I(g)nácio, Thiago e o Fi, fui até o posto. Oito reais por três litros de gasolina, mais um real pelo saquinho, voltamos ao carro. Virei o saquinho e comecei a despejar o combustível. Estava indo tão devagar… Foi aí que o Rafael teve a idéia de usar uma revista como funil.

E oh! Funcionou… uma Veja São Paulo dobrada e a gasolina pode fluir rapidamente ao tanque. O que demoraria 20 minutos foi feito em 3! Fica aí a dica 🙂

Older Posts »

Powered by WordPress