JavaScript » CSS no Lanche - Ingerir CSS na hora do lanche não engorda

Os benefícios de utilizar JavaScript não Obstrutivo

Postado por: Pedro Rogério em 31 de março de 2009

31 mar
8

Se você utiliza JavaScript não obstrutivo em seus projetos você está proporcionando uma maior acessibilidade a seus projetos, ou seja, se os scripts fores desabilitados eles não irão interferir no funcionamento da página.

Utilizar JavaScript não obstrutivo proporciona uma maior interoperabilidade, acessibilidade, facilidade de manutenção e ganho de tempo no desenvolvimento de seus códigos.

Foi pensando nisso que Phil Hawksworth desenvolveu uma página muito simples para mostrar que ao utilizar técnicas de Progressive enhancement você está garantindo assim total acesso a qualquer dispositivo.

Abaixo vocês podem ver um exemplo de como o site funciona corretamente em qualquer dispositivo. Essa é uma screenshot que tirei no Openwave Simulator:

IE6 Double Margin / Duplicate Characters bug fix usando jQuery

Postado por: Pedro Rogério em 8 de janeiro de 2009

8 jan
14

Meus amigos desenvolvedores com certeza conhecem a fundo os mais famosos bugs do IE6, o da margem dupla e o bug da repetição de caracteres, se você não conhecia esses bugs, aconselho a dar uma lida nesses posts. Mas como conhecimento nunca é demais, acabei encontrando hoje uma simples solução para resolver esses bugs no IE6 utilizando jQuery:

$('*').each(function() {
  if ($(this).css('float') !== 'none') {
    $(this).css('display', 'inline');
  }
});

O resultado desse código é que ele irá procurar todos os elementos na página e aqueles que tenham float diferente de none será adicionado a propriedade css display:inline previnindo seu trabalho para que não ocorra esses bugs.

Via: Snipplr

jQuery Delay Plugin

Postado por: Pedro Rogério em 1 de dezembro de 2008

1 dez
7

jQuery Delay Plugin é um plugin desenvolvido para jQuery criado para que possamos definir um tempo de espera antes da execução de uma função específica:

$(document).ready(function(){

	// Ao clicar no link é disparada a funcao
	$("a").click(function(){

		// Delay de 1 segundo...
		$(this).delay(1000,function(){

			// É mostrada a div com o efeito slideToggle
			$("div").slideToggle('slow');

			// Agora temos um Delay de 3 segundos
			$(this).delay(3000,function(){

				// Mudamos a cor de fundo da Div para azul
				$("div").css("backgroundColor","blue");

			});

		});

	});
});

Vocês podem ver o plugin em ação nesse link.

Referência HTML/XHTML, CSS e JavaScript no Firefox

Postado por: Pedro Rogério em 6 de outubro de 2008

6 out
3

O Firefox é um browser amplamente usado devido as facilidades que ele proporciona aos desenvolvedores, usuários, onde com a utilização de extensões você pode levar um nível acima o desenvolvimento web, a navegação, a experiência na Internet. Recentemente descobri mais uma extensão que pode ajudar muito nós desenvolvedores, se chama DevBoi, onde você tem a possibilidade de ler as referências sobre: HTML/XHTML, CSS, JavaScript e DOM nativos no plugin, e ainda você possui a opção de instalar mais helps como: PHP, Ptototype, Ruby on Rails e XUL.

Devboi

Para ter acesso a referência basta ter o plugin instalado e apertar as teclas “CTRL + F9″, é aberta uma espécie de Sidebar em seu browser, a partir daí é só procurar o que deseja. Dica do WebResourcesDepot.

Galeria de fotos em JavaScript

Postado por: Pedro Rogério em 23 de setembro de 2008

23 set
3

Desenvolver uma simples galeria de fotos para a web a algum tempo atrás requeria ter conhecimentos em Flash, desenvolver galerias com slideshow então. Mas as épocas mudaram e surgiram os Frameworks JavaScript, e com eles o desenvolvimento para a web ficou menos árduo, desenvolver hoje em dia simples galerias de fotos em JavaScript é muito simples.

Através do site Pixelco.us fiquei conhecendo 2 formas de desenvolver Galerias de fotos em JavaScript com Slideshow, um utiliza jQuery e o outro utiliza Mootools.