Olá,

Recentemente criei um plugin para o jQuery que cria um menu dropdown apartir de um elemento e um evento associado.

Por exemplo, você pode fazer o menu aparecer ao clicar sobre um botão ou ao clicar duas vezes sobre uma imagem.

O funcionamento é bem simples e já vem com um estilo padrão bem elegante.

Testei nos navegadores:

FF 3, Chrome 10, IE9, IE8, Opera 10.

Demo:

http://www.prsolucoes.com/dropDownMenu

Download:

http://www.prsolucoes.com/dropDownMenu/dropDownMenu.zip

Imagem:

Olá,

Hoje vou deixar uma dica interessante para quem usa o FCKEditor.

As vezes precisamos pegar ou editar o texto do editor, mas o problema é que fica tudo dentro de um IFRAME, e fazer tudo manualmente é bem complexo.

Pensando nisso no FCKEditor existe uma API de acesso às funcionalidades do editor, e duas delas são exatamente estas, obter e alterar o conteúdo HTML.

Para obter o conteúdo do editor precisamos usar a seguinte função em javascript:

var editor = FCKeditorAPI.GetInstance(‘ID_DO_FCK_CRIADO‘);
conteudo = editor.GetHTML();
alert(conteudo);

Para alterar o conteúdo do editor precisamos usar a seguinte função em javascript:

var editor = FCKeditorAPI.GetInstance(‘ID_DO_FCK_CRIADO‘);
editor.SetHTML(‘mudei o conteúdo‘);

Obs: Você deve trocar o texto ID_DO_FCK_CRIADO, para o ID usado quando você criou o FCKEditor em sua página.

Um abraço a todos,

Fiquem com Deus.

Olá,

Não sei se já perceberam, mas no Gmail existe um recurso de notificações, que só funciona no Google Chrome.

Essas notificações aparecem quando você recebe um novo email, por exemplo.

Estas notificações não foram inventadas exclusivamente para o Google Chrome, na verdade é um padrão W3C que está sendo implementado aos poucos nos navegadores, mas somente no Chrome já está funcionando.

Referência: http://dev.w3.org/2006/webapi/WebNotifications/publish/Notifications.html

Mas como podemos usufruir deste recurso em nossos websites?

É bem simples, usando obviamente javascript, temos acesso a tudo. Os passos básicos são:

1 – Verificar se o navegador tem suporte

2 – Pedir permissão para exibir notificações

3 – Exibir as notificações

Vamos ao que interessa, o código:

function verificarSuporte()
{

var c = ( window.webkitNotifications !== undefined );

if ( !c )
{

alert(“Seu navegador não suporta notificações desktop. Por favor, use o Google Chrome!”);

}

return c;

}

Esta função é a que verifica se o seu navegador tem suporte a notificações desktop ou não. Se o navegador não suportar, a função exibe um alert.

function verificarPermissao()

{

if ( !verificarSuporte() ) return;

switch ( webkitNotifications.checkPermission() )

{

case 0: // PERMITIDO

alert( “Permitido” );

break;

case 1: // NÃO PERMITIDO

alert( “Não permitido” );

break;

case 2: // PERMISSÃO NEGADA

alert( “Permissão negada” );

break;

}

}

Esta função é a que verifica a permissão de exibir as notificações que seu navegador definiu para a sua página. Para cada caso de permissão, é exibido um alert com a descrição.

function solicitarPermissao()

{

if ( !verificarSuporte() ) return;

webkitNotifications.requestPermission();

}

Esta função que solicita ao navegador a permissão de exibir as notificações. Assim que ela é chamada, o navegador exibe uma caixa de confirmação.

function testeDeNotificacao()

{

if ( !verificarSuporte() ) return;

if ( webkitNotifications.checkPermission() == 0 )

{

var icone = “http://www.prsolucoes.com/downloads/logo_notificacao.png”;

var titulo = “Mensagem de PRSoluções”;

var subTitulo = “Eu irei desaparecer em 10 segundos!”;

var notificacao = webkitNotifications.createNotification( icone, titulo, subTitulo );

notificacao.show();

setTimeout( function() { notificacao.cancel() }, 10000 );

}

else

{

alert( “Por favor, solicite permissão primeiro.” );

}

}

Esta função exibe a notificação em si. É bem simples, basta passar a url do icone, o título e o sub-título.

Para ver um demo destas funcionalidades, acesse:

http://www.prsolucoes.com/notificacao/

Até a próxima.

Olá,

Recentemente tive a necessidade de trocar todo o código javascript que estava usando prototype para jquery, porém surgiu o seguinte problema, todos os elementos que eu precisava buscar pelo ID tinha um ponto (.) no ID, por exemplo:

<input type=”text” id=”individualCustomer.name” value=”" />

Mas se você usar o jquery da forma normal para pegar este elemento pelo ID, você não vai conseguir, algo como:

<script type=”text/javascript”>

alert($(‘individualCustomer.name’).val());

</script>

Isso porque no jquery pensa que o que está depois do ponto, e uma classe (class).

Então como resolver?

Após vários testes, descobri a seguinte solução:

<script type=”text/javascript”>

alert($(‘individualCustomer\\.name’).val());

</script>

O que mudou? Bastou colocar duas barras antes do ponto, assim: “\\.”

Com isso você faz um escape da barra e deixa pro jquery trocar o que sobrar, que será “\.”, pelo próprio ponto.

Bem simples a solução, mas não tinha encontrada nada sobre isso no Google, e quase refatorei todo o código, mas o problema é que o próprio framework Wicket do Java, adiciona o ponto no namespace quando um componente faz parte de uma hierarquia, como uma caixa de texto de um form.

Olá,

Hoje recebi uma indicação muito interessante, trata-se do framework para front-end, ou seja, para a parte cliente do seu projeto web, ou em outras palavras, html+css+javascript.

O nome do framework é EasyFramework, e como o próprio nome diz, é bem fácil de usar, você adiciona apenas alguns arquivos(css e js) no header da sua página e está tudo pronto.

Ele é dividido em 3 camadas: estrutural, apresentação e interatividade, o que nos da mais um ponto, a organização.

Ele é bem útil pois supre todos os estilos e scripts básicos que usamos em nossas aplicações web, sem precisar ficar pegando pedaços de outros frameworks que existem por ai.

Este é um framework que vale a pena adotar, eu achei excelente e com certeza em novos projetos a PRSoluções já adotará ele.

Ah, ele usa jquery, mais um ponto positivo.

Vou mostrar uma técnica para bloquear o Firebug no seu site.

Para quem não conhece: https://addons.mozilla.org/pt-BR/firefox/addon/1843

Segue a dica:

<script type=”text/javascript”>
if( window.console && window.console.firebug ){
alert(“Desculpe, este site não suporta o Firebug!”);
window.location=’/sem_firebug.html’;
}
</script>

Bem simples né? Apenas um scriptzinho.

Abraços e até a próxima.