Função getElementsByClassName – Versão 2008

Postado por: Pedro Rogério em
  • 12 ago
  • 1

Robert Nyman, no ano de 2005, publicou em seu blog um artigo entitulado “The Ultimate getElementsByClassName“, uma função desenvolvida em JavaScript, que sem a utilização de qualquer Framework nos pernite obter todos os elementos de uma classe passados por parâmetro.

The Ultimate getElementsByClassName – Versão 2005

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i < arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

Continuar lendo »

Protegendo seu e-mail contra spam com jQuery

Postado por: Pedro Rogério em
  • 5 ago
  • 1

Hoje em dia você sabe que não pode sair por aí largando seu e-mail em qualquer página pois corre o risco dele cai nas mãos dos spammers, e é aí onde a dor de cabeça começa, mas no site KEVINLEARY.net existe uma solução bem simples para você proteger seus e-mails contra spam com jQuery.

Tudo o que você tem a fazer é, além do uso do Framework jQuery, é utilizar a seguinte sintaxe:

<a href="[email]pedrorogerio[at]pinceladasdaweb[dot]com[dot]br" rel="email">Pedro Rogério</a>

Depois, a mágica feita com jQuery:

$(document).ready(function(){
	$("a[rel='email']").each(function(){
		// Modifica o valor de mailto:
		var mailtoVal = $(this).attr('href');
		mailtoVal = mailtoVal.replace("[email]","mailto:");
		mailtoVal = mailtoVal.replace("[at]","@");
		mailtoVal = mailtoVal.replace("[dot]",".");
		// Gera automaticamente a tag title para os usuários
		var mailtoTitle = mailtoVal.replace("mailto:","Email: ");
		$(this).attr('title',mailtoTitle);
		// Evento onClick
		$(this).click(function(){
			window.location.href = mailtoHref;
			return false;
		});
	});
});

Vamos a explicação: O Script irá procurar por links que contenham o atributo rel=”email”, e as ações executadas serão as seguintes:

  • “[email]” será substituído por mailto:
  • “[at]” será substituído por @
  • “[dot]” será substituído por .

Se você não quer utilizar jQuery, aqui você pode encontrar uma outra solução.

Abrir popups estilo Mac

Postado por: Pedro Rogério em
  • 4 ago
  • 3
Fancy Zoom

Se você utiliza miniaturas de imagens em seu site, e gostaria que o usuário ao clicar, elas fossem abertas em um tamanho maior, existem várias soluções simples para isso, algumas amigáveis, outras não, mas uma solução que eu acho interessante são os Lightbox. Uma forma de conseguir efeitos desse tipo sem a utilização de frameworks JavaScript é utilizar o Fancyzoom.

Fancyzoom é um pequeno JavaScript que nos permite fazer zoom em imagens, através de um efeito “emergente” ao estilo MAC. Sua utilização é muito simples, basta adicionar 2 linhas de código ao seu site, semelhantes a essa:


<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>

Após, é só adicionar o seguinte código ao body de sua página:

<body onload="setupZoom()">

Está pronto, o JavaScript agora fará o zoom em suas imagens automaticamente. Basta você colocar um link na imagem para a imagem maior, exemplo:

<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>

Mas, se por um acaso você deseja que explicitamente alguma imagem não tenha zoom, basta adicionar o seguinte código no link da imagem:

<a href="image.jpg" rel="nozoom"> <img src="image-thumbnail.jpg" /></a>

prettyCheckboxes – Personalize os Checkboxes e radio buttons com jQuery

Postado por: Pedro Rogério em
  • 31 jul
  • 3
prettyCheckboxes - Personalize os Checkboxes e radio buttons com jQuery

Você por um acaso já tentou alterar a aparência de algum radio button e algum checkbox com CSS e viu que isso não é possível? Pois então, com jQuery essa tarefa é muito fácil utilizando o plugin prettyCheckboxes, basta você adicionar o jQuery e o próprio plugin em sua página da seguinte forma:


<script src="js/jquery.js" type="text/javascript" charset="utf-8">
<script src="js/prettyCheckboxes.js" type="text/javascript" charset="utf-8">

E para inicializar a função, basta fazer o seguinte:


<script type="text/javascript">
$(document).ready(function(){
	$('input[type=checkbox],input[type=radio]').prettyCheckboxes();
});
</script>

Agora, todo campo input do tipo checkbox e do tipo radio em sua página será personalizado com jQuery através do plugin prettyCheckboxes. As imagens dos mesmos podem ser customizadas por CSS a partir de agora. Dúvidas em sua implementação, visite o site do desenvolvedor.

Jogo da Memória com jQuery

Postado por: Pedro Rogério em
  • 17 jul
  • 4
Jogo da Memória com jQuery

Esse é um interessante Jogo da Memória desenvolvido em PHP, CSS e jQuery, caso você queira customizar o jogo, basta efetuar o download.

O mais interessante é que se você tiver preguiça de jogar, é só dar uma olhada no código fonte para ver onde estão localizadas as imagens.

Função getElementsByAttr

Postado por: Pedro Rogério em
  • 14 jul
  • 6

Quem sabe isso algum dia pode lhe ajudar:

function getElementsByAttr(tag, attr, value){
	var arrayEl = new Array();
	var el = document.getElementsByTagName(tag);
	for(i=0, j=0; i<el .length; i++){
		if(el[i].getAttribute(attr) == value){
			arrayEl[j] = el[i];
			j++;
		}
	}
	return arrayEl;
}

Exemplo de uso:

var inputTxt = getElementsByAttr('input', 'type', 'text');

Via: Snipplr.com

jProton – O Primeiro Framework JavaScript genuinamente brasileiro

Postado por: Pedro Rogério em
  • 8 jul
  • 3

Logo jProton

Pedro Simonetti, vendo a dificuldade de desenvolvedores brasileiros em trabalhar com Frameworks JavaScript, sendo que esses, ou possuem uma documentação em inglês e muito complicada de entender, ou outros que ao mesmo tempo possuem uma fragilidade em sua documentação, resolveu reunir as idéias utilizadas nos mais famosos Frameworks JavaScript como: jQuery, Ext, Prototype, Mootools, e nos artigos e códigos de Peter Paul Koch, Dean Edwards e Douglas Crockford, e nas boas práticas de programação apresentadas na quinta edição do livro “JavaScript – The Definitive Guide – 5th Edition” de David Flanagan, resolveu criar o Framework jProton.

Esse projeto existe desde Setembro de 2007, ainda está em fase Alpha, mas creio que logo saia a versão beta pois o Pedro agora conta com a ajuda de Yuri Nascimento e Thiago Victorino.

Saiba mais

Páginas:«1234567891011121314»