Preciso estudar sempre: dezembro 2011

sexta-feira, 23 de dezembro de 2011

Manipulando o display em vários browsers

Manipular elementos css com JavaScript em diferentes browsers é uma tarefa que requer pesquisa, pois o IE possui algumas diferenças em relação aos outros browsers. Hoje, será tratado nesse post a manipulação do elemento css "display" usando JavaScript. Para tornar um elemento visível na tela usando o IE, use:

document.getElementById("idaqui").style.display = "block";

Para ocultá-lo use:

document.getElementById("idaqui").style.display = "none";

Esses comandos funcionam perfeitamente no IE mas, na família Firefox, Chrome, Safari e Opera não funcionam tão bem. Para solucionar esse problema usamos:

Para tornar um elemento visível na tela usando o Firefox, Chrome, Safari e Opera:

document.getElementById("idaqui").style.display = "";

Para ocultá-lo use:

document.getElementById("idaqui").style.display = "none";

Com a manipulação dessa propriedade é possível construir layouts dinâmicos que mudam de acordo com a escolha do usuário.

Como descobrir o tamanho de imagens em JavaScript

Trabalhar com pré-carregamento de arquivos na web é um ponto complicado, pois existem diferenças entre os browsers. Por exemplo, o firefox, safari, opera, chrome e o IE (a partir do 7, inclusive) não disponibiliza o caminho completo de um arquivo quando escolhido. O IE 6 possui a particularidade de disponibilizar o path completo de um arquivo mas, como o IE não é mais usado em larga escala não pode ser pego como exemplo. Os navegadores atuais não disponibilizam o caminho completo do arquivo por uma questão de segurança.

Para que possamos entender como podemos realizar o pré-carregamento de arquivos em cache usando JavaScript, vamos criar uma página de exemplo.

pagina-upload.html

<html>
<head>
<script type="text/javascript">
var conteudo = "Tamanho do arquivo: ";
</script>
</head>
<body>
<form action="algumacoisaaqui" method="post" enctype="multipart/form-data">
<input type="file" name="inputfile1" size="70" id="inputfile1" />
<input type="button" name="botaolimpar" id="botaolimpar" value="Remover" title="Remover" onclick="remover()" />
<br/>
<br/>
<input type="button" name="botaocarregar" id="botaocarregar" value="Carregar" title="Carregar" onclick="carregar()" />
<div id="divResultado">

</div>
</form>
</body>
</html>

Essa página possui um campo do tipo file, um botão (botão carregar) para que o pré-carregamento seja feito e um botão para limpar o campo de upload (botão remover). Toda a lógica do pré-carregamento está na função (função carregar) associada ao onclick do botão "Carregar", o botão "Remover" também possui uma função (função remover) associada ao seu evento onclick.

Função carregar

Função remover

function remover(){
var inputFile = document.getElementById("inputfile1");
/* passo false como parametro porque nao quero que os child nodes daquele elemento sejam clonados, como o input nao possui child nodes passo false*/
var inputFileNovo = inputFile.cloneNode(false); //clono o elemento
inputFileNovo.type = "file";
inputFileNovo.value = "";
inputFile.parentNode.replaceChild(inputFileNovo,inputFile); //troco o input antigo pelo novo
document.getElementById("divResultado").innerHTML = "";
}

É possível notar na função carregar que um tratamento diferenciado é feito se o navegador é IE, esse tratamento é feito porque no IE não é possível manipular direto o elemento do DOM, é necessário que um objeto do tipo Image seja criado. Como nesse exemplo estamos lidando com somente um campo, não é perceptível a queda de performance devido a criação do objeto, causando assim gasto de memória mas, se várias instâncias forem criadas e o pré-carregamento feito em cache, será possível notar a lentidão. Conclusão, realizar o pré-carregamento de arquivos em cache no IE é muito mais custoso do que realizar em outro navegador.

sexta-feira, 23 de dezembro de 2011

Manipulando o display em vários browsers

quarta-feira, 21 de dezembro de 2011

Como descobrir o tamanho de imagens em JavaScript