Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Hugo Borges_120734

problemas com div saindo da tela

Por , em Desenvolvimento frontend

Recommended Posts

Hugo Borges_120734    6

Hugo Borges_120734
Postado

gera tenho um código onde crio uma div que acompanha o cursor do mouse. O problema e que quando encosto ele do lado direito da tela, a div diminui seu tamanho e sai da tela. Teria como bloquear ela para não sair da tela? e tbm para não alterar seu tamanha?

 

segue código:

<html>
<head>
<title></title>
</head>
<script>

function showAjuda(event,titulo,descricao){
  txtTitulo = document.all? document.all.titulo : document.getElementById("titulo");
  txtTitulo.innerHTML = titulo;
  
  txtDescricao = document.all? document.all.descricao : document.getElementById("descricao");
  txtDescricao.innerHTML = descricao;
  
  caixa = document.all? document.all.boxAjuda : document.getElementById("boxAjuda");
  caixa.style.visibility = "visible";
  caixa.style.top = event.clientY + document.body.scrollTop + 15;
  caixa.style.left = event.clientX + document.body.scrollLeft + 15;
}

function hideAjuda(){
caixa = document.all? document.all.boxAjuda : document.getElementById("boxAjuda");
caixa.style.visibility = "hidden";
}

</script>
<body>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<div id="boxAjuda" style="position:absolute;visibility:hidden;left:100;top:100">
<table border="0" cellspacing="2" cellpadding="0" style="background-color:#CCCCCC; border:solid 1px #666666; font-family:verdana; font-size:10px">
<tr>
  <td>
  <span id="titulo"></span><br>
  <span id="descricao"></span>
  </td>
</tr>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="200" align="center" bgcolor="#CCCCCC" style="cursor:help;" onMouseMove="showAjuda(event,'Oi','Noon noonn onononononono noono nono');" 

onMouseOut="hideAjuda();"> </td>
  </tr>
</table>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
</body> 
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Electronic    124

Electronic
Postado

Da pra fazer com overflow:hidden, mas tem que mudar tambem o html

ou

nao testei mas pode ser +- isso, vai usar JS

Defina o tamanho pra a caixa de ajuda

pegue o tamanho da div maior subtraia por esse tamanho

se a posição horizontal do mouse for maior que esse numero

ai você nao muda a caixa.style.left

Compartilhar este post

Link para o post
Compartilhar em outros sites

Patrick Corrêa Muniz    0

Patrick Corrêa Muniz
Postado

Olá boa noite.

 

Bom, o que está acontecendo é que a caixa de ajuda está ultrapassando a resolução da tela, por isso esta "saindo".

Para resolver o problema você deve utilizar um if para limitar a propriedade left do css, para que não ultrapasse a resolução do monitor.

 

O código final ficou da seguinte forma:

<html>
<head>
<title></title>
</head>
<script>

function showAjuda(event,titulo,descricao){
  txtTitulo = document.all? document.all.titulo : document.getElementById("titulo");
  txtTitulo.innerHTML = titulo;
  
  txtDescricao = document.all? document.all.descricao : document.getElementById("descricao");
  txtDescricao.innerHTML = descricao;
  
  caixa = document.all? document.all.boxAjuda : document.getElementById("boxAjuda");
  caixa.style.visibility = "visible";
  //AQUI EU COLOQUEI UMA VERIFICAÇÃO PARA QUE A PROPRIEDADE LEFT DO CSS NÃO ULTRAPASSE 
  //O LIMITE DA RESOLUÇÃO DO MONITOR
  if (event.clientX < 1170){
  caixa.style.top = event.clientY + document.body.scrollTop + 15;
  caixa.style.left = event.clientX + document.body.scrollLeft + 15;
  console.log(event.clientX);
  }
}

function hideAjuda(){
caixa = document.all? document.all.boxAjuda : document.getElementById("boxAjuda");
caixa.style.visibility = "hidden";
}

</script>
<body>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<div id="boxAjuda" style="position:absolute;visibility:hidden">
<table border="0" cellspacing="2" cellpadding="0" style="background-color:#CCCCCC; border:solid 1px #666666; font-family:verdana; font-size:10px">
<tr>
  <td>
  <span id="titulo"></span><br>
  <span id="descricao"></span>
  </td>
</tr>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" bgcolor="#CCCCCC" style="cursor:help;" onMouseMove="showAjuda(event,'Oi','Noon');" 

onMouseOut="hideAjuda();"> </td>
  </tr>
</table>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
<br>
<br><br><br><br>
</body> 
</html>

Observação:

 

O meu monitor utiliza a resolução de 1366x 768px. Portanto eu fixei para que os eventos do javascript posicionar a caixa de ajuda em até 1170px. Cabe a você agora desenvolver um código javascript para pegar a resolução do monitor e implementar isso de forma dinâmica, de acordo com a resolução do monitor no qual a pagina será executada. Boa noite e boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito