Preview imagem antes do upload sem distorcer na exibição

Requisitos: JQUERY HTML:

...
<input type="file" name="imagem_upload" id="id_foto">
<div id="img2"></div>
...

CSS:

 #img2 {
    width: 80px; height: 80px;
    background: url(imagem-padrao.jpg) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 50%; left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    border: 5px solid #fff;
    z-index: 1;
}

JAVASCRIPT:

$('#id_foto').live('change', function(){
 var input = document.getElementById("id_foto");
 var fReader = new FileReader();
 fReader.readAsDataURL(input.files[0]);
 fReader.onloadend = function(event){
  $("#img2").css('background', 'url('+event.target.result+') no-repeat center center');
  $("#img2").css('background-size', 'cover');
 }
});

Configurando Apache no OS Yosemite para funcionar LOCALHOST na pasta Sites

Abra o arquivo /etc/apache2/httpd.conf com o editor de sua preferencia:

sudo nano /etc/apache2/httpd.conf

E deixe como a seguir, configurando o caminho para seu suarios

DocumentRoot "/Users/myusername/Sites"

<Directory "/Users/myusername/Sites">

    Options Indexes FollowSymLinks Multiviews

    MultiviewsMatch Any

    AllowOverride All

</Directory>

Salve e reinicie o apache

sudo apachectl restart

Depois basta abrir o navegador e digitar http://localhost

hasta!

Como adicionar ou atualizar algum parametro da querystring via javascript

Surgiu a seguinte necessidade: Tinha uns filtros que utilizavam o método GET para enviar os valores. Como tinha mais que um e precisava deles de forma cumulativa, como fazer para pegar os filtros pré enviados e mantê-los num novo filtro?

Precisei verificar se o parâmetro já estava enviado e atualizá-lo se sim, ou incluí-lo se não.


O CÓDIGO:

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi");

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            var hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null)
                url += '#' + hash[1];
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?',
                hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null)
                url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }
}

O USO:

location.href = UpdateQueryString('seu_parametro',SEU_VALOR);

hasta!

App de cidades e estados brasileiros

Vez ou outra é necessário cadastrar a cidade e o estado em um formulário de algum projeto, seja para cadastro de perfis, pedidos, etc.

Quando tem endereço envolvido ainda é mais fácil, pois existem diversos webservices que fornecem o nome da forma correta, como consta nos correios. O problema acontece quando desejamos apenas cidade e estado.

Sempre aparece alguns "espertinhos" (pra não dizer outra coisa), que escrevem sua cidade cada hora de um jeito, abreviando das mais diversas maneiras, e com isso, o banco fica uma bagunça quando precisa-se filtrar ou tirar um relatório baseado em cidades.

Por isso, resolvi montar um banco com base nas informações dispostas no site do IBGE (http://www.cidades.ibge.gov.br/xtras/home.php - atualizado em 2010) para ajudar com esta tarefa.

Espero que ajude outros programadores.

Segue o link: https://github.com/zejuniortdr/cidades-br

hasta!

Compartilhar um link com uma imagem específica no Facebook

Por que quando se compartilha um link no Facebook, este pega uma imagem aleatória do site? Bom, li em vários lugares dizendo que não é bem assim. Ele tem uma premissas que fazem a escolha das imagens.

Algumas que vi, envolvem passar alguns parâmetros por metatags. Contudo, não deu muito certo.

Então tem alguma forma de fazer isso de maneira direta? Como a antiga url sharer? Tem. Bom, mais ou menos.

Aqui vão os passos:

• Em https://developers.facebook.com/apps, crie uma aplicação com nome e namespace.
• Nos detalhes da APP pode colocar como Page Tab e preencher os dados. Mas acho que não tem necessidade. Eu usei pagetab, pois já serviu para outro propósito.
• No seu site, adicione a classe 'fb-share' ao elemento que será seu botão para a ação de compartilhar o link no Facebook
• Em algum lugar, junto com seus JS, coloque o código abaixo:

$('.fb-share').click(function(event) {
 /* Act on the event */
 var app_id = 'SUA_APP_ID_AQUI'
 var title = "SEU TITULO AQUI";
 var summary = "SUA DESCRICAO AQUI";
 var link = "http://www.LINK-DO-SEU-SITE-AQUI.com.br/";
 var image = link+"CAMINHO/DA/IMAGEM.png";
 var caption = "ASSINATURA DO SITE AQUI"
 var fb_share = 'https://www.facebook.com/dialog/feed?'+
      'app_id='+app_id+'&'+
      'link='+link+'&'+
      'picture='+image+'&'+
      'name='+title+'&'+
      'caption='+caption +'&'+
      'description='+summary+'&'+
      'redirect_uri='+link;
 window.open(fb_share);
});

• Lembre-se de ao criar como pagetab, colocar os links iguais com relação a ter ou não a barra no fim, isso pode ocasionar um erro informando que a redirect_uri não pertente a aplicação.