Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá. Fiz esta função para posicionar uma janelinha de ajuda para o preenchimento de um formulário. Ela calcula a posição absoluta de um elemento considerando os elementos parentes (que contém o elemento) e busca barras de rolagem.
O que tem de especial é que eu particularmente não achei uma solução tão completa. A função que eu usava antes estava "pulando" justamente uma div que tinha barra de rolagem, então a janela não acompanhava o input corretamente. Só testei no Safari, possivelmente haverá algum ajuste para ficar universal, mas não tive tempo de fazer isso ainda. Alguém se habilita?
var absolutePosition = function(obj){ // offsetParent ou parentElement, os dois!
var curleft = curtop = 0; // Vamos começar a contar distâncias
var objScrolls = obj.parentElement; // O outro objeto seguirá o caminho via parentElement
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
var scrleft = scrtop = 0; // Vamos começar a contar scrolls
do {
scrleft += objScrolls.scrollLeft;
scrtop += objScrolls.scrollTop;
jGp.trace('Scroll top de '+objScrolls.getAttribute('id')+': '+objScrolls.scrollTop);
} while (objScrolls = objScrolls.parentElement);
return [curleft - scrleft, curtop - scrtop]; // Juntamos os dois
} else {
return [obj.offsetLeft,obj.offsetTop];
}
}Não porque eu quero que a janela fique exatamente ao lado da caixa de input que está dentro de um layout feito com divs. Preciso saber com precisão o a localização do input na página.
Outra solução é colocar uma div ao lado da caixa de input, mas tem limitações porque expande toda a div que contém o form quando recebe conteúdo, além disso, eu coloquei uma sombrinha na minha janela para dar o efeito de "balãozinho de dica".
A propósito: o hack para centrar a div na altura não funciona sempre. Eu tive problemas e desisti. Uso tabela (afff) ou um javascript para centrar na mão grande.
Não seria mais simples posicionar a 'janela' no centro da tela, invés de tentar posicionar TODOS os elementos absolutamente, por exemplo?
No CSS, coloque assim:
margin: -200px 0 0 -200px; /metade da altura e da largura / }No HTML: