tadarank afiliados

26 setembro, 2007

Iframe com altura automática de acordo com o conteúdo

Opa. Post rápido com código pequeno: Auto-dimensionamento de iframe

Editado por causa de um bug no IE.

Script rápido que muita gente procura e fica brigando com códigos gigantescos.
Atenção: só funciona para iframes do mesmo domínio. De outro domínio dá erro de segurança.


<script type='text/javascript'>
function iframeAutoHeight(quem){
    //by Micox - elmicox.blogspot.com - elmicox.com - webly.com.br  
    if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks
        var func_temp = function(){
            var val_temp = quem.contentWindow.document.body.scrollHeight + 15
            quem.style.height = val_temp + "px";
        }
        setTimeout(function() { func_temp() },100) //ie sucks
    }else{
        var val = quem.contentWindow.document.body.parentNode.offsetHeight + 15
        quem.style.height= val + "px";
    }    
}
</script>

uso no onload do iframe:


<iframe id='ha' src='teste.php' onload='iframeAutoHeight(this)' frameborder='0'></iframe>
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

25 setembro, 2007

Simulando position fixed no Internet Explorer (IE) - sem javascript

Bom, todo mundo sabe que a propriedade position igual a fixed faz com que o elemento fique fixo na janela do browser independente da movimentação da barra de rolagem.

Isto é uma verdade pra navegadores que seguem bem os padrões (OP, FF,etc) mas para o IE (Internet Explorer até o 7) isto não funciona. Simplesmente não funciona.

Como resolver isto SEM JAVASCRIPT só no CSS?

Primeiramente imagine duas divs dentro de um documento:

- Uma das divs tem dimensões de 400x400, tem um texto gigantesco como conteúdo, porém seu overflow é scroll, o que permite que seja possível ler o conteúdo gigantesco.

- A outra div é uma pequena imagem de 25x25 que está posicionada exatamente sobre a div do conteúdo anterior.

...

Bom, se eu mexer a barra de rolagem da div do conteúdo não irá interferir em nada na movimentação da div que tem a imagem. A imagem continuará quieta sobre o texto.

Bingo!! Agora é só aumentar o tamanho da div com conteúdo pra ocupar a janela inteira.

Pra você não ter que quebrar a cabeça eu já deixei o código prontim só pra você inserir no seu documento (e fazer adaptações se achar necessário).

O Exemplo: Simulando position fixed no Internet Explorer - IE

O código pronto

<style type="text/css">
 /* FAZ OS POSITION FIXED NOS NAVEGADORES PADRÃO (não mexa) */
 .fixed { position: fixed !important; }
</style>
<!--[if lt IE 7]>
 <style type="text/css">
  /* FAZ O POSITION FIXED PARA O IE (não mexa).
   Para funcionar o DTD do documento deve estar correto. E não ser quirksMode
   By Micox - micoxjcg@yahoo.com.br - elmicox.com - elmicox.blogspot.com
   */
  .fixed { position: absolute !important; }
  body { height: 100% !important; width: 100% !important; 
      margin: 0 !important; position: relative;  }
  html { overflow-y: hidden !important;  }
  #newbody { position: relative !important; overflow-y: scroll !important; 
       height: 100% !important; width: 100% !important; margin: 0 !important; }
 </style>
<![endif]-->

<style type="text/css">
 /* COLOQUE AQUI O RESTANTE DAS ESTILIZAÇÕES QUE NÃO TENHAM A VER COM POSITION FIXED
    MAS NÃO DECLARE MARGINS, PADDINGS, POSITIONS, DIMENSÕES OU OVERFLOWS PARA HTML, BODY E NEWBODY
 */
 
</style>

Detalhes:

Da mesma forma que está no exemplo, deverá haver um elemento pai chamado newbody que conterá todo o conteúdo não-fixed e, fora deste, deverão estar todos os elementos que desejar que sejam fixed. Olha o exemplo lá que vai entender.

A página não pode ser renderizada no quirks mode, ou seja, deve estar com o document type definition (DTD) correto;

Pode dar boró se alterar margin, padding, posições, dimensões ou overflows para os elementos HTML, body e newbody.

Perceba que não é aproveitamento de bug do IE. É apenas uma técnica que também funcionaria em outros navegadores se fosse necessário usar.

Muitos gringos falaram sobre a técnica, mas aqui no Brasol parece que ninguém falou ainda. Estranho...:

Comenta aí malucada. Ninguém comenta mais :(

Publicado também no elmicox.com

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

21 setembro, 2007

Poste um tutorial e ganhe em real

Bem, não é bem assim não. Na verdade você vai ganhar em dólar hahuehau.

É que o Webly / iEvolution tá com um esquema novo aí pra incentivar os postadores/geradores/tradutores de tutorial:

Ganhe dinheiro postando seus tutoriais no Webly, através do seu Google Adsense.

Além de aparecer na home do portal ao ser um top colunista (e ter seu site linkado sem rel-nofollow), você também poderá, a partir de agora, INSERIR SEU CODIGO ADSENSE nos tutoriais que postar no Webly.

Assim, cada pessoa que acessar e ler seu tutorial poderá clicar em SEU ANÚNCIO, gerando ganhos em sua própria conta do adsense - sem intermediários.

Se seu blog tem pouca visitação e você achou que nunca daria pra ganhar uma grana, chegou agora a chance de tentar.

Eu por exemplo, ganhei menos que $50 no adsense aqui no El Micox, por isso nunca cheguei nem a receber. Agora vou ver se, com as visitações do Webly, eu consigo tirar uma graninha a mais.

Se seu blog tem uma visitação boa e bons rendimentos, não custa nada dar uma melhorada né?

Bom, dá uma olhada no anúncio lá e veja se te agrada.

E VAMO POSTAR TUTORIAIS!!! Eu contribuo, tu contribues, ele(a) contribue.

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

Micox now on Twitter

Olá povo,

Depois de ler um pouco sobre o twitter, decidi embarcar na parada também e tô gostando pra caramba. É uma espécie de micro-blog (como já definiram por aí).

Motivos:

  • Sem burocracia - como se tem ao escrever um post de blog
  • Você viu um link/ tutorial legal? Vai lá e posta
  • Tá querendo matar o lula? vai la e posta
  • Fez uma nova postagem no seu blog? vai lá e posta
  • Teve uma idéia genial? vai lá e posta

O Webly/iEvolution também entrou na parada postando suas novidades.
A marcinha deu os começo, depois fez o meu, depois fez o do webly e o pessoal seguiu...

Dando uma passeada por lá você não fica muito afim de entrar não, mas é só começar a micro-postar pra ver.

Acho que é o sentido real de Web-log afinal, atualmente, todos os (we)blogs tão virando opinologs ou tutologs ou noticiologs, à excessão dos miguxos.

Ah, detalhe. No meu serviço tenho que acessar o Twitter via netvibes, então quem puder me passar o RSS do seu twitter aí pra eu acompanhar...

Link desta postagem no elmicox.com: Micox now on Twitter

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

Editar CSS no IE e FF simultaneamente com CSSVista

Hopa.

Que tal editar simultaneamente o CSS no Firefox e no Internet Explorer?
Pode ser uma boa.

Então experimenta o CSSVista aí e me diz o que achou.

Link no novo elmicox.com: Editar CSS no IE e FF simultaneamente com CSSVista

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

19 setembro, 2007

Mercado fechado: idéia de gênio

Pergunte-se: qual um dos maiores problemas de fazer uma compra no Mercado Livre atualmente?
Você não conhece o vendedor e não tem confiança nele.

Você confia em seus amigos? Sim? Ummm, então que tal comprar e vender coisas apenas através de seus amigos? Como um orkut para vendas e compras? Idéia de gênio.

Esta é a proposta do site que eu acabei de descobrir graças ao Rafael: o Mercado Fechado.

De acordo com a descrição do próprio site:

O MercadoFechado é um serviço on-line totalmente gratuito que tem como objetivo ser um portal para anúncios entre amigos.

Com certeza você já perguntou para algum amigo se ele conhecia alguma pessoa interessada em seu carro. Ou ainda se conhecia alguém que gostaria de vender um violão já que você estava aprendendo a tocar. O MercadoFechado é para isto!

Nossa idéia é proporcionar o encontro de interesses. Amigos que compram encontram amigos que vendem, e vice-versa.




Nele você pode ainda configurar se também quer ver os anúncios dos amigos dos seus amigos, pode dizer o que quer comprar (pra fazerem um mini-leilão) e outras coisas que não fuçei muito.

Este não é um post patrocinado ou nada do tipo. É apenas um post "invejoso": por que eu não tive esta idéia antes? hhahaha

Acabei de receber o email do convite e decidi postar imediatamente.
A base de usuários ainda está baixa pelo que eu ví, mas deve crescer bastante.

[edit]Ah sim, como o Jader bem lembrou no comment abaixo, meu perfil lá é este aqui.[/edit]

Eu acho que essa parada aí tem futuro. Parabéns pra quem teve a idéia e implantou.

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

geraOptions - populando selects com praticidade - PHP

Hoeeepáa

Bom, sabe toooda aquela burocracia que agente faz tooooda vez que vai gerar um select-option via PHP?

Pois é, vai parecer óbvio pra maioria dos meus leitores, mas pode ser de ajuda pra alguns: que tal reduzir esta complexidade em apenas uma funçãozinha simples pra chamar rapidamente e não ter que ficar se preocupando com executar a SQL, fazer o while do recordset, fazer o IF pra ver qual option vai ter o selected, etc??

Acredite: isto facilita pra caramba. Reduz a complexidade e o tamanho do código.

A função que gera os options. Guarde em sua biblioteca de funções:

function geraOptions($sql,$campo_valor,$campo_label,$valor_selecionado,$tabs='    '){
//by Nairon JCG - Micox - elmicox.blogspot.com - micoxjcg@yahoo.com.br - 12/01/07

    $reca = mysql_query($sql);
    $opts = "\r\n";
    if($reca){
        while($row = mysql_fetch_assoc($reca)){
        if($row[$campo_valor]==$valor_selecionado){
        $selected = "selected='selected'";
        }else{
        $selected = "";
        }
            $opts .= $tabs."    <option value='".$row[$campo_valor]."' $selected>".$row[$campo_label]."</option>\r\n";
        }
    }
    return $opts;
}

$sql - é a sql pra gerar os options
$campo_valor - o campo na sua tabela do BD que irá doar os valores para os VALUES dos options.
$campo_label - o campo na sua tabela do BD que irá doar os valores para os TEXTOS dos options.
$valor_selecionado - Se tal option tiver o value igual ao $valor_selectionado, ele ficará com selected=selected
$tabs - pra deixar seu código fonte que será gerado mais bonitim...

Exemplo de uso:

echo "<select id='estado' name='estado'>";
    echo geraOptions('SELECT * FROM estados','id_estado','nome_estado',$cod_estado_cliente,'    ');
echo "</select>";

Dúvidas?

PS.:Esta é mais uma funçãozinha que eu tinha feito e esquecido de postar. Como este blog é minha 'guardadora' de funções pessoais, esta não podia ficar de fora né? hehe

PS.2: Esta é a penúltima postagem antes de ir embora para o elmicox.com.

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

Ativando options disabled no IE

Ops, uma funçãozinha que eu tinha feito a tempos mas tinha esquecido de postar aqui heheh. Só tinha postado no Webly.

Se você colocar um atributo "disabled" em um option ele deverá ficar desabilitado, ou seja, indisponível. Exemplo:

<select>
    <option>opt 1</option>
    <option disabled='disabled'>opt 2</option>
    <option>opt 3</option>
</select>

Isto acontece bem nos navegadores padrão.
No nosso velho amigo IE (Internet Explorer) não acontece. Teste e veja.

Inspirado pela dúvida do nosso amigo Rafael, fui atrás do problema e não achei solução a não ser fazer uma função pra fazer o serviço completo.
Está abaixo:

<!--[if lte IE 7]>
<script>
function ativaOptionsDisabled(){
    var sels = document.getElementsByTagName('select');
    for(var i=0; i < sels.length; i++){
        sels[i].onchange= function(){ //pra se mudar pro desabilitado
            if(this.options[this.selectedIndex].disabled){
                if(this.options.length<=1){
                    this.selectedIndex = -1;
                }else if(this.selectedIndex < this.options.length - 1){
                    this.selectedIndex++;
                }else{
                    this.selectedIndex--;
                }
            }
        }
        if(sels[i].options[sels[i].selectedIndex].disabled){
            //se o selecionado atual é desabilitado chamo o onchange
            sels[i].onchange();
        }    
        for(var j=0; j < sels[i].options.length; j++){ //colocando o estilo
            if(sels[i].options[j].disabled){
                sels[i].options[j].style.color = '#CCC';
            }
        }
    }
}
window.attachEvent("onload", ativaOptionsDisabled)
</script>
<![endif]-->

Pronto! :)
Obs.: Esta Esta função substitui algum outro evento ONCHANGE que tenha sido colocado antes pra algum option.
Obs.2: Esta é a ante-penúltima postage do elmicox.blogspot antes de migrar pro elmicox.com.

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

06 setembro, 2007

Code contest: Mega Sena acumulada

Vindo do blog do Bermon (que provavelmente vai ser o vencedor), eu tinha que dar uma contribuição JavaScript para o desafio do Macaco chefe né? (Por favor, sem piadinhas. Ele não é chefe do mico hehehehh)

Mesmo sabendo que não ia nem chegar perto dos vencedores, não podia deixar o Javascript de fora da brincadeira hehe.

O desafio:

"Escrever em qualquer linguagem de programação um programa que realize 100.000 sorteios de um numero entre 1 e 60 e mostre na tela os 6 mais freqüentes.

Ganha quem fizer o programa com o menor numero de linhas possíveis, lembrando que a linha considerada é a linha da unidade léxica da linguagem, portanto a seguinte linha em Java seria considerada duas: int i =0; sysout(i); "

Os malucos do Ruby conseguiram fazer em 1 linha (incluindo o bermon nos 'malucos').
Com javascript eu tentei de várias formas porém eu só consegui fazer com 2 linhas:

for(var i,ra=new Array(),j=0 ; j<10000 ; j++,i=Math.round(59*Math.random())+1,ra[i]= (typeof(ra[i])=='undefined') ? ra[i]=i+" "+1  :  ra[i]=i+' '+(parseInt(ra[i].split(' ')[1]) + 1)) {  }
document.write(ra.sort(function(a,b){return b.split(' ')[1] - a.split(' ')[1]}).slice(0,6).join(' vez(es)\n<br />'));

Se não valer assim, aumento um pouquinho (também é bom pra verem melhor o que foi feito).

for(var i,ra=new Array(),j=0 ; j<10000 ; j++, i = Math.round(59*Math.random())+1)
    ra[i] = (typeof(ra[i])=='undefined') ? ra[i]=i+" "+1  :  ra[i]=i+' '+(parseInt(ra[i].split(' ')[1]) + 1);
document.write(ra.sort(function(a,b){return b.split(' ')[1] - a.split(' ')[1]}).slice(0,6).join(' vez(es)\n<br />'));

Caso não seja aceito da maneira acima, há também uma forma mais extendida que ficaria com 6 linhas (esta já está beeeem mais entendível pra qualquer um, caso queiram explicações é só perguntar).

var ra = new Array();
for(j=0;j<10000;j++){
 i = Math.round(59*Math.random())+1;
 ra[i] = (typeof(ra[i])=='undefined') ? ra[i]=i+" "+1  :  ra[i]=i+' '+(parseInt(ra[i].split(' ')[1]) + 1);
}
document.write(ra.sort(function(a,b){return b.split(' ')[1] - a.split(' ')[1]}).slice(0,6).join(' vez(es)\n<br />'));

Agora é pra todo mundo entender.

var ra = new Array(); //declaro o array
for(j=0;j<10000;j++){ //loop 10000 vezes
 i = Math.round(59*Math.random())+1; //faço o sorteio de 1 até 60 e jogo no 'i'
 //abaixo vou incrementar quem foi o índice do array sorteado
 //devido a deficiências de pegar o indice de um array em javascript
 //vou ter que guardar o índice no primeiro caractere pra splitar depois
 if(typeof(ra[i])=='undefined'){ 
  ra[i]=i+" "+1; //se ra[i] ainda não existir crio ele
 
 }else{ //se já existir, incremento ele 
  ra[i]=i+' '+(parseInt(ra[i].split(' ')[1]) + 1);
 }
}
//faço a ordenação de acordo com uma função específica 
//que pega só o que tem depois do espaço
ra.sort(function(a,b){return b.split(' ')[1] - a.split(' ')[1]})
//dou um slice pra pegar os 6 primeiros e uno eles com o join.
//jogo o resultado na tela
document.write(ra.slice(0,6).join(' vez(es)\n<br />'));

hehe, Engraçado. Viram como um código de 11 linhas pode virar só 2? hehe
Será que alguém consegue fazer com menos linhas aí no javascript? Bora ae, cai pra dentro. heheheahe

PS.: O engraçado é que ontem eu só consegui chegar a 7 linhas. Hoje que vieram umas inspirações heheh.

PS.2.: Este ainda não é o último post do elmicox.blogspot antes de migrar para o elmicox.com. Vocês não precisam mudar seus feeds. Eu vou alterar pelo feedburner.

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

Resultado! Concursos