Pinceladas da Web » JavaScript

CSS3 Columns & jQuery Plugins

Pedro Rogério — Thu, 18 Mar 2010 12:02:22 +0000

Nesse tutorial você irá aprender a trabalhar com o módulo column das CSS3 e a como desenvolver plugins para jQuery:

CSS3 Columns & jQuery Plugins

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Validação de formulários – De quem é a responsabilidade?

Pedro Rogério — Fri, 12 Mar 2010 12:46:54 +0000

De quem é a responsabilidade de validar um formulário? Do desenvolvedor front-end ou do programador? A sim, vocês preferem tirar no cara ou coroa.

A um tempo atrás fui questionado sobre isso e então resolvi fazer um post sobre o assunto para saber a opinião de vocês. Então, imaginem um formulário, simples de cadastro por exemplo, com alguns campos obrigatórios como Nome, Email, CPF, etc. Na sua opinião, quem deve efetuar a validação desses dados é somente o desenvolvedor front-end através de JavaScript, ou ele deve deixar isso de lado e a validação deve ser toda feita do lado servidor?

A minha opinião é a seguinte, a validação deve ser efetuada do lado cliente e do lado servidor, muitos desenvolvedores na maioria das vezes não estão nem aí pra isso e só querem saber da validação do lado cliente.

Sabe por que digo que a validação deve ser feita também do lador servidor, leve em consideração que o JavaScript roda do lado cliente, portanto, pode em algum momento falhar e você terá salvo dados inconsistentes em seu banco de dados. E você, qual sua opinião?

Validação de formulários – De quem é a responsabilidade?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Help do jQuery 1.4 em formato .chm

Pedro Rogério — Mon, 08 Mar 2010 12:15:20 +0000

Arquivos do tipo .chm são arquivos de ajuda do Windows semelhantes aos .hlp, porém são compilados utilizando fontes .html. Se você buscava até agora uma referência de consulta rápida para o Framework jQuery, está aí a solução, ótimo para aquelas horas em que você precisa consultar a ajuda do jQuery está sem internet. Se você utiliza Windows, basta baixar o arquivo, descomprimir o mesmo e utilizá-lo.

Caso você abra o arquivo e receba um aviso de página não encontrada ou algo do tipo, efetue os seguintes passos:

Clique com o botão direito do mouse no arquivo CHM e clique em Propriedades.
Clique em Desbloquear.
Clique duas vezes no arquivo .chm para abrí-lo.

Maiores informações você pode ver no site da Microsoft.

Usuários de Linux

Para visualizar arquivos .chm no Linux você vai precisar de um programa chamado xchm, para instalá-lo no Ubuntu, por exemplo, basta executar o seguinte comando:

sudo apt-get install xchm

Usuários de MAC OS

Os usuários de MAC OSX devem ter o programa Chmox instalado para visualizar arquivos .chm no MAC OSX.

Todos os créditos do arquivo são do site charupload por ter compilado o mesmo.

Help do jQuery 1.4 em formato .chm

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

JavaScript Tabs sem Framework ou Plugin

Pedro Rogério — Wed, 13 Jan 2010 14:03:23 +0000

Com a popularização dos Frameworks JavaScript fica a cada dia mais difícil você encontar alguma coisa na web desenvolvida com puro JavaScript. Desenvolver um sistema de Tabs com a utilização de jQuery é muito simples, mas as vezes pode ser desnecessário você utilizar tanto JavaScript para fazer simples tabs. Foi pensando nisso que resolvi efetuar a tradução do artigo do site Elated, onde ele ensina de uma forma muito simples a desenvolver um sistema de Tabs com puro JavaScript.

Criação do HTML para nossas abas

O HTML para as tabs e conteúdo é muito simples. Você armazena o conteúdo de cada tab dentro de um elemento div com uma classe chamada tabContent e um id exclusivo para referência. Aqui está como exemplo o conteúdo da primeira de 3 tabs:


  About JavaScript tabs
  
    JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.
    The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.

As tabs são simplesmente links dentro de uma lista desordenada:


  About JavaScript tabs
  Advantages of tabs
  Using tabs

Você deve definir que o ul tenha o id “tabs” para que o código JavaScript possa localizá-lo. Cada link dentro da lista de links faz referência a sua div conteúdo (“about”, “advantages”, e “usage”). Uma vez que eles são links padrão do HTML, também funcionam com o JavaScript desabilitado.

Você pode adicionar quantas tabs quiser a sua página. Basta criar uma nova div com um identificação única e em seguida adicionar um link a mesma dentro da lista de tabs.

Criação do CSS

O CSS é necessário para tornar as guias parecidas com abas e também tornar a sua aparência mais agradável:

body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }

Essas regras CSS funcionam da seguinte forma:

body: Contém as regras de fonte para a página e as tabs.
ul#tabs: Definição de estilo para as guias e remoção dos bullets da lista.
ul#tabs li: O uso de display:inline é para que as tabs tenham sua disposição na horizontal.
ul#tabs li a: Aplicamos estilos aos links da lista. Cada link agora possui uma borda, exceto border-bottom para que ela combine perfeitamente com sua div conteúdo.
ul#tabs li a:hover: A tab fica em destaque ao passar o mouse sob ela.
ul#tabs li a.selected: Estilos definidos para a guia selecionada, aplicando um fundo mais claro, texto em negrito e também aumentamos o tamanho da fonte. Observe que o padding-bottom foi definido como 0.38em para que ele se funda com a sua div conteúdo.
div.tabContent: Define um estilo para as áreas de conteúdo.
div.tabContent.hide: Usado para ocultar as tabs não selecionadas.

Criação do código JavaScript

Finalmente, é claro, você precisa de JavaScript para que as tabs funcionem.

Adicionar a função showTab() ao evento onclick para cada um dos links das tabs.
Ocultar todas as divs conteúdo, exceto a primeira, de modo que só o conteúdo da primeira tab esteja visível ao carregar a página.
getFirstChildWithTagName() é uma função auxiliar que recupera o primeiro filho de um determinado elemento que possui um tag name.
gethash () é outra função auxiliar que retorna parte da URL que aparece após o símbolo #.

Veja como funciona essas funções.

Função init()

A primeira, e mais complexa, é a função init(). É chamada quando a página é carregada, graças ao evento onload no elemento body:

Abaixo a própria função:

function init() {

      // Pega todas as tabs e as divs conteúdo da página
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Adiciona eventos onclick as tabs e destaca a primeira aba
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Oculta todas as divs conteúdo, exceto a primeira
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

Essa função faz 3 coisas:

Ele percorre todos os elementos li na lista desordenada. Para cada elemento li ele chama a função getFirstChildWithTagName() para recuperar o elemento dentro com o link. Em auxílio, ele também chama a função getHash() para extrair parte da URL do link, após o hash, que é o ID da div conteúdo correspondente. O link então é armazenado no array tabLinks, e a div de conteúdo é armazenada no array contentDivs.
Ele atribui o evento onclick com a função showTab() para cada link da lista e destaca a primeira tab com a classe ’selected’.
Ele oculta todas as divs conteúdo, exceto a primeira, definindo que as divs tenham as classes ‘tabContent hide’.

Função showTab()

showTab() é chamada toda vez que uma tab é clicada. Ele destaca a tab selecionada e mostra o conteúdo relacionado a tab. Ele também remove o destaque das outras tabs e oculta as divs com o conteúdo relacionado.

function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Destaca a tab selecionada e remove o destaque das outras
      // Mostra a div com o conteúdo relacionado e oculta as outras
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Faz com que o browser não siga o link
      return false;
    }

A função estrai o ID do link selecionado e os armazena na variável selectedId. Em seguida, percorre todos os IDs. Nos selecionados ocorre o destaque a div com o conteúdo correspondente é mostrado, para as outras tabs o destaque é removido e o conteúdo relacionado é oculto.

A função possui um return false para que anule o comportamento padrão do browser de seguir o link e adicionar o mesmo ao histórico do browser.

Função getFirstChildWithTagName()

Essa função retorna o primeiro filho de um elemento especificado correspondente a tag. init() chama essa função para recuperar o link dentro de cada item da lista.

function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

A função percorre os nós filho do elemento até encontrar um nó correspondente a seu tagName. Em seguida, ele retorna o nó.

Leia mais sobre as propriedades childNodes e nodeName no artigo: Looking inside DOM page elements.

Função getHash()

A função getHash() retorna parte da URL após encontrar qualquer símbolo hash(#). Usado por init() e showTab() para extrair o ID da div conteúdo relacionado com o link das tabs.

function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

Todas as funções em conjunto

Isso é tudo o que você precisa para desenvolver tabs com JavaScript. Veja a demonstração e olhe o código fonte da página para ver como o HTML, CSS e JavaScript aparecem.

O CSS e o JavaScript vão no topo da página. (Você pode colocá-los em arquivos separadados).
Elemento body da página que contém o manipulador de eventos onload para iniciar a função init().
O elemento ul que contém as tabs com os links.
Cada conteúdo da tab é armazenado em uma div com a classe tabContent e um id único (referenciado no link da aba correspondente).

JavaScript Tabs sem Framework ou Plugin

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

eCSStender: Assuma o controle do seu CSS

Walter Vieira — Wed, 30 Dec 2009 12:55:29 +0000

Diga adeus aos códigos CSS cheios de hacks que em alguns casos acabam mais atrapalhando do que ajudando e projete seus códigos muito mais enxutos.
Estou falando do eCSStender, com ele você pode usar seletores CSS avançados como border-radius e ter a certeza de que vai funcionar até no IE6.

Acesse o site e descubra como esse framework maravilhoso pode facilitar sua vida.

Link direto: http://ecsstender.org

eCSStender: Assuma o controle do seu CSS

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Detectar Mobile Browsers em várias linguagens

Walter Vieira — Wed, 09 Dec 2009 10:14:25 +0000

Dando continuidade ao post do Pedro Rogério sobre como Detectar Mobile Browsers com PHP, apresento mais uma opção que vai ajudar muito no desenvolvimento Mobile, o Detectmobilebrowser.com.

Trata-se de uma ferramenta opensource de Mobile Phone Detection, que oferece suporte para as principais linguagens do mercado (PHP,Rails,Javascript,ASP,etc).

É só escolher a linguagem desejada e baixar o arquivo.

Detectar Mobile Browsers em várias linguagens

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Quer ganhar um livro de JavaScript?

Pedro Rogério — Fri, 02 Oct 2009 12:34:10 +0000

Fui convidado a um tempo atrás pela editora Bookman para fazer a avaliação do livro A Arte e a Ciência da CSS, um livro muito bom que traz soluções práticas para problemas mais corriqueiros do dia-a-dia. O livro tem foco no que você mais utiliza, como formulários, títulos, imagens, backgrounds, navegação.

Se já não bastasse eu ter enviado o review do livro de CSS, fui chamado para fazer mais um, dessa vez do livro Só JavaScript. Esse livro é ideal para iniciantes, e para aqueles que também já trabalham com JavaScript, pois com ele você aprenderá a programar da forma correta.

Eles explicam muito bem eventos, validação de formulários, entre outras coisas essenciais para programar em JavaScript. Ao decorrer do livro, você vai montando sua própria biblioteca, inclusive com a possibilidade de criar animações via JavaScript. Ficou interessado no livro? Eu possuo um exemplar para sortear aqui no blog e o sorteio funciona da seguinte forma:

O primeiro que enviar um Tweet para a Editora Bookman dizendo que lê o meu blog e quer o livro ganha o mesmo. Muito simples não, só basta ser rápido.

Quer ganhar um livro de JavaScript?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Os Temporizadores do JavaScript

Jeronimo Fagundes — Tue, 01 Sep 2009 11:30:31 +0000

JavaScript tem duas funções muito úteis que servem para “agendar tarefas” que devam ser executadas. São elas o setTimeout e o setInterval.

O setTimeout tem dois parâmetros; o primeiro é uma string contendo o código a ser executado. O segundo é o tempo, em milissegundos, que se deve esperar para executar tal código. O seguinte trecho de código mostrará um alerta após 2000 milissegundos (ou seja, 2 segundos).

setTimeout("alert('Viva!')", 2000);

A diferença entre setTimeout e setInterval é que o setTimeout executa o código especificado apenas uma vez. O setInterval executa infinitas vezes, com o intervalo de tempo especificado entre cada execução. Por exemplo, o seguinte código exibirá um alerta a cada 10 segundos.

setInterval("alert('Viva!')", 10000);

Você pode se arrepender de ter agendado a execução do código. Nesse caso, são necessárias duas coisas: ter guardado a tarefa numa variável, e usar a função de cancelamento de execução. São duas as funções de cancelamento: clearTimeout, para cancelar as tarefas agendadas com setTimeout, e clearInterval, que cancela as agendadas com setInterval.
Por exemplo, o código abaixo não mostrará alerta algum, pois as tarefas agendadas serão canceladas.

var alerta_unico = setTimeout("alert('Viva!')", 5000);
var alerta_intermitente = setInterval("alert('Viva!')", 10000);

clearTimeout(alerta_unico); // Cancela o alerta agendado em setTimeout
clearInterval(alerta_intermitente); // Cancela o alerta agendado em setInterval

Os Temporizadores do JavaScript

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

JavaScript – Uma String é um Array de Caracteres?

Jeronimo Fagundes — Fri, 10 Jul 2009 13:28:42 +0000

Algo bastante comum em qualquer linguagem de programação é querer acessar um determinado caracter de uma string. Geralmente fazemos isso tratando a string como se fosse um array, ou seja, sendo str a nossa variável que contém a string, bastaria fazer um str[4] pra acessar o quinto caracter da string, por exemplo.

Em JavaScript não deveria ser diferente. Você faz isso, testa no seu Firefox cheio de extensões (ou até mesmo em safe-mode), e tudo funciona. O seu cliente abre a página, e nos primeiros dez segundos ele diz que não funciona. Provavelmente seu cliente está usando o Internet Explorer.

Acessar um caracter específico de uma string em JavaScript como se fosse um array não funciona no IE. Por exemplo, se temos isso:

var str = "abcdef";
alert(str[4]);

No Firefox será alertado corretamente a letra “e”. No Internet Explorer, será alertado “undefined”. Assim, o recomendado é acessar um caracter específico com a função charAt, da classe String. Desse modo, o código ficaria assim:

var str = "abcdef";
alert(str.charAt(4));

E isso funciona em ambos os browsers.

JavaScript – Uma String é um Array de Caracteres?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Javascript – Último dia do mês

Luiz Paulo — Tue, 07 Jul 2009 11:28:54 +0000

Essa semana, eu precisei de uma solução em Javascript para encontrar o “último dia do mês” ou “quantidade de dias do mês” como preferir. Consultei o Google e encontrei algumas soluções, algumas delas mais simples e outras bem criativas.

Achei o assunto interessante e resolvi divulgar aqui para quem precisar utilizar.

Primeiro vou postar as soluções sérias para o pessoal que está pesquisando e precisa utilizar em seu código

Soluções simples

Exemplo longo (função):

function daysInMonth(month,year) {
	var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	if (month != 2) return m[month - 1];
	if (year % 4 != 0) return m[1];
	if (year % 100 == 0 && year%400 != 0) return m[1];

	return m[1] + 1;
}

Exemplo curto (função):
Aqui está a grande sacada do javaScript, que interpreta o 0(zero) como “o dia antes do dia primeiro” que obviamente é o último dia do mês anterior.

function daysInMonth(month,year) {
	var dd = new Date(year, month, 0);
	return dd.getDate();
}

Exemplo curto (inline):

var lastDay = (new Date(year, month, 0)).getDate();

Soluções criativas

Não se assustem, mas as soluções citadas abaixo funcionam!

Solução utilizando Switch:

function getLastDayOfMonth(month,year)
{
	var day;

	switch(month)
	{
		case 1 :
		case 3 :
		case 5 :
		case 7 :
		case 8 :
		case 10:
		case 12:
			day = 31;
			break;
		case 4 :
		case 6 :
		case 9 :
		case 11:
		   	day = 30;
			break;
		case 2 :
			if( ( (year % 4 == 0) && ( year % 100 != 0) ) || (year % 400 == 0) )
				day = 29;
			else
				day = 28;
			break;

	}
	return day;
}

Essa é legal

function anoBissexto(anoCompleto)
{
	if(!(anoCompleto%4) && (anoCompleto%100 || !(anoCompleto%400))) return true;
	return false;
}
function diasNoMes(mes,ano)
{
	var var_type=typeof mes;
	if(var_type != "number" && var_type != "string") return false;
	if(var_type == "number" && (mes > 11 || mes =0) return dias[indice_eng];
		if(indice_bra>=0) return dias[indice_bra];
		return false;
	}
	else return dias[mes];
}

Façam bom proveito!

Javascript – Último dia do mês

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Javascript – Retirando espaços de string (função trim)

Luiz Paulo — Mon, 29 Jun 2009 11:05:26 +0000

Veja abaixo algumas soluções para retirar espaços do início e final de strings.

Exemplos simples

Exemplo curto (funções com expressão regular):

	//trim completo
	function trim(str) {
		return str.replace(/^\s+|\s+$/g,"");
	}

	//left trim
	function ltrim(str) {
		return str.replace(/^\s+/,"");
	}

	//right trim
	function rtrim(str) {
		return str.replace(/\s+$/,"");
	}

	alert(trim("        TEXTO        "));

Exemplo curto (métodos da string com expressão regular):
Essa solução é bem mais elegante!

	//trim completo
	String.prototype.trim = function () {
		return this.replace(/^\s+|\s+$/g,"");
	}

	//left trim
	String.prototype.ltrim = function () {
		return this.replace(/^\s+/,"");
	}

	//right trim
	String.prototype.rtrim = function () {
		return this.replace(/\s+$/,"");
	}
	alert("        TEXTO        ".trim());

Outras soluções

Exemplo longo

function trim (str)
	{
		var whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
		for (var i = 0; i = 0; i--)
		{
			if (whitespace.indexOf(str.charAt(i)) == -1)
			{
				str = str.substring(0, i + 1);
				break;
			}
		}
	    return whitespace.indexOf(str.charAt(0)) == -1 ? str : '';
	}

Outro exemplo

	function isWhitespace(charToCheck) {
		var whitespaceChars = " \t\n\r\f";
		return (whitespaceChars.indexOf(charToCheck) != -1);
	}

	//left trim
	function ltrim(str) {
		for(var k = 0; k =0 && isWhitespace(str.charAt(j)) ; j--) ;
		return str.substring(0,j+1);
	}

	//trim completo
	function trim(str) {
		return ltrim(rtrim(str));
	}

Caso queira se aprofundar no assunto, aconselho a leitura do artigo Faster JavaScript Trim que mostra vários testes de performance no IE e FF.

Javascript – Retirando espaços de string (função trim)

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

JavaScript – Pegadinha no getElementById

Jeronimo Fagundes — Sat, 27 Jun 2009 12:24:36 +0000

Claramente inspirei o título deste post no outro escrito pelo colega Luiz Paulo. O problema do getElementById no Internet Explorer já é bem conhecido, mas posto aqui, pois muita gente ainda não deve saber.

Como sabemos, a função document.getElementById retorna um elemento da página cujo id é passado como parâmetro. Contudo, o Internet Explorer (até a versão 7) tem uma implementação dessa função um tanto, digamos, controversa.

Na execução dessa função, o IE procura não só por elementos cujo id seja igual ao passado por parâmetro, mas também considera os elementos cujo name seja igual àquele id.

Por exemplo, se temos o seguinte elemento:

e tentamos buscá-lo com getElementById:

var meu_campo = document.getElementById("login");

No Internet Explorer será retornado o campo de texto, mas no Firefox, por exemplo, não. Todavia, o correto é realmente não retornar, pois o campo de texto não possui atributo id definido. O nome da função é getElementById, e não getElementByIdOrName. Além disso, é o que define a recomendação do W3C.

A Microsoft se defendia, dizendo que, segundo o W3C, id e name compartilham do mesmo namespace (eles ignoraram a parte em que diz que isto é apenas para âncoras (tag a), mas tudo bem, vamos dar esse desconto). Ou seja, segundo a MS, se houvesse um elemento com id igual ao passado por parâmetro, seria o mesmo cujo name fosse igual àquele id. Mas eles não admitem ter ignorado a recomendação do próprio W3C que diz que a função getElementById deve retornar o elemento cujo atributo id, e apenas o atributo id, seja igual àquele passado pelo programador como parâmetro.

Finalmente, eles admitiram o erro que perdurou por anos. A função foi corrigida no Internet Explorer 8. Mas atenção: se a página estiver no modo de compatibilidade, a função será executada como no IE7!

Então, para evitar problemas com versões anteriores a 8, não use dois elementos em que o name de um seja igual ao id do outro. Evita dor de cabeça com browsers mais antigos. Mas é bem possível que você encontre algo assim em algum código legado, então, fique atendo ao experimentar erros estranhos ao utilizar o getElementById no Internet Explorer.

JavaScript – Pegadinha no getElementById

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Cheat Sheet – Guia rápido sobre Jquery 1.3.2

Luiz Paulo — Fri, 26 Jun 2009 10:58:16 +0000

O Cheat Sheet é um resumo de um assunto específico que pode ser utilizada como guia rápido. Nele você pode encontrar sintaxes, códigos, exemplos, conceitos e dicas.
Não podemos considerá-lo um manual completo pois é bem compacto, mas quebra bastante o galho! Além de úteis, normalmente são feitos com visual agradável, podendo ser impresso e facilmente colado no seu escritório.

Aqui você encontra outros CheatSheet – Guia rápido sobre Jquery mas são das versões anteriores do jQuery, então segue a documentação para o jQuery 1.3.2.

Clique aqui e baixe de uma vez!

Façam bom proveito!

Cheat Sheet – Guia rápido sobre Jquery 1.3.2

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Javascript – Pegadinha no parseInt()

Luiz Paulo — Wed, 24 Jun 2009 15:54:55 +0000

Já estamos cansados de saber que javascript é totalmente dinâmico e podemos mudar facilmente o tipo das variáveis.

Uma das facilidades em javascript é a conversão de variáveis em inteiro, com a função parseInt(). Só que essa função tem uma pegadinha que pode atrapalhar bastante aos desatentos.

Sua sintaxe é bem simples como segue:

var number = "123456348965";
var integerNumber = parseInt(number);
alert(integerNumber); //123456348965

Nesse caso, tranquilo! Nenhum problema. Mas se, por exemplo, quisermos converter uma string “010″ teremos problemas. Vejam o exemplo:

var number = "010";
var integerNumber = parseInt(number);
alert(integerNumber); //8

Isso acontece pois o número é automaticamente detectado como Octal. Para resolver esse problema, a função parseInt pode receber 2 parâmetros.

parseInt(string, radix)

Onde:
string = String a ser transformada
radix = Numeral que você quer se basear (de 2 a 36)

Veja então como fica a solução para este problema:

var number = "010";
var integerNumber = parseInt(number, 10); //10 = base decimal
alert(integerNumber); //10

Pegadinha desvendada e problema resolvido!

Javascript – Pegadinha no parseInt()

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Menu Accordion com jQuery

Pedro Rogério — Mon, 15 Jun 2009 10:38:21 +0000

Esse efeito de Accordion que vou mostrar aqui hoje pode ser usado não somente para menus, mas também para outras finalidades. É muito simples conseguir esse tipo de efeito utilizando a jQuery, que proporciona uma simplicidade ao escrever código JavaScript. A marcação HTML utilizada nesse exemplo é a seguinte:


	Pinceladas da Web
	
        
            CSS
            XHTML
            WebStandards
        
	
	CSS no Lanche
	
        
            Tutoriais CSS
            JavaScript
            jQuery
        
	
	jQuery
    
        
            Download
            Documentação
            Tutoriais

Como podem ver utilizei de listas de definição e listas desordenadas para montar o menu accordion, estando com o HTML pronto, vamos ao CSS:

body {font:1.6em Helvetica, Arial, sans-serif}
a {display:block; text-decoration:none}
dl {margin:0 auto; width:500px}
dt {background-color:#000; border-bottom:2px solid #fff; padding:5px}
dt a {color:#fff;}
dd, ul {margin:0; padding:0}
ul li {background-color:#EFEFEF; font-size:.6em; list-style:none}
ul li a {color:#069; padding:5px}
ul li a:hover {background-color:#aaa; color:#fff}

Você pode aplicar estilos como quiser ao seu menu, só apliquei alguns estilos aqui para um melhor entendimento do efeito final. Agora o grande responsável pelos efeitos é o JavaScript, primeiramente adicione o Framework jQuery a sua página, feito isso, basta utilizar o seguinte código JavaScript:

Como podem ver o código JavaScript está todo comentado tornando-se de fácil entendimento. Vejam aqui o exemplo criado para esse tutorial. Se quiser pode fazer o download dos arquivos do exemplo para estudo.

Menu Accordion com jQuery

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?