Solução para problema de style.top e style.left no Firefox

Fevereiro 11, 2008

Você criou uma div bonitinha dinamicamente via Javascript, setou altura e tudo mais dinamicamente, para ficar perto de um elemento qualquer na página, e funcionou no Internet Explorer mas no Firefox não? Simples, é só setar a unidade de medida. Sem a unidade de medida o Internet Explorer interpreta como px(pixels), mas o Firefox não.

Exemplo:

function CriarDiv(fComponenteQueChamou)
{
var nova_div = document.createElement('div');
var corpo = document.getElementBytagName('body);
with( nova_div )
{
style.top = fComponenteQueChamou.offsetTop+20;
style.left = fComponenteQueChamou.offsetLeft+10;
innerHTML += 'Um texto qualquer';
style.backgroundColor = 'red';
style.position = 'absolute';
}
corpo[0].appendChild(nova_div);
}

O exemplo acima funciona maravilhosamente bem no Internet Explorer, mas no Firefox não.

Para funcionar no Firefox altere as seguintes linhas:

style.top = fComponenteQueChamou.offsetTop+20+'px';
style.left = fComponenteQueChamou.offsetLeft+10+'px';

Pronto…funcionando certinho no IE e no Firefox.
Eu usei a criação de div’s dinâmicas em um recurso de busca incremental. Outro dia posto um passo-a-passo sobre como criar uma busca incremental utilizando JSON. Muito legal.

Atualização do artigo: Resolvi colocar aqui a solução de um problema que muitos desenvolvedores enfrentam. Se você utilizar offsetTop em um elemento dentro de uma table, ele retorna o top em relação ao table, e não em relação à página.
Um exemplo: Vamos imaginar que você quer posicionar uma div bem aonde o usuário clicou dentro de uma tabela:

Exemplo da tabela:

<table>
<thead>
<th>Coluna1</th>
</thead>
<tbody>
<tr>
<td onclick="PosicionaDiv(this);"> Conteudo da coluna 1</td>
</tr>
</tbody>
</table>

E a função javascript será essa:

function PosicionaDiv(fOwner)
{
var minha_div = document.getElementById('minha_div') ;
var altura_da_celula = fOwner.offsetTop;
var altura_da_tabela = fOwner.parentNode.parentNode.parentNode.offsetTop ;
minha_div.style.top = (altura_da_celula+altura_da_tabela)+'px'
}

Qualquer dúvida é só postar aí nos comentários.

Entry Filed under: Javascript. .

2 Comments Add your own

  • 1. Thiago  |  Maio 25, 2008 at 12:10 pm

    caraaaaaaaaaaaaca! estou há horas com o mesmo problema tentando fazer funcionar! e com essa dica FUNCIONOU!!! =D

    valeu!

    Responder
  • 2. Gil  |  Agosto 13, 2008 at 3:12 pm

    Mano, muuuito obrigado.!

    Responder

Leave a Comment

Required

Required, hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed


Categorias

Categorias

Apache2 Diversão Firebird Javascript Linux mysql Outros PHP Voip

Posts recentes

twitter.com/troliveira