Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS

Moderador: web

 

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 07:48

Pessoal tenho este js para abrir e fechar uma div:

function info(acao,div){ var div_info = document.getElementById( div ); var acao = acao.substring(0,6); if(acao == "abrir"){ div_info.style.display = "block";   }else{ div_info.style.display = "none"; } }

Estou usando com eventos do mouse em uma imagem, quando passo o mouse abre, quando tiro fecha.

Preciso de algo que faça a div se abrir com o começo dela la na ponta a flecha do mouse. atualmente posiciono com css mas se a pagina fui muito longa a div vai aparecer num lugar fico la em cima ai nao vou poder ver ela.
0
 

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 07:50

Tentei assim:

function info(acao,div){     var div_info = document.getElementById( div );     var acao = acao.substring(0,6);     var x = event.clientX;     var y = event.clientY;         if(acao == "abrir"){         div_info.style.left = x;         div_info.style.top = y;         div_info.style.display = "block";     }else{         div_info.style.display = "none";     } }

Mas nao deu, no FF(nao vi no IE) fica dando esta msg de erro:

Erro: event IS NOT defined

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17246
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 08:40

Trabalha com esse script
viewtopic.php?t=130

é bem mais prático, porque você pode definir esse posicionamento, e funciona no IE e FF.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 10:40

Sim, eu vi esse seu mas comigo nao funcionou, ficava abrindo e fechando sem parar
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17246
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 11:02

Você deve ter copiado da forma incorreta, lá no código do link passado, você só repete o link, caso, queira usar mais de um, o restante do código fica abaixo do(s) link(s).

Caso necessário, clique no link Testar Código que fica no topo de cada post, e cole o exemplo como mostrado no link passado.

Obs.: O código foi testado no IE 7.0 e FF 2.0.0.3
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 11:14

Finalmente consegui:

function pos(){     posX = window.event.clientX;     posY = window.event.clientY;     window.status = "X = " + posX + " : Y = " + posY;     }   function info(acao,div){         var div_info = document.getElementById( div );         var acao = acao.substring(0,6);           document.onmousemove = pos;           if(acao == "abrir"){                 div_info.style.left=posX;                 div_info.style.top=posY;                 div_info.style.display = "block";         }else{                 div_info.style.display = "none";         } }

Mas ainda tem um detalhe, só funciona no IE, no FF da:
Erro: window.event has no properties

Como eu faço pra funcionar no FF??
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17246
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 11:15

Coloca seu código completo.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 11:56

Mudei algumas coisas veja:

function info(acao,div,e){         var div_info = document.getElementById( div );         var acao = acao.substring(0,6);             if(window.event){         x = event.clientX;         y = event.clientY;     }else{         x = e.clientX;         y = e.clientY;     }           if(acao == "abrir"){                 div_info.style.left=x;                 div_info.style.top=y;                 div_info.style.display = "block";         }else{                 div_info.style.display = "none";         } }

Ai pra chamar a funcao:

<img src="image.png" border="0" onmouseover="info('abrir','info_1','')" onmouseout="info('fechar','info_1','')" />

Agora como esta, no IE funciona normal, a div aparece la na ponta da fecha do mouse, mas no FF ela aparece em outro lugar, a fica piscando ou seja abrindo e fechando toda hora.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17246
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 12:09

Como você não colocou o código da div, coloquei um, e rodei o código:

<script> function info(acao,div,e){   var div_info = document.getElementById(div); var acao = acao.substring(0,6);   if(window.event){ x = event.clientX; y = event.clientY; }else{ x = e.clientX; y = e.clientY; }   if(acao=="abrir"){ div_info.style.left=x; div_info.style.top=y; div_info.style.display = "block"; } else { div_info.style.display = "none"; }   } </script>


<img src="image.png" border="0" onmouseover="info('abrir','info_1','')" onmouseout="info('fechar','info_1','')"/>   <div id="info_1" style="display:none;">abc</div>

Rodou normal no IE e FF, a div apareceu exatamente onde está o posicionamento dela no documento, em ambos navegadores.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 12:43

Mas nao é pra aparecer onde a div esta, é para ela aparecer na ponta da flecha do mouse.

segue o codigo da div:

<div id="info_1" class="info">Ola!!!!</div>

css(info):

.info {     position:absolute;     width:251px;     z-index:16;         display: none;         background-color: #F8F8F8;         border-bottom:#999999 1px solid;         border-left:#999999 1px solid;         border-right:#999999 1px solid;         border-top:#999999 1px solid;         padding-left:3px;         color: #000000;         font-family:Arial, sans-serif;         font-size:11px;         font-weight:normal; }

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17246
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 13:34

Dá uma olhada nesse link
http://www.dynamicdrive.com/dynamicindex5/popinfo.htm

depois, entra em http://www.dynamicdrive.com/dynamicindex5/tipmessage.zip para baixar os exemplos.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 13:37

Vlw, queria uma solucao propria mas nao consegui, entao to usando o http://www.walterzorn.com/tooltip/tooltip_e.htm
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17246
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Posicionar div na ponta no cursor ao exbi-la

12-05-2007 13:41

Também é um bom exemplo :)
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:

Quem está online

Usuários navegando neste fórum: Bing [Bot]