Tag Archives: crossbrowser

Vamos matar o Internet Explorer 6, por favor.

Posted on by

Todo bom desenvolvedor constrói suas aplicações com foco numa solução crossbrowser, ou seja, que funcione no máximo de browsers possíveis, se possível em todos. Mas, todos concordam que lidar com o infame do Internet Explorer 6 é uma *****.

O iMasters brilhantemente lançou uma campanha para eliminar browsers antigos do mercado, entre eles o dito cujo do IE 6. Convido todos desenvolvedores decentes a participarem dessa iniciativa e nos ajudar a matar o Internet Explorer 6, por favor.

Participar da campanha é simples, basta adicionar um pequeno e simples código nos sites de sua responsabilidade que esse código irá detectar o navegador e sua versão. Se detectado que se trata do IE 6, será exibido uma barra convidando o usuário a atualizar seu navegador e ter uma navegação mais segura e nos ajudar, é claro.

Para ajudar na divulgação da campanha e facilitar nosso trabalho hoje e amanhã, inicio agora um Meme onde o objetivo é blogar a respeito da campanha, inserir o código da campanha em seu blog e dizer por que o Internet Explorer 6 deve morrer :D

Convido meus amigos Metzen, Bruno Dulcetti, Japs e Michelazzo para participarem.

Solução para limpar e resgatar o valor default do atributo value de um campo

Posted on by

Criei uma solução super simples e prática com o intuito de limpar e resgatar o valor default do atributo value de um campo de formulário. Observe o script:

/**
 * manager_field_default_value (0.1) - 28/12/2006
 * Leandro Vieira Pinho
 * Localize-me. Blog: [ http://leandro.w3invent.com.br ], E-mail leandro[at]w3invent[dot]com[dot]br
 */
var manager_field_default_value = {
	objFieldId: 'id_do_campo',
	start: function() {
		objField = this.$(this.objFieldId);
		objField.onclick = function() {
			manager_field_default_value.clearDefaultValue();
		}
		objField.onfocus = function() {
			manager_field_default_value.clearDefaultValue();
		}
		objField.onblur = function() {
			manager_field_default_value.backDefaultValue();
		}
	},
	clearDefaultValue: function() {
		if ( this.$(this.objFieldId).value == this.$(this.objFieldId).defaultValue ) {
			this.$(this.objFieldId).value = '';
		}
	},
	backDefaultValue: function() {
		if ( this.$(this.objFieldId).value == '' ) {
			this.$(this.objFieldId).value = this.$(this.objFieldId).defaultValue;
		}
	},
	$: function(strObjId) {
		return document.getElementById(strObjId);
	}
}

Para usá-lo, você precisará informar apenas o atributo ID do campo desejado. E essa informação é atribuída na propriedade objFieldId. No exemplo acima, coloquei como exemplo: id_do_campo. Uma vez configurada tal propriedade, o script saberá com qual campo de formulário ele irá trabalhar.

Feita isso, você precisa apenas chamar o método start() após a página ser carregada – window.onload. O método deve ser chamado assim:

manager_field_default_value.start();

A lógica do script é a seguinte:

Ao clicar no campo de formulário informado ou quando ele receber um foco. Será verificado se o seu valor é igual ao valor atribuído ao atributo value. Caso sim, será chamado o método clearDefaultValue que deixará o campo em branco. Quando o campo perder o foco – onblur – será verificado se o valor está em branco, se tiver voltamos com o valor default do campo :)

Diferenças entre os browsers ao interpretar JavaScript #1

Posted on by

Estou lançando uma série que pretendo manter aqui no blog: Diferença entre browsers ao interpretar JavaScript. Ela terá a simples intenção de arquivar algumas diferença que percebo duramente o meu dia-a-dia de desenvolvimento utilizando tal linguagem. Mas, como não quero manter isso só pra mim, decidir compartilhar e disponibilizar por aqui :)

Vamos ao primeiro exemplo de hoje, o qual me motivou a iniciar esta série. Observe o seguinte código:

// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = objLink.getAttribute('rel');
	// Descobrimos o tipo da varíavel que armazenou o atributo rel do link
	alert('Tipo: ' + typeof(objLinkAttRel));
}

Bom, o código está auto-explicativo (se não o compreendeu, comente). Observe o resultado obtido:

Como você percebeu, somente o Internet Explorer interpreta o tipo da variável como Object String. Então, se você faz um código assim:

...
var objLinkAttRel = objLink.getAttribute('rel');
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
	// Faz alguma coisa
}

Com o intuito de verificar o conteúdo do atributo rel dos links selecionados, e testa somente no Internet Explorer, você verá seu script funcionando perfeitamente. Mas ao testar em outros navegadores – como o Firefox e o Opera – você terá uma mensagem de erro – objLinkAttRel has no properties. Isto por que você está utilizando um método – substring – para trabalhar com Objects Strings. E como eles não interpretam tal variável como Object String, certamente não funcionará.

Então, o que fazer para que tenhamos esse código de forma crossbrowser? Simples, ao selecionar o conteúdo do atributo rel dos links, iremos transformá-lo em um Object String. Para que todos os browsers o interpretam dessa maneira (como Object String). Observe:

// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = new String(objLink.getAttribute('rel')); // Observe: new String()
	if ( objLinkAttRel.substring(0,3) == 'foo' ) {
		// Faz alguma coisa
	}
}
}

Somente. Gosto sempre de trabalhar com vários navegadores abertos e testando tudo ao mesmo tempo, assim já identifico de imediato algumas divergências entre os navegadores e procuro uma alternativa para deixar meus códigos sempre de forma crossbrowser :)