ajaxPost - submeter formulários via Post facilmente

Ae cidadãos e cidadoas,
Sei que ninguém vai ler essa parada hoje, mas Feliz Natal (atrazado, agora já era) e próspero ano novo. Pois é...
Bom, lembram-se quando eu fiz a velha e boa função pra ajax simples ajaxGet? Pois é...
Lembram-se que o malandro aqui prometeu fazer uma versão pra submeter formulários via 'Post' também? Pois é...
Passados mil anos, o atoa aqui ainda não fez. Mas teve uma boa alma, amigo da criançada, membro do Webly que fez: o Cráudio, ops Klawdyo.
A parada ficou beleza. Ainda não testei 100% pois resolvi usar este ânimo pra fazer logo uma nova função pra ajax ultra-simples.
Então quem quiser submeter formulários via post através de ajax já sabe: usem a ajaxPost do José Cláudio e do Micox. :)
Em breve uma nova função fácil pra ajax englobando submissão simples, de formulários, função de callback (retorno), etc, etc.
I'll be back!
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Animação para div aparecer gradativamente (alterando dimensões)

Hopa.

Que tal ao invés de usar simplesmente o velho "display: block" pra deixar determinada div visível, usar uma animaçãozinha pra dar um efeito especial melhor no seu site.

Veja aqui um exemplo.

Este tipo de coisa está disponível em todo framework javascript que se preze. Mas se você não tá afim de mexer com frameworks, é só adicionar a função abaixo na sua biblioteca:

function aparece(quem,speed){
    //Aparece o 'quem' gradativamente na velocidade especificada em speed (high, normal, slow)
    //by Micox - http://www.elmicox.com/2007/animacao-para-div-aparecer-gradativamente/
    
    if(typeof(quem)=='string'){
        quem = document.getElementById(quem);
    }
    if(typeof(window['micoxApareceGradativamente'+quem.id])!='undefined'){ 
        //esta animação já está em execucao, saio
        return true
    }
     var sty = quem.style;
     sty.visibility = 'hidden'
     var pos_init = sty.position;
     sty.position = 'absolute';
     if(sty.display=='none'){ sty.display = 'block' }
     var alt_init = parseInt(quem.offsetHeight);
     var lar_init = parseInt(quem.offsetWidth);
     var over_ini = sty.overflow;
     sty.overflow = 'hidden';
     sty.visibility = 'visible';    
     sty.height = '0px';
     sty.width = '0px';
    
     if(typeof(quem.timeAparece)!='undefined'){
         clearInterval(quem.timeAparece);
     }
     quem.timeAparece=null;
    
     var loop = function(){
         var alt_atu = parseInt(sty.height);
         var lar_atu = parseInt(sty.width);
         if(alt_atu < alt_init){
             sty.height = (alt_atu + 5) + 'px';
         }
         if(lar_atu < lar_init){
             sty.width = (lar_atu + 25) + 'px';
         }
         if(alt_atu == 0 ){
             sty.position = pos_init;
         }
         if(alt_atu >= alt_init && lar_atu >= lar_init){
             //acabou
             clearInterval(quem.timeAparece);
             delete window['micoxApareceGradativamente'+quem.id];
             sty.height = (alt_init) + 'px';
             sty.width = (lar_init) + 'px';
             sty.overflow = over_ini;
         }
     }
     switch(speed){
         case 'high': speed = 1; break;
         case 'normal': speed = 20; break;
         case 'slow': speed = 40; break;
         default: speed = 10;
     }
     window['micoxApareceGradativamente'+quem.id] = true;
     quem.timeAparece = setInterval(loop,speed);
}

Exemplo de uso (passando o ID):

<span onclick='aparece("apa","slow")'>clica</span>
<div id='apa' style='display: none; border: 1px solid black;'>asdfçlaksdfçl alsjdfçlajsdçlfjaçsldjfçlajsdçflj açlsdfjksd
asdfaslçkdfjçlaj<br />aç jdfljaçsldjkfçlaskjd f<br />lça jçdfljaçsdl fjkçalsjdf çlkajsçdlf</div>

Ou passando a referencia do elemento:

<span onclick='aparece(document.getElementById("apa"),"slow")'>clica</span>
<div id='apa' style='display: none; border: 1px solid black;'>asdfçlaksdfçl alsjdfçlajsdçlfjaçsldjfçlajsdçflj açlsdfjksd
asdfaslçkdfjçlaj<br />aç jdfljaçsldjkfçlaskjd f<br />lça jçdfljaçsdl fjkçalsjdf çlkajsçdlf</div>

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.