Ajaxianos

Alternativa de API para jQuery

Wender Lima — Thu, 30 Jun 2011 16:52:41 +0000

Tem gente de bom humor por aí…
Algumas pessoas felizes resolveram fazer um site de referência pra jQuery pra ninguém botar defeito(frase estilo sessão da tarde :p ).
O site tem a descrição completa de todas as funções detalhadamente e com exemplos funcionais

Você pode navegar pelas “categorias” tradicionais ou pela busca(se você tiver uma vaga lembrança do que esta procurando)

Fica a dica, favoritem aí http://jqapi.com/

Plugin jQuery para criar urls amigáveis (friendly url)

Wender Lima — Tue, 28 Jun 2011 18:53:05 +0000

Estou customizando uma loja virtual pra minha esposa(www.modababy.com.br) e queria que todas as publicações dela tivessem urls amigáveis pra melhorar o SEO da loja, só que como se já não bastasse ser um saco ficar cadastrando produtos, ela ainda tem que colocar manualmente essas urls, e o sistema não faz nem questão de saber se essa url já foi usada… =/
Daí eu fiz um plugin jQuery muito simples que pega o valor de um campo e coloca em outro campo já convertido, ainda não é a melhor coisa do mundo, mas vocês ainda podem ajudar a melhorar, por isso vou disponibilizar aqui pra vocês também

Este é o plugin:

(function($){
	$.fn.friendly = function(to){
		//Divide o valor atual em array
		var curr = $(to).val().split('-');
		/*
		Verifico se o primeiro item é vazio, se sim, 
		eu coloco o timestamp, se não, eu verifico se 
		o último valor não é um número, se não for, eu 
		mantenho sem timestamp, se for um número, eu mantenho 
		o número, assim evita-se 404 pelo Robô do google e afins
		*/
		var ts = curr[0]==''?'-'+Math.round(((new Date()).getTime()-Date.UTC(1970,0,1))/1000):(isNaN(curr[curr.length-1])?'':'-'+curr[curr.length-1]);
		/*
		A conversão ocorre basicamente aqui, onde no final eu 
		concateno com o timestamp
		*/
		$(to).val($(this).val().replace(/\s/g, '-').replace(/[^\w/-]/g, '').toLowerCase()+ts);
	};
})(jQuery);

Repare que coloquei uma variável “ts” que gera um timestamp, fiz isso para o meu caso onde o sistema não valida se a url amigável já existe, colocando um timestamp no final ele nunca vai se repetir e não faz diferença para o SEO

Como funciona?
Funciona assim… no primeiro seletor, você coloca o elemento de onde você quer o texto, e dentro do friendly, você coloca o seletor de onde você quer que o texo apareça
Ex:

$('#tab_general input[name^=product_description][name*=name]').friendly('#tab_data input[name=keyword]');

Pra que ele atualize pra cada palavra digitada, você precisa associar a um evento no elemento, no meu caso eu fiz isso aqui:

$('#tab_general input[name^=product_description][name*=name]').bind('keyup', function(){
        $(this).friendly('#tab_data input[name=keyword]');
    })

No keyup do campo, eu atualizo o segundo campo

Espero que seja útil

Como pegar um parâmetro da url usando javascript

Wender Lima — Wed, 15 Jun 2011 19:07:07 +0000

Pessoas, me deparei com um problema aqui no trabalho e tive que fazer uma função básica pra pegar um parâmetro da url, seja ele com “?”, “&” ou até âncora “#”, achei que poderia ser útil pra mais alguém, segue o código

	function getParameter(p,href){
		var parName = p.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  		var rx = new RegExp("[\\?&#]"+parName+"=([^&#]*)");
  		var valor = rx.exec(href);
  		if(valor == null){
    		return "";
		}else{
    		return valor[1];
		}
	}

Como onde eu precisei usar, a url nem sempre estava no browser, eu estou passando ela por parâmetro, esta função retorna o valor do parâmetro que você procurou, ou retorna vazio se não encontrar nada, ex:

        alert(getParameter('parametroDaUrl',location.href));

Espero que seja útil

8 expressões regulares que você tem que saber

Wender Lima — Mon, 28 Feb 2011 18:15:32 +0000

Eu particularmente tenho um bloqueio mental quando se trata de contruir expressões regulares, por mais que eu saiba como é simples, e me esforce, não sai… daí corro pro goolge e procuro algo que me atenda.

Daí uma alma abençoada me mandou um link de um blog explicando graficamente como funciona as RegEx e dando 8 exemplos que devem ser comuns em nossa rotina

Favoritem esse link: http://net.tutsplus.com/tutorials/other/8-regular-expressions-you-should-know/

PS.: Desculpem a ausência do blog, quem quiser me acompanhar, segue meu cartão http://wender.com.br

Formalize CSS, seus problemas de formatação de formulários acabaram.

Alexandre — Thu, 04 Nov 2010 19:39:57 +0000

Bom, sei que o título é meio sensacionalista, mas a idéia do Formalize-CSS é realmente muito interessante.

Era uma vez um desenvolvedor web que perdia noites de sono ajustando os seus formulários tentando ao máximo fazer com que ficassem semelhantes nas diferentes versões de navegadores existentes hoje no mercado.

Foi então que o Nathan Smith criou o Formalize-CSS para não perder sua sanidade, e como se não bastasse isso ele fez com que seu plugin funcionasse com Mootools, JQuery, Dojo, Prototype e YUI.

Ele também disponibilizou o projeto no GitHub para que você possa contribuir com o código.

Na página de demonstração tem screenshots do mesmo formulário em diversos navegadores e sistemas operacionais diferentes, muito interessante.

Parabéns Nathan ( se você conseguir me entender ), e não deixem de conferir o trabalho dele aqui.

JSON – você não devia ter medo dele – no duodra.co

Alexandre — Tue, 26 Oct 2010 16:53:32 +0000

Um excelente post do nosso amigo duodraco, desmistificando a notação JSON.

No post ele demonstra a simplicidade e poder desse formato e dá exemplos de utilização com PHP (em json.org você encontra referências para utilização com dezenas de outras linguagens).

Não deixem de conferir o post aqui e adicionem o duodra.co no seu leitor de feeds, ele sabe o que escreve

Boas Práticas ao desenvolver com Javascript

duodraco — Mon, 20 Sep 2010 16:29:22 +0000

Olá. Este é meu primeiro post aqui no ajaxianos. Vou repassar algumas boas práticas e dicas para o desenvolvimento com javascript.

1.: Utilizar uma biblioteca: Vai te poupar boas horas de trabalho, com funções prontas para HttpRequest, alteração de conteúdo, utilitários para arrays e objetos, etc. Temos diversas opções, dentre as mais conhecidas jQuery, Prototype e Dojo. Ainda temos as utilitárias para interface como jQueryUI, Scriptaculous e YUI, sendo que esta ultima é mais global, não sendo uma biblioteca só para interface. O interessante ao usar uma biblioteca é antes de mais nada estudar sua API, e num segundo momento seu código. Você encontrará soluções sofisticadas para problemas comuns. Minha primeira opção é a jQuery / jQueryUI … e em breve jQuery Mobile

2.: Mantenha um padrão de codificação. Isso vai colaborar demais na organização do código, e principalmente trabalhando em equipe: é fundamental que todos estejam falando a mesma língua. Não conheço nenhum padrão que seja “o padrão a ser seguido”. O que existe é uma convenção na qual muitos desenvolvedores se apoiam:
- indentação com espaços (4) ao invés de tabs
- limite de 80 caracteres por linha
- chaves de blocos lógicos(if,switch,for,while,etc) começam na linha da declaração, e seguem com uma quebra de linha e indentação e seu conteúdo.
- Utilizar o formato JSON para declarar objetos e arrays ([1,2,3] ou {“nome”:”Duodraco”})
- Nomear de maneira humanamente compreensível suas variáveis. Já vi variáveis com os nomes mais bizarros possíveis, e alguns com nomes acessíveis, mas completamente fora de contexto.
- Usar o formato “camelizado” na nomenclatura: palavras todas juntas, e o primeiro caracter de cada uma em maiúsculo. maisOuMenosAssim.
- Usar ; no final de cada comando
- Codar de forma que o código seja autodescritivo.
- evitar continue, eval e with, por mais tentador que possa parecer.
Um código bem formatado deve se parecer com isso:

var contador = 0;
function popularBox(titulo,corpo){
    if(titulo == undefined || corpo == undefined){
        return false;
    }
    jQuery("#box DIV.titulo").html(titulo);
    jQuery("#box DIV.corpo").html(corpo);
    return true;
}

Uma maneira que utilizo para organizar o código é mantê-lo em arquivos separados (independente da biblioteca, mesmo que seja feito mais um request). Nesses arquivos eu agrupo minhas funções em Objetos, utilizando-os inclusive com variaveis que utilizo na página. Uso e abuso do formato JSON para me organizar. Segue um exemplo:

var customControl = {
    "defaults":{
        "title":"Atenção",
        "position":"center center"
    },
    "alert":function(body,title,callback){
        if(title == undefined || !title){
            title = customControl.defaults.title;
        }
        //mais código
    },
    "confirm":function(body,callback){
        //codigo do confirm
    }
}
var artigo = {
    "obj":{
        "id":0,
        "title":"",
        "body":""
    },
    "save":function(){
        //codigo do save
    }
}

Outra dica de extrema importância: Sabe aquela história de “CSS no começo e JS no fim”? Siga isso sempre no seu desenvolvimento.
Deixe para carregar suas bibliotecas, funções, e tudo o mais que precisar no final, preferencialmente após todo o HTML (DOM) ter sido decalrado.
Os navegadores param a renderização sempre que encontram

Comentário sobre o Matt (WordPress)

Wender Lima — Sat, 20 Jun 2009 14:19:48 +0000

No final da palestra do Matt (WordPress) ele defendeu arduamente a questão de que o WordPress NÃO é um CMS! quase escorreu uma lágrima
Ele falou que o wp é uma ferramenta de blog onde as pessoas podem expressar suas emoções, etc… Não um CMS
Será que ele ficou mto puto por ser convidado para um evento de CMS?

CMS Brasil 2009

Wender Lima — Sat, 20 Jun 2009 10:22:36 +0000

Pessoal, estou indo para o CMS Brasil 2009, possiveis assuntos relevantes serão postados aqui em Real Time

Google Developer Day 2009

Wender Lima — Wed, 20 May 2009 19:35:38 +0000

Já esta disponível para inscrições, o evento será em São Paulo no dia 29 de junho

http://code.google.com/intl/pt-BR/events/developerday/2009/home.html

Dica: Como manter o loading visível com scroll

Wender Lima — Fri, 24 Apr 2009 17:51:11 +0000

Dica rápida!

Como manter o loading ou menu flutuante ou o que quer que seja visível mesmo quando você faz o scroll.
Nos browsers mais inteligentes como FireFox e Safari uma propriedade no CSS é o suficiente para fazer o loading ficar paradinho sempre visível, mas para o IE(Pelo menos até a versão 6) é necessário fazer uma interferência com javascript para ajustar a posição do elemento.

CSS do loading:

JavaScript:

// Só faz o cheat se for o IE
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
document.documentElement.onscroll = updatePos;
}
function updatePos(){
var pos = document.documentElement.scrollTop;
document.getElementById('loading').style.top = pos;
}

HTML do Loading:


	Carregando...

UPDATE:
Nosso colega Anderson Straube(http://www.andersonstraube.com) indicou um hack mais esperto para o IE.
Mais uma vez… só funciona no IE, é uma função chamada “expression”
http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx
assim, para o IE não seria necessário mais uma função JS, basta o comando “híbrido” no CSS, Exemplo:

Máscara para campos de texto – jQuery

Wender Lima — Mon, 23 Mar 2009 21:44:25 +0000

Este plugin jQuery faz um trabalho muito bem feito e não ganha nada pra isso
Você só precisa fazer o include da lib jQuery e do plugin

E depois chamar a função com a configuração da máscara

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Você ainda pode dizer o que vai ficar no lugar do carácter, até que este espaço possa ser preenchido pelo usuário, exemplo “__/__/____” neste caso o placeholder é um “underline”

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:"_"});
});

Ou você pode deixar com um espaço em branco.

Os parâmetros que o plugin aceita para a máscara são:

a – Representa um carácter alpha numérico (A-Z,a-z)
9 – Representa um carácter numérico (0-9)
* – Representa um carácter alpha numeric character (A-Z,a-z,0-9)

Você também pode obrigar alguns carácteres como no exemplo abaixo

jQuery(function($){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

Neste caso ele esta dizendo que o “~” deve aceitar somente sinal de “+”(mais) ou “-”(menos)

Você pode encontrar mais exemplos práticos e fazer o download na página dos caras
http://digitalbush.com/projects/masked-input-plugin/

Solução completa de listagem/ordenação/paginação/busca com jQuery

Wender Lima — Mon, 16 Mar 2009 14:16:28 +0000

Caramba…
Aqui estou eu vendo meus feeds no google reader quando me deparo com essa solução.
É basicamente um datadgrid, só que completo, você pode trabalhar em cima dele com customização do layout, mas é só isso que você precisa fazer, pois ele tem suporte a internacionalização com o nosso português brasileiro!

Limitação de registros por página e ordenação

Busca instantânea em todos os campos da tabela

A ativação é praticamente ridícula, tenho até vergonha de postar aqui, mas vamos lá…
Primeiro óbviamente, para que tudo funcione corretamente, você deve instalar a lib do jQuery e o plugin dataTables no seu sistema, isso deve ser o mais difícil perto do próximo passo.

Crie sua tabela respeitando as tags e que são praticamente desconhecidas por muitos programadores, e dê um ID para sua tabela

Depois disso, adicione em um bloco script o comando $(‘#idDaSuaTabela’).dataTable() como no exemplo abaixo

Agora imagine a economia que você pode fazer em desenvolvimento, tendo isso em suas mãos!
Isso valoriza suas aplicações e só traz benefícios, tanto para você quanto para o seu cliente, quem sabe você não ganha até um aumento!
Foi útil? então, vamos colaborar com os caras, não seja mão-de-vaca :-p

Link: http://www.datatables.net/

Outra opção de crop de imagens com Mootools

Wender Lima — Mon, 16 Mar 2009 13:26:31 +0000

Eu já postei anteriormente uma opção de crop de imagens usando jQuery(http://www.ajaxianos.com.br/2008/09/crop-de-imagem-com-jquery/), agora um plugin para mootools me chamou a atenção, ele foi desenvolvido pelos caras da uvumi.com.
Além do óbvio que uma ferramenta de crop deve fazer, esse plugin permite que você faça um clique em qualquer área da imagem sem desfazer o crop, ao invéz disso, ele centraliza o crop na área clicada, isso eu achei fantástico, muito simples e prático, além disso, um duplo clique na área de crop faz com que a seleção fique na imagem inteira.
O plugin também exibe uma pequena caixa flutuante com o tamanho e posicionamento do crop junto com um thumb de preview da area do crop, reamente um ótimo trabalho, parabéns aos caras do uvumi.com

Quase esqueci de mencionar a quantidade de eventos, o que é muito importante, para o jCrop eu tive que criar funções paralelas para executar algumas tarefas que são feitas com facilidade por esse plugin

Link: http://tools.uvumi.com/crop.html

Disponível nova versão do jQuery “bugFix”

Wender Lima — Tue, 24 Feb 2009 20:00:30 +0000

A equipe do jQuery publicou a versão 1.3.2 da lib com várias correções importantes, a lista completa das atualizações você encontra aqui:
http://dev.jquery.com/report/33

Uma das correções que me foram úteis foi a da função “clone” com parâmetro “true” no IE.
Esta função faz o que o nome diz, literalmente um clone de qualquer elemento, no meu caso um formulário complexo cheio de event handlers, o atributo “true” faz com que todos os event handlers também sejam clonados, no FireFox(como sempre) funciona direitinho, mas no IE quando você clonava um elemento clonado ele gerava um bug que pelo menos pra mim, clonava o elemento 2 vezes.

Com a versão 1.3.2 o bug foi corrigido e está aprovado!

Uma observação que faço pra quem possuia uma versão mais velha(1.2.6) e usava “@” no seletor jQuery, suas aplicações precisam ser atualizadas removendo o “@”, ele não é mais utilizado,
antes $(“input[@name=xxx]“) agora $(“input[name=xxx]“)

jQuery: www.jquery.com

Problema com jCrop + Scroll

Wender Lima — Wed, 18 Feb 2009 00:14:23 +0000

Este post é para ajudar aqueles que porventura venham a ter o mesmo problema que eu tive
No sistema de imagem que estou desenvolvendo, tenho uma área de tamanho limitado para as imagens, por isso o css do meu container possui “overflow:auto” para que quando a imagem ultrapassar a área do editor, esta fique com um scroll.
O problema do jCrop é o seguinte, quando é necessário fazer a seleção de uma região da imagem abaixo da área visível(que seja necessário rolar o scroll da DIV) e mudar sua posição, o scroll volta para a posição Top 0 Left 0, o seu cursor continua parado na tela e a área de seleção fica lá embaixo onde você não consegue mais vê-la.
Para resolver este problema eu tive que debugar o código do plugin jCrop até encontrar o ponto exato que faz com que a inconsistência ocorria.
Por incrível que pareça, este problema ocorre apenas quando um recurso está habilitado, o “keySupport”, sendo assim, para resolver o problema, basta mudar sua condição padrão para “false”

Exemplo:

jQuery(function() {
	jQuery('#jcrop_target').Jcrop({
		keySupport: false
	});
});

Sendo assim o suporte a teclas não funcionará, mas seu crop(que mais importa) continuará bonito

Uma outra opção(que no meu caso não é viável já que o tamanho da área varia de acordo com uso do browser e resolução da tela), seria definir o tamanho da área destinada ao Crop

Exemplo:

$(function() {
    $('#cropbox').Jcrop({ boxWidth: 450, boxHeight: 400 });
});

Espero que essa dica possa ajudar muita gente, pra que não fiquem igual algumas pessoas(eu) pastando horas para tentar solucionar esse problema.

Alerta para sortable do UI do jQuery

Wender Lima — Fri, 13 Feb 2009 17:26:58 +0000

Para quem usa a versão 1.5.3 do UI do jQuery e quer atualizar o jQuery para a versão 1.3.1, terá que atualizar seu UI para a versão 1.6rc6.
Eu tive problemas com o callback até descobrir que não era compatível, o sort funciona normalmente, porém o callback(start, stop, etc…) não funciona.

http://ui.jquery.com

Função Live do jQuery

Wender Lima — Mon, 02 Feb 2009 14:28:06 +0000

Aqui vai uma dica pra quem pretende manipular itens dinâmicos em uma página e precisa persistir os eventos dos elementos.
Existia um plugin para jQuery chamado “Live” que agora foi integrado à nova versão do jQuery(1.3.1), vou exemplificar a utilidade desta função.
Imagine que em um sistema você tenha um cadastro de itens, pra cada item que você adiciona, um evento tem que ser atribuído a ele, então o que você faz?

$('li').click(function(){
   alert('Pan!');
})

Só que você terá que executar essa operação de bind todas as vezes, daí vai acontecer algo estranho… fazendo assim você vai somar o bind click em todos os itens que já o possuem, ou seja, no segundo bind, quem já estava “binded” terá 2 alerts e assim por diante, então o que você tinha que fazer?

$('li').unbind();
$('li').click(function(){
   alert('Pan!');
})

Tinha que desfazer o bind e em seguida aplicar novamente.
Com a função Live, você faz o bind apenas uma vez, os novos itens que vão entrando, automaticamente recebem esse bind.

$('li').live('click',function(){
   alert('Pan!');
})

Simples assim!
Para cancelar você pode usar o “preventDefault” no evento

$('li').live('click', function(event){
  event.preventDefault();
});

[]s

A nova API do jQuery ficou muito melhor!

Wender Lima — Mon, 02 Feb 2009 14:00:01 +0000

Lembra daquele ditado que diz: “Em casa de ferreiro, espeto é de pau.” ?
Pois é, antes a API oficial do jQuery era assim, muito lenta, não usava Ajax e era complicado de navegar, por isso eu usava essa aqui “http://jquery.bassistance.de/api-browser/” só que essa parou no tempo, ainda esta na versão 1.1.2 do jQuery.
Mas finalmente, junto com a nova versão do jQuery 1.3.1, eles resolveram tirar da gaveta essa nova API: http://api.jquery.com
Eu gostei muito, principalmente porquê no canto do lado superior direito, mantiveram um filtro, eu uso mais do que tudo, porque muitas vezes você sabe o que quer, mas precisa lembrar de alguma sintax, e na hora você nem lembra se o item faz parte de “Utilities” ou “Traversing” ou sei lá o quê.
Bom, agora acho que posso aposentar a referencia 1.1.2

Uma opção light ao FCKEditor em jQuery

Wender Lima — Wed, 28 Jan 2009 21:48:01 +0000

Pois é, pra quem não precisa de grande coisa em uma administração, ou não quer que seu cliente destrua o layout do site que você fez com tanto carinho… esta é uma ótima opção.
É um editor de texto wysiwyg (What You See Is What You Get)

Depois de incluído os devidos scripts(jQuery e jWYSIWYG), a aplicação do bichinho é muito simples

$(function()
{
    $('#wysiwyg').wysiwyg();
});

A página do projeto você encontra aqui: http://code.google.com/p/jwysiwyg/

SlideShow jQuery com transações fade e legendas flutuantes

Wender Lima — Thu, 27 Nov 2008 15:19:56 +0000

Título grande não?
tentei resumir, mas não deu…
Eu fiz algo como esse muito toscamente, sem fade nem legenda, só para deixar como um tampão numa homepage que não tinha conteúdo… mas isso é com certeza beeemm melhor.

A instalação é bastante simples, você vai precisar da lib jQuery e do plugin s3Slider
os exemplos e arquivos para download você vai encontrar no site do desenvolvedor, o plugin é compatível com todos os browsers mais utilizados atualmente.

Link: http://www.serie3.info/s3slider/index.php

Forms simpáticos

Wender Lima — Tue, 25 Nov 2008 15:44:15 +0000

Aí vai uma dica pra quem gosta de coisas simples e bonitas!
Essa combinação de javascript e css torna aqueles formulários padrão sem graça em simpáticos formulácios com cores e cantos arredondados, muito legal de se ver, vale a pena, principalmente se você quer economizar tempo

Link: http://www.emblematiq.com/projects/niceforms/

Múltiplo select combinado com suggest

Wender Lima — Tue, 21 Oct 2008 16:40:20 +0000

Quem não gosta daquele recurso do gmail onde você consegue selecionar os contatos apenas digitando o começo do nome ou email?
Eu particularmente gosto muito, este exemplo que trago em jQuery ainda precisa de uns ajustes pra ficar realmente produtivo, mas o resultado já é muito bonito de se ver.

Demo: http://www.emposha.com/demo/fcbkcomplete/

Download: http://www.emposha.com/upload/jquerymultiselect1_0_3.zip

Fonte: http://www.emposha.com/javascript/jquery/jquerymultiselect.html

Dojo – Upload múltiplo com flash

Wender Lima — Tue, 21 Oct 2008 14:22:31 +0000

Segue mais um exemplo de upload múltiplo de arquivos usando flash, este usa o Dojo.

O Legal da utilização do flash é que você tem um controle muito preciso do que esta acontecendo com seu upload, você pode saber quanto ja foi transferido e exibir uma barra de progressão e ainda depois exibir na hora o preview da imagem. Claro que o preview você pode fazer de outras maneiras, não precisaria de flash, mas enfim, é muito legal de se ver.

Link do exemplo: https://user.sitepen.com/~mwilcox/dojotoolkit/demos/uploader/demo.html?multiMode

Grid com ordenação e paginação animados

Wender Lima — Thu, 02 Oct 2008 12:34:30 +0000

Outro brinquedinho para o jQuery!
Após a inclusão do script em sua página e uma porrada de CSS… a configuração desse grid fica bastante simples

$(document).ready(function () {
	$('#TABLETOCONTROL').jTPS( {perPages:[5,12,15,50,'ALL']} );
});

O resultado é: Mais um cliente feliz!

Link

Posição do background com jQuery

Wender Lima — Thu, 02 Oct 2008 12:19:47 +0000

Uma opção para quem gosta de menus “enfeitados” como é muito comum ver em site em flash.
Com este plugin jQuery você pode controlar a posição do background de um elemento fazendo com que ele tenha um reação de animação, como deslocamento de um lado para outro, fade.

Link

Coletânea, games em javascript

Wender Lima — Thu, 02 Oct 2008 12:08:06 +0000

Faz um tempo que estou com estas referências guardadas esperando ter um tempinho livre pra postar… como não estou tendo tempo livre, dei um tempo dos meus afazeres e aqui estou rsrs…
Games em javascript são uma opção “lite” para se colocar em homepages, blog, etc…
Segue alguns exemplos:

Muito bacana e nostálgico, o código é bem poluído, mas imagina só o tanto de interação que você tem que controlar, o som provavelmente vem de um swf, é uma pratica muito comum.

Link

Vamos matar alguns Aliens!

Link

Mario Kart

Link

Super Mario

Link

São trabalhos excelentes, você pode conferir varios outro exemplos, aqui http://blog.nihilogic.dk/search/label/games

Linha do tempo do google

Wender Lima — Fri, 26 Sep 2008 13:49:52 +0000

O Google esta lançando em comemoração ao seu aniversário de 10 anos, uma linha do tempo que conta alguns fatos importantes/engraçados na história desta “pequena” empresa.
Confira aqui: http://www.google.com/tenthbirthday/#start

Crop de imagem com jQuery

Wender Lima — Fri, 12 Sep 2008 16:09:57 +0000

Este é mais um lindo exemplo de coisas possíveis de se fazer usando jQuery, um dos meus projetos para breve é fazer um editor de imagem com zoom, crop, rotate e flip… com certeza esse exemplo será utilizado.

o jCrop é mais uma lib jQuery que veio de uma alma abençoada pra ajudar nossa vida!
é muito simples de instalar e configurar e possui vários recursos muito úteis como “thumbnail” que te mostra separado exatamante a area que será recortada, os “Event Handlers” acionam no onChange em tempo real as informações de coordenadas do crop, o “Animation” também é útil para deixar tamanhos e posições pré-programadas para corte, e além disso é muito simples mudar o estilo do cropper, você pode mudar a cor da area e dos cantos do handle.

Exemplo:

jQuery(function() {
		jQuery('#jcrop_target').Jcrop({
			setSelect: [ 20, 130, 480, 230 ],
			addClass: 'custom',
			bgColor: 'yellow',
			bgOpacity: .8,
			sideHandles: false
		});
	});

CSS Customizado:

.custom .jcrop-vline, .custom .jcrop-hline {
	background: yellow;
}
.custom .jcrop-handle {
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

Agora que você ja ficou curioso, segue aí o link http://deepliquid.com/projects/Jcrop/demos.php?demo=handler

Chrome é muito mais rápido que os outros navegadores

Alexandre — Thu, 04 Sep 2008 00:27:41 +0000

Segundo a Google o Chrome ganha disparado dos outros naveganores do mercado na execução de javascript.
Eles publicaram uma página com testes de performance para que os usuários possam fazer a comparação.
A cnet publicou a comparação, e o que mais me impressiona é a distância para os outros navegadores.

Particularmente eu não senti tanta diferença em minhas aplicações, mas eu vou continuar de olho.
Todos sabemos que em alguns casos os testes de performance são escolhidos a dedo para que o seu produto acabe sempre levando a melhor.
Vamos agora acompanhar as reações dos concorrentes, na certeza de que quem mais ganha com essa “guerra” são os usuários, que cada vez mais dispõe de ferramentas melhores e mais eficazes.
Eu vi primeiro no novíssimo Gizmodo Brasil.

Google Chrome browser baseado no Webkit

Alexandre — Wed, 03 Sep 2008 13:39:08 +0000

Ontém o Google lançou seu browser e minhas primeiras impressões sobre ele são boas.
É um navegador baseado no webkit que também é base para o Safari e como o navegador da Apple é bastante leve.
Todas as aplicações javascript que possuo rodaram nele sem problemas.
Gostei do visual “clean”, do recurso de arrastar as abas para fora do navegador e da velocidade no carregamento das páginas.
Ainda não dá para parar de usar o Firefox, mas este me parece um navegador bem promissor, ainda mais com uma grande empresa de Internet por trás.
Se alguém encontrar alguma dificuldade em algum procedimento que envolva javaScript com o Chrome, por favor, deixe seu comentário.
Segue abaixo uma dica de como identificar o Chrome via javaScript:


var chrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;

Be a javascript Rock Star

Alexandre — Fri, 29 Aug 2008 20:37:56 +0000

O site do jquery está de cara nova, com uma estética muito agradável e com aquele toque de informalidade que é a marca dessa geração de desenvolvedores.
O jquery não é apenas uma “library” javascript. É uma filosofia de desenvolvimento que enfoca a facilidade de utilização de suas funcionalidades.
O lema deles é basicamente “Faça mais escrevendo menos” e eu me identifico bastante com essa filosofia.
A algum tempo atrás eu vi um exemplo interessante do poder da simplicidade na sua utilização.
Segue abaixo uma forma de criação de um plugin utilizando o alias $.fn:

$.fn.makeThemRed = function() {
    this.css({color: "red"});
    return this;
}
$("p").makeThemRed();

Ponto para eles e parabéns pelo novo site.

Update:
Parece que algumas pessoas não gostaram do banner “Be a javascript rock star” e o pessoal do Jquery resolveu tirar.
Porém em contra partida colocaram um “Easter egg” no site que é um código bem conhecido daqueles que já jogaram tartarugas ninja.

Selecionando objetos com jQuery

Wender Lima — Mon, 25 Aug 2008 17:51:35 +0000

Este post é uma dica para quem esta iniciando com jQuery, esta lib trabalha com metodo de seleção de objetos semelhante ao empregado por CSS.

Exemplos:
Selecionando objetos, por Tag.
CSS: a{//}
jQuery: $(“a”);

Selecionando objetos, pelo ID.
CSS: #itemMenu{//}
jQuery: $(“#itemMenu”);

Selecionando objetos, por classe.
CSS: .className{//}
jQuery: $(“.className”);

Acho que deu pra entender não é? Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez, exemplo:

$("input, textarea, select, #itemMenu, .className");

Não para por aí… e que tal chamar um elemento dentro de outro objeto específico?

$("input","#idForm");

neste caso estamos selecionando todos os inputs de dentro de um objeto informado pelo id

Caramba… legal hein! Mas como eu pego um objeto pelo nome usando jQuery? (como se fosse o getElementsByName)

$("input[name=nomeDoCara]");

Hmmm então se eu posso pegar pelo nome desse jeito… eu posso procurar por outros atributos!!!

Vamos lá…

$("input[type=checkbox]");

Assim eu peguei todos os inputs do tipo checkbox, mas eu quero só os que estão checados!!
Como faço isso?
Simples

$("input[type=checkbox]:checked");

My Holy God!! That’s Amazing!!!
Yeap… i know!

Mas aqui é só input eu não sei qual tipo de elemento o nome vai ser.
Tchanannn

$("*[name=nomeDoCara]");

sim, você pode usar o asterisco, eu não recomendo fazer isso porque você vai obrigar o jQuery a percorrer tooodo o código da página, o desenpenho ja não é tão legal, mas funciona.

Agora que eu tenho os objetos, posso trabalhar com eles de forma generalizada ou isolada.
Um exemplo generalizado:

$("a").css({color: "red"});

Assim, estou dizendo que todos os links serão vermelhos, eu não conheço cada elemento, mas quero que sejam vermelhos.

Um exemplo de trabalho isolado:

$("a").each(function(){
if($(this).attr("target") == "_blank"){
$(this).css({color: "red"});
};
});

Com a função “each” você pode percorrer cada elemento(representado por “this”) retornado pelo seletor $, neste caso estou verificando se o atributo target é igual a _blank, então só neste caso a cor será vermelha.

Espero que tenha sido útil, qualquer dúvida que tiver, é só mandar no comentário

[]s

FancyBox zoOM de imagem

Wender Lima — Fri, 08 Aug 2008 19:25:01 +0000

O FancyBox é outra linda alternativa para fazer zoom de imagem e impressionar seus clientes e os visitantes do seu site, é uma alternativa ao LightBox com algum diferencial de interface que é complementado com outros scripts, algumas vantagens do FancyBox sobre o LightBox é a opção de iFrame, onde você pode abrir uma outra página dentro de sua janela e o inline code, o que possibilita colocar qualquer conteúdo nele (tabela, video, etc…), very usefull :p

A instalação é muito facil, e o resultado excelente!

tatata…. kd o link???

http://fancy.klade.lv/

enjoy ;p

Upload de múltiplos arquivos com barra de progressão

Wender Lima — Fri, 08 Aug 2008 19:00:41 +0000

Eu sempre procuro coisas como esta, toda vez que pego um novo projeto, mesmo ja tendo feito algo similar antes, eu sempre procuro uma forma melhor ou mais “elegante” de se fazer o mesmo.
Esta dica é de um script jQuery que faz upload de múltiplos arquivos e ainda exibe uma barra de progressão para cada item, segundo o autor, as etapas deste script são estas…

Scripts separados para upload e scripts separados para processar o formulário.
Primeiro, os uploads são processados.
Segundo, o formulário é submetido.
A idéia é validar o formulario antes de fazer o upload, para isso, você usar Ajax como no demo3 do site.

Veja aqui este exemplo: http://uploader.webunity.nl/

Companion.JS, alternativa ao FireBug para IE

Wender Lima — Thu, 31 Jul 2008 20:02:11 +0000

Se você é como eu e odeia aquela janelinha de erro de JS do IE, o companion.js é uma ótima alternativa para debugar o javascript no IE.
Com console semelhante ao Firebug, o companion.JS é uma ótima ferramenta para monitorar as ações de javascript do seu site dentro do IE

Aproveite http://www.my-debugbar.com/wiki/CompanionJS/HomePage

ProtoChart – mais gráficos, agora com Prototype e Canvas.

Alexandre — Tue, 29 Jul 2008 15:31:56 +0000

Existem várias alternativas de gráficos dinâmicos na web, mais é sempre interessante ver um projeto dessa natureza crescendo, ainda mais opensource.
O Protochart é um projeto que utiliza a biblioteca Prototype para gerar gráficos nos formatos:

Linha;
Barra;
Pizza;
Curva;
Área;
Mistos.

E possui como características principais:

Séries múltiplas no mesmo gráfico;
Suporte a legenda;
Grides customizaveis;
Valores customizaveis para os eixos.

Vale a pena conferir.
Eu vi primeiro aqui.

Ferramenta para desenvolvimento javascript (JSDT) vídeo demonstração.

Alexandre — Thu, 24 Jul 2008 14:28:04 +0000

Eu gosto do Eclipse. Se você tiver um pouco de paciência com o trato com plugins e versões aposto que você também não vai conseguir utilizar outra IDE.
A integração desta ferramentas com outros serviços, como controle de verções e sistemas de controle de mudanças, acabam se tornando indispensáveis para um desenvolvedor de alto nível.
Bradley Childs disponibilizou hoje um video de demostração das principais características JSDT (JavaScript Development tools) um plugin para o eclipse que faz parte do projeto WTP .
Existem outras alternativas para o desenvolvimento javascript como o Aptana, mas como o JSDT é um projeto oficial do eclipse, é bom ficar de olho.

Gráficos com jQuery

Wender Lima — Mon, 21 Jul 2008 18:32:28 +0000

Quer gerar gráficos online? em tempo real?
Esta pode ser uma solução, se trata de um gerador de gráfico baseado na lib jQuery que permite interação em tempo real, é compatível com os navegadores mais utilizados e seu uso é bastante simples, como costuma ser todo plugin jQuery.

jQuery Sparklines

Veja aqui: http://omnipotent.net/jquery.sparkline/

Grid completo com jQuery

Wender Lima — Mon, 14 Jul 2008 15:51:28 +0000

Vai aí mais uma dica pra quem procura uma solução de Grid, o Flexigrid feito por “Paulo Mariñas” além da ordenação de dados, ainda fornece a possibilidade de troca de colunas, adição/remoção de colunas, busca, paginação, resize e interação com o servidor.
Coloquem nos seus bookmarks

http://webplicity.net/flexigrid/

Growl agora também em jQuery

Wender Lima — Tue, 08 Jul 2008 13:08:07 +0000

Pra quem ja é familiarizado com o Growl, que é um framework utilizado nos Macs OSX, agora ja pode encontrar o plugin para o jQuery que fornece mensagens tão “simpáticas” quanto!
Vale a pena conferir, com certeza será muito útil!

Aí vai a dica: http://stanlemon.net/projects/jgrowl.html

Coloque ordenação em suas tabelas

Wender Lima — Mon, 30 Jun 2008 10:40:34 +0000

Acho que essa é uma boa dica de código para uso cotidiano em suas aplicações Ajax, este é um script que torna muito simples o trabalho de fazer ordenação de dados em uma lista de produtos por exemplo.
O script feito pelo Stuart Langridge faz este trabalho de uma forma muito simples, é possível ordenar texto, datas, números e moeda.
Se você esta precisando ou é como eu que sempre tem uma boa dica no bookmark… aí vai o link do garoto!

http://www.kryogenix.org/code/browser/sorttable/

Busca de CEP 100% Ajax

Wender Lima — Mon, 23 Jun 2008 21:52:05 +0000

Algum tempo atrás eu publiquei para o iMasters uma matéria sobre busca de endereço pelo CEP, no exemplo eu usei um pouco de jQuery e ColdFusion, mas para este exemplo eu vou utilizar 100% ajax, graças ao retorno fornecido pelo site http://cep.republicavirtual.com.br/
Para este exemplo, vamos utilizar somente a lib jQuery
Vou usar um formulário simples para exemplo, com somente os campos que preciso:
O formulário é simples, a única coisa diferente é o atributo “onBlur” no campo “cep”
o onBlur executa um comando javascript assim que o campo perde o fóco, neste caso eu chamo a função javascript “getEndereco()”

 

  Formulário de exemplo
  CEP:


  Logadouro:


  Bairro:


  Cidade:


  Estado

Não esquecendo de fazer o include da lib do jQuery
Este será o Script

	// Função única que fará a transação
	function getEndereco() {
			// Se o campo CEP não estiver vazio
			if($.trim($("#cep").val()) != ""){
				/*
					Para conectar no serviço e executar o json, precisamos usar a função
					getScript do jQuery, o getScript e o dataType:"jsonp" conseguem fazer o cross-domain, os outros
					dataTypes não possibilitam esta interação entre domínios diferentes
					Estou chamando a url do serviço passando o parâmetro "formato=javascript" e o CEP digitado no formulário
					http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val()
				*/
				$.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val(), function(){
					// o getScript dá um eval no script, então é só ler!
					//Se o resultado for igual a 1
			  		if(resultadoCEP["resultado"]){
						// troca o valor dos elementos
						$("#rua").val(unescape(resultadoCEP["tipo_logradouro"])+": "+unescape(resultadoCEP["logradouro"]));
						$("#bairro").val(unescape(resultadoCEP["bairro"]));
						$("#cidade").val(unescape(resultadoCEP["cidade"]));
						$("#estado").val(unescape(resultadoCEP["uf"]));
					}else{
						alert("Endereço não encontrado");
					}
				});
			}
	}

Os arquivos deste exemplo você pode baixar aqui http://www.ajaxianos.com.br/arquivos/cepSomentejQuery.zip

Preload de imagens do CSS

Wender Lima — Fri, 20 Jun 2008 14:09:32 +0000

O Scott Jehl, fez um plugin pra jQuery que resolve um problema chato na maioria dos layouts tableless que usam os recursos de “hover” para trocar imagens, este plugin faz uma varredura nos arquivos CSS embedados na página, e busca dentro deles todas as referencias de imagens e faz o pré-carregamento delas, assim, quando o usuário passa o mouse sobre algum item do menu(por exemplo) a imagem da ação “hover” do CSS é exibida imediatamente.
É mais uma das coisas que eu penso… “Como não pensei nisso antes?”
Na verdade, esta é uma versão mais atual de um script que ele ja havia escrito, mas o anterior carregava somente as imagens de um único diretório, o que impedia que o script carregasse as imagens de outros diretórios ou até mesmo de outros sites, mas esta atualização permite fazer o preload das imagens, não importando onde elas estejam.

Este é o código do plugin:
http://www.ajaxianos.com.br/arquivos/preloadCssImages.jQuery_v2.js

/**
 * --------------------------------------------------------------------
 * jQuery-Plugin "preloadCssImages"
 * by Scott Jehl, scott@filamentgroup.com
 * http://www.filamentgroup.com
 * reference article: http://www.filamentgroup.com/lab/automated_image_preloading/
 * demo page: http://www.filamentgroup.com/examples/preloadImages/
 * 
 * Copyright ©2008 Filament Group, Inc
 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 *
 * Version: 2.0, 06.04.2008
 * Changelog:
 * 	02.20.2008 initial Version 1.0
 *  06.04.2008 Version 2.0 : removed need for any passed arguments. Images load from any and all directories.
 * --------------------------------------------------------------------
 */
jQuery.preloadCssImages = function(){
	var allImgs = [];//new array for all the image urls  
	var k = 0; //iterator for adding images
	var sheets = document.styleSheets;//array of stylesheets
	
	for(var i = 0; i0 && imgUrls != ''){//loop array
			var arr = jQuery.makeArray(imgUrls);//create array from regex obj	 
			jQuery(arr).each(function(){
				allImgs[ k ] = new Image(); //new img obj
				allImgs[ k ].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this;	//set src either absolute or rel to css dir
				k++;
			});
		}
	}//loop
	return allImgs;
}

Para usar, além de ter a Lib jQuery na sua página(óbvio), basta rodar este comando:

$.preloadCssImages();

Eu particularmente executaria depois que a página estivesse inteiramente carregada, usando a função “ready” do jQuery:

$(document).ready(function(){$.preloadCssImages();});

Na página do Scott você pode ver um exemplo dessa belezinha funcionando
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Barra de progresso com prototype

Wender Lima — Thu, 19 Jun 2008 15:41:07 +0000

A WebAppers fez um plugin muito bom para o Prototype, trata-se de uma barra de progresso “estilizada”, eu ja costumo usar barra de progresso para alguns processos demorados que tratam de um grande volume de dados como, Importação de usuários, Re-publicação de matérias, Geração de Massa ou Backup, para tudo o que eu consigo separar e mensurar a execução do processo! Mas ainda não tinha visto uma tão “bonitinha”, e como todos sabemos, á a aparência do seu sistema que vende.

Vale a pena conferir

Firefox 3 e Firebug

Alexandre — Wed, 18 Jun 2008 02:48:10 +0000

Hoje o assunto não poderia ser outro.

É o tão anuciado “download day” do Firefox 3. Na verdade o “evento” se estende até as 15h16 de amanhã, dia 18 de junho, horário de Brasília.

Acabo de baixar o navegador na velocidade máxima permitida pela minha conexão.

O Firefox, como de costume, verificou a compatibilidade de todas as extenções e, para minha preocupação, o firebug foi uma das extenções incompatíveis.

Para quem ainda não conhece o firebug é uma extenção do Firefox que, entre outras coisas, possibilita o debug de javascript. Ela é a melhor amiga de um desenvolvedor web e vai render um post só para ela em breve.

O navegador atualizou extenções como PDF download e Download Status Bar, mas não atualizou o firebug.

Foi preciso navegar até o site de complementos para o Firefox para descobrir que o o firebug mantém agora duas versões, uma para quem ainda utiliza o Firefox 2 e outra para quem atualizou para a nova versão.

Só consegui atualizar a extensão pelo direto pelo site, por isso deixo o link direto para vocês

PS: Para os clientes do Banco Real: o complemento de segurança do banco ainda não é compatível com a nova versão do Firefox.

Contador de downloads do Firefox Day

Wender Lima — Wed, 18 Jun 2008 01:59:59 +0000

É, como eu havia imaginado, no começo foi muito complicado aguentar a demanda dos downloads, assim que foi liberado eu fiz o download em pouco mais de 1 minuto, mas depois que reparei que nem as páginas estavam ficando de pé, resolvi baixar novamente, e fiz o download com uma taxa de 7k :s isso com banda de 2mb!
Mas enfim, minhas fontes confiáveis da mozilla disseram que foi só no começo, depois eles deram um jeito!

O mais legal de bater um record desses, é que antes isso nunca foi item para o guinness book, sendo assim, eles serão os primeiros… mas teria que ter uma categoria pra isso, porque que eu saiba, o flashplayer é o software mais baixado do mundo! normalmente são feitos mais downloads do flashplayer do existem computadores no mundo!!! Não acredita? Olha sá!
http://www.forta.com/blog/index.cfm/2008/5/29/Sorry-Firefox-Download-Day-Wont-Set-Any-Records
E pra quem quer acompanhar como estão indo os downloads do FF3, este é o link!
http://downloadcounter.sj.mozilla.com/

Firefox 3… é hoje!

Wender Lima — Tue, 17 Jun 2008 18:07:19 +0000

É isso ai pessoal, vamos ficar de olho hoje no site da mozilla para fazer o download da versão 3.0 do firefox!
Vamos ajudar a mozilla a bater o record de software mais baixando em um único dia!

Será que os servidores deles aguentam?
Agora a pouco entrei e estava down huahua!!

Download Day 2008

Convertendo meus links para ajax

Wender Lima — Sat, 14 Jun 2008 19:23:39 +0000

Um outro recurso que costumo aplicar em meus projetos é a conversão dos links para ajax, como isso funciona afinal? pra que raios isso serve? o que melhora? não posso ja fazer o site inteiro em ajax?

Bom, vou responder estas perguntas durante este exemplo!
1º Por que não é recomendado fazer o site 100% em ajax?
- Simples, porque os robôs de busca como o Google, não processam javascript, então se você quiser ter o seu conteúdo indexado por ele, terá que possibilitar sua leitura sem o uso de javascript

2º O que melhora?
- Quando seu site é carregado pela primeira vez, todo o seu template é carregado, e a cada clique, lá vai o browser carregar tudo novamente… isso gera uma sobrecarga desnecessária, usando o Ajax para carregar somente o conteúdo do seu site, além de mais rápido, você tem um aproveitamento de performance e consumo de tráfego no servidor, assim, todo mundo sai ganhando!

3º Como isso funciona?
- Para que o script funcione corretamente, o seu site tem que ter uma estrutura preparada para isso, ou seja, tem que existir algum parâmetro onde você possa desabilitar o layout do lado do servidor, assim, quando você fizer a requisição via ajax, somente o conteúdo será retornado.

Ok, agora que temos as explicações e o conceito, vamos codificar :p
Vou utilizar somente a lib jquery

// Converte todos os links para Ajax
function convert2Ajax(){
// Busco na pagina, todas as tags "a", e para cada uma encontrada eu faço uma verificação
	$("a").each(
		function(){
			// Vejo os primeiros 6 caracteres do conteúdo do atributo href
			var linkType = $(this).attr("href").substring(0,6);
			// Se o link não for de javascript ou mailto
			if(linkType != "javasc" && linkType != "mailto"){
				// Se não existe o atributo "target"
				if(!$(this).attr("target")){
				/*
				Aqui eu faço uma graça, mudo o status da pagina para a descrição/texto do link
				*/
				$(this).mouseover(function(){
						   window.status = $.trim($(this).html());
						   return (true);
							   }).mouseout(function(){
							   window.status = $.trim($(this).html());
							   return (true);
							   });
				// Finalmente troco o conteúdo do href pelo comando javascript que vai chamar a função ajax
				// Antes eu colocava javascript:void(0); mas depois que adquiri um MacBook percebi
				// que não funcionava bem no safari, então passei a chamar assim mesmo!
				$(this).attr("href","javascript:carregaConteudo('"+$(this).attr("href")+"&Ajax=true');");
			}
		}
	}
)}

Analisando o código, você pode verificar que estou acrescentando o parâmetro “Ajax=true” à url na entrada de dados da função “carregaConteudo”, no servidor, este parmetro inibe o layout do site, trazendo somente o conteúdo.

A função que carrega o conteúdo é extremamante simples

function carregaConteudo(url){
	$.ajax({
		url: url,
		data:{},
		dataType:"html",
		beforeSend: function(){
			// Antes de enviar a requisição, exibo a mensagem "Carregando"
			$("#loading").show();
		},
		success: function(r){
			// Se ocorrer tudo bem, insiro o conteúdo retornado na div #contentRight
			$("#contentRight").html(r);
			// Após o carregamento, chamo novamente a função convert2Ajax para o caso
			// de ainda existir algum link no novo conteúdo
			convert2Ajax();
		},
		complete:function(){
			// Depois de concluído o processo, eu escondo a mensagem "Carregando"
			$('#loading').hide();
		},
		error: function(r){
			// Se ocorrer algum erro, também escondo a mensagem
			$('#loading').hide();
		}
	});
}

Para iniciar o processo no site, use o seguinte script, atenção, é extremamente complicado!

//Quando a página estiver pronta/carregada...
$(document).ready(
	function(){
		// Chama a função convert2Ajax
		convert2Ajax();
	}
);

É só isso, você pode conferir este exemplo em uso no site www.oapce.com.br, experimente desabilitar o javascript do navegador para comprovar o funcionamento nas duas situações!

Valeu!

Dump Javascript

Alexandre — Sat, 14 Jun 2008 00:16:52 +0000

Esta é uma função muito simples, mas que pode fazer uma grande diferença na hora de começar a desenvolver com javascript.
Conseguir identificar as propriedades de um objeto é importante principalmente para desenvolvimentos com código coletivo ou que utilizam muitos frameworks.

function jsDump( objeto, recursividade )
{
    document.writeln("")
    for ( prop in objeto )
    {
        var tipo = typeof objeto[prop];
        var valor = objeto[prop]+"";
        //Eliminando o conteudo das funcoes
        valor = valor.replace(/\{[^\{]*\}/g,"");
        document.writeln(" ("+tipo+") "+prop+" =>"+valor+"<\/li>");

        // implementando a recursividade
        if (recursividade > 0 && tipo ==  "object")
        {
            jsDump(objeto[prop],recursividade-1);
        }
    }
    document.writeln("<\/ul>");
}

Uma outra alternativa, principalmente para quem gosta de Coldfusion, é este outro método baseado na tag do ColdFusion.

Verificando se a senha é segura

Wender Lima — Fri, 13 Jun 2008 20:02:34 +0000

No site hakc.net você pode encontrar um exemplo muito bom de um script que diz se sua senha é segura

É uma boa pra quem quer ajudar os usuários a não usar senhas do tipo “123″ ou a data de aniversário :p

Focando o primeiro elemento no conteúdo da página

Wender Lima — Thu, 12 Jun 2008 01:24:38 +0000

Eu reparei uma dificuldade muito grande do meu irmão ao tentar acessar o conteúdo da administração de seu site, usando software de leitura de tela( ja que ele é deficiente visual), os itens do menu possuem atalho, basta ele pressionar ALT + M e o foco vai para o primeiro item do menu, mas para chegar até o conteúdo das páginas, ele precisa passar por todos os itens do menu antes, para resolver isso eu criei um script muito simples usando a lib jQuery

// assim que a página é carregada
$(document).ready(function(){
	// Verifico se existe algum link
	if($("#contentAdm a").length > 0){
		// se existir, eu dou foco nele e crio um atalho ALT + C 
		// para ir direto para o elemento
		$("#contentAdm a").get(0).focus();
		$("#contentAdm a").get(0).attr("accesskey","C");
	}else{
		// Caso contrario, faço o mesmo para elementos Input
		if($("#contentAdm input").length > 0){
			$("#contentAdm input").get(0).focus();
			$("#contentAdm input").get(0).attr("accesskey","C");
		};
	};
});

Espero que seja útil pra você também