JavaScript – Posicionando uma DIV dinamicamente

Este código pode ser utilizado para posicionar uma layer(camada) ou DIV’s com conteúdo dinâmico no local onde está posicionado o ponteiro do mouse. Pode ser empregada para abrir menus de contexto, posicionar sub-resultados, telas de descrição de termos etc.

Requisitos
-JavaScript habilitado no navegador WEB.
-Navegador com habilidade para manipular Layers e DIV’s.

Instruções para o uso:

1- Crie uma DIV em seu documento, como o exemplo abaixo:


<div style="z-index: 101; width: 100%; position: relative; height: 300px;overflow:auto;" id="tst">
<h1>Div de teste.</h1>
</div>

2- Insira na TAG body do documento HTML o seguinte evento:


onclick="posTela(tst);"

3- Crie a função a seguir. Ela receberá como parâmetro o objeto DIV.


function posTela(obj) {
obj.style.left = window.event.clientX+10;
obj.style.top = window.event.clientY-50;
}

Este script pode ser adaptado para outros objetos dentro de sua aplicação web.

Arquivo de exemplo:
Baixar – Clique com o botão direito e selecione salvar como.

Tiago Larios

Back To Top