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.
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“.
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.
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]
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 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 “*~”
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.
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.
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).
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 🙂
Powered by WordPress