perdida del foco en celda al mostrar div

rodrigo_1986 · #1 (**permalink**) 27/12/2010, 07:47

Hola:
Hacia tiempito q no publicaba algo en el foro
Mi problema es el siguiente:
Estoy mostrarndo un cuadro emergente con un div a traves de los eventos de onmouseover para mostrar y onmouseout para ocultar, cuando estos eventos ocurren en una celda de una tabla.
Todo funciona bien, solo que cuando el puntero esta sobre una celda, y el div emergente se muestra y tapa el puntero, el div se oculta automaticamente, pq pierde el foco, pero cuando el puntero no es tapado por el div emergente, se muestra bien el div, y se oculta solo cuando muevo el puntero del mouse fuera de la celda. Este error solo me pasa en firefox, en los demas funca bien, no se oculta automaticamente el div cuando este tapa al puntero del mouse.
El codigo es sencillisimo:

Código PHP:

 
<td align="left" class='td-tabla' onmouseover="showdiv('<?php echo $doc->id ?>')" onmouseout="hidediv()"> 
                <?php echo $doc->tema ?> 
</td> 
. 
. 
. 
<div id="flotante" class="detalle" ></div> 
. 
. 
.

y el metodo showdiv:

Código PHP:

  function showdivEject(id){ 
    div=document.getElementById('flotante');  
   detalle=document.getElementById(id); 
   div.innerHTML=detalle.innerHTML 
   div.style.display='block'; 
}

y el metodo hidediv

Código PHP:

  function hidediv() { 
    div = document.getElementById('flotante'); 
    div.style.display='none'; 
}

ahora, ¿pq no funciona del todo bien en firefox y en todos los demas si?¿incluso en iexplorer 6?
Gracias de antemano

quimfv · #2 (**permalink**) 27/12/2010, 08:10

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
 
function showdiv(id){
   div=document.getElementById('flotante'); 
   detalle=document.getElementById(id);
   div.innerHTML=detalle.innerHTML
   div.style.display='';
}
function hidediv() {
    div = document.getElementById('flotante');
    div.style.display='none';
}  
 
  </script>
<style type="text/css">
<!--
#flotante {
    background-color: #FF0000;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    
}
-->
</style>
</head>
 
<body>
<table>
  <tr>
    <td id="c1" onmouseover="showdiv(this.id)" onmouseout="hidediv()">1</td>
    <td id="c2"  onmouseover="showdiv(this.id)" onmouseout="hidediv()">2</td>
  </tr>
  <tr>
    <td id="c3"  onmouseover="showdiv(this.id)" onmouseout="hidediv()">3</td>
    <td id="c4"  onmouseover="showdiv(this.id)" onmouseout="hidediv()">4</td>
  </tr>
</table>
<div id="flotante" style="display:none" >123</div> 
</body>
</html>

A mi no me desaparece en firefox!!!...

walterdevel · #3 (**permalink**) 27/12/2010, 09:31

Probá con esto, aunque no creo que sea el problema:

Código Javascript:

Ver originalfunction hidediv() {
    var div = document.getElementById('flotante');
    div.style.display='none';
}

quimfv · #4 (**permalink**) 28/12/2010, 02:48

Igual te he hecho perder tiempo, no consigo que vuelva a actuar como lo hacia ayer cuando te respondí el post.

Lo que veo ahora es que al mover el mouse también desaparece en IE6, aquí no puedo probar con nada más.

De hecho la lógica dice que el evento onMouseOut se lance puesto que se ha interpuesto una capa.

Si sitúas el vértice superior izquierdo de la capa justo al lado del cursor podría funcionarte...así mantendrías el foco en la celda.

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function showdiv(e,id){
    var x = e.clientX;
    var y = e.clientY;
   var div=document.getElementById('flotante'); 
   detalle=document.getElementById(id);
   div.innerHTML=detalle.innerHTML
   div.style.left=x+4;
   div.style.top=y+4;
   div.style.display='';
}
function hidediv() {
    var div = document.getElementById('flotante');
    div.style.display='none';
}  
 
  </script>
<style type="text/css">
<!--
#flotante {
    background-color: #FF0000;
    position: absolute;
}
-->
</style>
</head>
 
<body>
<table>
  <tr>
    <td id="c1" onmouseover="showdiv(event,this.id)" onmouseout="hidediv()">1</td>
    <td id="c2"  onmouseover="showdiv(event,this.id)" onmouseout="hidediv()">2</td>
  </tr>
  <tr>
    <td id="c3"  onmouseover="showdiv(event,this.id)" onmouseout="hidediv()">3</td>
    <td id="c4"  onmouseover="showdiv(event,this.id)" onmouseout="hidediv()">4</td>
  </tr>
</table>
<div id="flotante" style="display:none" >123</div> 
</body>
</html>

rodrigo_1986 · #5 (**permalink**) 30/12/2010, 09:58

Gracias por la solución quimfv, ya estaba pensando antes una solución asi, pero no la había probado.
Funciona, pero no me funco en iexplore, porq no me reconoce el evento, asi q tuve q hacerlo de la sgte forma:

Código PHP:

  <head>

<script type="text/javascript" src="/jquery/jquery-1.4.2.min.js">

<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function(){      //jquery
        document.onmousemove=function(e){
           setPosition(e)
        }
  });
var hilo
var py = 0
var px = 0
function setPosition(e){
    evt=window.event || e
    py = evt.clientY;
    px = evt.clientX;
}
function showdiv(id){
    clearTimeout(hilo)
    hilo = setTimeout(function(){
        showdivEject(id)
    }, 500)
}
   
function showdivEject(id){    
    div=document.getElementById('flotante');
    detalle=document.getElementById(id);
    if(detalle.innerHTML.length > 0){
        div.innerHTML=detalle.innerHTML
        div.style.display='block';
        div.style.top=( py + 10 )+"px";
        div.style.left=( px + 10 )+"px";
    }
}

function hidediv() {
    clearTimeout(hilo)
    div = document.getElementById('flotante');
    div.style.display='none';
}
 
  </script>
<style type="text/css">
<!--
.flotante {
   position:absolute;
    opacity: 0.85;
    display:none;
    font-family:Arial;
    font-size:12px;
    height:auto;
    width:auto;
    max-width: 50%;
    background-color:#f1f1f1;
    padding: 6px 6px 6px 6px;
    line-height: 15px;
    overflow: auto;
}
-->
</style>
</head>
<body>
<table>
  <tr>
    <td id="c1" onmouseover="showdiv(this.id)" onmouseout="hidediv()">1</td>
    <td id="c2"  onmouseover="showdiv(event,this.id)" onmouseout="hidediv()">2</td>
  </tr>
  <tr>
    <td id="c3"  onmouseover="showdiv(this.id)" onmouseout="hidediv()">3</td>
    <td id="c4"  onmouseover="showdiv(this.id)" onmouseout="hidediv()">4</td>
  </tr>
</table>
<div class="flotante" >
</div> 
</body>

bueno lo que hace este codigo, es que cuando el puntero del mouse pase por una celda, se dispare un hilo que despues de 1/2 segundo muestre el cuadro emergente a un lado del puntero del mouse, siempre y cuando el puntero siga en la misma celda por al menos 1/2 segundo
funciona en todos lo exploradores, incluso en ieplorer 6