CODEWITHSUNDEEP
javascripthtmljquerymouseeventdom-events
Dodilei
Dodilei

Reputation: 188

Alternative way to know if mouse is over an element (Javascript)

I have a script which shows a "hover element" (like a zoom) when my mouse is over it. I know it's a bit messy but here's an example:

function showOverflow2(e) {
  let cell = e.currentTarget;
  let clone = cell.cloneNode(true);

  if (cell.children[0].scrollWidth <= cell.children[0].clientWidth) {
    return false;
  };

  clone.innerHTML = clone.children[0].innerHTML;

  clone.style.position = 'absolute';

  clone.style.backgroundColor = 'white';
  clone.style.borderWidth = '2px';

  clone.style.lineHeight = cell.scrollHeight + 'px';

  clone.style.whiteSpace = 'nowrap';


  x0 = (
    cell.offsetLeft +
    parseFloat(
      getComputedStyle(
        cell.parentElement.parentElement.parentElement.parentElement
      )["padding-left"].slice(0, -2)
    ) + 2
  );

  y0 = (
    cell.offsetTop +
    parseFloat(
      getComputedStyle(
        cell.parentElement.parentElement.parentElement.parentElement
      )["padding-top"].slice(0, -2)
    ) + 2
  );

  xmid = x0 + (cell.clientWidth / 2);
  ymid = y0 + (cell.clientHeight / 2);

  let body = document.getElementsByTagName('body')[0];
  body.appendChild(clone);

  clone.style.height = cell.scrollHeight + 'px';
  clone.style.width = clone.scrollWidth + 'px';

  xf = xmid - (clone.clientWidth / 2);
  yf = ymid - (clone.clientHeight / 2);

  clone.style.top = yf + 'px';
  clone.style.left = xf + 'px';

  
  // FOCUS ON THIS PART
  

  clone.addEventListener("mouseout", function() {
    clone.remove();
  });
  
  // END OF FOCUS
  
};



let all_cells = document.getElementsByTagName('td');
for (let i = 0; i < all_cells.length; i++) {
  let current_cell = all_cells[i];

  if (current_cell.className !== 'buttons') {
    current_cell.addEventListener("mouseover", showOverflow2);
  }
}
body {
  margin: 0;
}

#container {
  background-color: gainsboro;
  border: 2px solid black;
  border-radius: 2px;
  padding: 1.2%;
  max-width: 50%;
}

table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  table-layout: fixed;
  width: 100%;
}

tr {
  background-color: white;
}

td {
  width: calc(100%/3);
  border: solid gray;
  border-width: 2px 1px 2px 0;
  padding: 0.7% 1%;
  text-align: center;
  white-space: nowrap;
}

span {
  display: block;
  overflow: hidden;
}

td:first-child {
  border-left-width: 2px;
  border-radius: 3px 0 0 3px;
}

td:last-child {
  border-right-width: 2px;
  border-radius: 0 3px 3px 0;
}
<div id="container">
  <table id="table">
    <tr>
      <td class="cell1"><span>AAAAAAAAABBBCC</span></td>
      <td class="cell2"><span>AAAAAAAAAABBBB</span></td>
      <td class="cell3"><span>AAAAAAAAAAAAABBBBB</span></td>
      </td>
    </tr>
  </table>
</div>

To remove the "zoom" and return things to normal, I'm simply using:

    clone.addEventListener("mouseout", function() {
    clone.remove();

This works fine if you are smoothly moving your mouse over the elements, but with a bigger table and faster movements, you can see for yourselves that some elements don't return to normal:

function showOverflow2(e) {
  let cell = e.currentTarget;
  let clone = cell.cloneNode(true);

  if (cell.children[0].scrollWidth <= cell.children[0].clientWidth) {
    return false;
  };

  clone.innerHTML = clone.children[0].innerHTML;

  clone.style.position = 'absolute';

  clone.style.backgroundColor = 'white';
  clone.style.borderWidth = '2px';

  clone.style.lineHeight = cell.scrollHeight + 'px';

  clone.style.whiteSpace = 'nowrap';


  x0 = (
    cell.offsetLeft +
    parseFloat(
      getComputedStyle(
        cell.parentElement.parentElement.parentElement.parentElement
      )["padding-left"].slice(0, -2)
    ) + 2
  );

  y0 = (
    cell.offsetTop +
    parseFloat(
      getComputedStyle(
        cell.parentElement.parentElement.parentElement.parentElement
      )["padding-top"].slice(0, -2)
    ) + 2
  );

  xmid = x0 + (cell.clientWidth / 2);
  ymid = y0 + (cell.clientHeight / 2);

  let body = document.getElementsByTagName('body')[0];
  body.appendChild(clone);

  clone.style.height = cell.scrollHeight + 'px';
  clone.style.width = clone.scrollWidth + 'px';

  xf = xmid - (clone.clientWidth / 2);
  yf = ymid - (clone.clientHeight / 2);

  clone.style.top = yf + 'px';
  clone.style.left = xf + 'px';

  
  // FOCUS ON THIS PART
  

  clone.addEventListener("mouseout", function() {
    clone.remove();
  });
  
  // END OF FOCUS
  
};



let all_cells = document.getElementsByTagName('td');
for (let i = 0; i < all_cells.length; i++) {
  let current_cell = all_cells[i];

  if (current_cell.className !== 'buttons') {
    current_cell.addEventListener("mouseover", showOverflow2);
  }
}
body {
  margin: 0;
}

#container {
  background-color: gainsboro;
  border: 2px solid black;
  border-radius: 2px;
  padding: 1.2%;
  max-width: 50%;
}

table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  table-layout: fixed;
  width: 100%;
}

tr {
  background-color: white;
}

td {
  width: calc(100%/3);
  border: solid gray;
  border-width: 2px 1px 2px 0;
  padding: 0.7% 1%;
  text-align: center;
  white-space: nowrap;
}

span {
  display: block;
  overflow: hidden;
}

td:first-child {
  border-left-width: 2px;
  border-radius: 3px 0 0 3px;
}

td:last-child {
  border-right-width: 2px;
  border-radius: 0 3px 3px 0;
}
<div id="container">
  <table id="table">
    <tr>
      <td class="cell1"><span>AAAAAAAAABBBCC</span></td>
      <td class="cell2"><span>AAAAAAAAABBBB</span></td>
      <td class="cell3"><span>AAAAAAAAAAAABBBBB</span></td>
      </td>
    </tr>
    <tr>
      <td class="cell1"><span>AAAAAAAABBBCC</span></td>
      <td class="cell2"><span>AAAAAAAAABBBB</span></td>
      <td class="cell3"><span>AAAAAAAAAAAAABBBBB</span></td>
      </td>
    </tr>
    <tr>
      <td class="cell1"><span>AAAAAAAAABBBCC</span></td>
      <td class="cell2"><span>AAAAAAAAAAABBBB</span></td>
      <td class="cell3"><span>AAAAAAAAAAAAABBBBB</span></td>
      </td>
    </tr>
    <tr>
      <td class="cell1"><span>AAAAAAAAABBBCC</span></td>
      <td class="cell2"><span>AAAAAAAAAABBBB</span></td>
      <td class="cell3"><span>AAAAAAAAAAAAABBBBB</span></td>
      </td>
    </tr>
    <tr>
      <td class="cell1"><span>AAAAAAAAABBBCC</span></td>
      <td class="cell2"><span>AAAAAAAAAAABBBB</span></td>
      <td class="cell3"><span>AAAAAAAAAAAAAABBBBB</span></td>
      </td>
    </tr>
    <tr>
      <td class="cell1"><span>AAAAAAAAAABBBCC</span></td>
      <td class="cell2"><span>AAAAAAAAAAaAABBBB</span></td>
      <td class="cell3"><span>AAAAAAAAAAAAAAAABBBBB</span></td>
      </td>
    </tr>
    <tr>
      <td class="cell1"><span>AAAAAAAABBBCC</span></td>
      <td class="cell2"><span>AAAAAAASAABBBB</span></td>
      <td class="cell3"><span>AAAAAAAAAAAAAAABBBBB</span></td>
      </td>
    </tr>
    <tr>
      <td class="cell1"><span>AAAAAAAAAABBBCC</span></td>
      <td class="cell2"><span>AAAAAAAAAABBBB</span></td>
      <td class="cell3"><span>AAAAAAAAAAAAABBBBB</span></td>
      </td>
    </tr>
  </table>
</div>

If I can't trust the mouseout event, what can I do to fix this?

I thought about using a eventListener on mouse movement to test if the mouse is inside the element using absolute coordinates, but probably there's a simpler solution.

Upvotes: 0

Views: 78

Answers (2)

Dodilei
Dodilei

Reputation: 188

I'm answering my own question 'cause I needed to combine some ideas to make it work well.

First I need to point out that, for some reason, the problem I described happens in the browser only when the Developer tab (f12) is open, otherwise all works fine.

But still I wanted to be certain that no cell would freeze that way, so I used css like Ed Lucas. Still, I needed Javascript to get the centering right.

After days trying this I finally found a way to center it using css that worked with absolute positioning and the child element being larger.

I didn't remove the Javascript method because it gives me flexibility of commands to trigger and revert this event.

In the end, my code is looking like this:

function showOverflow(e) {

  const div = e;
  const cell = div.parentElement;
  const span = div.children[0];

  if (span.scrollWidth <= span.clientWidth) {
    return false;
  }

  const clone = div.cloneNode(true);
  clone.classList.add('hovercell');

  cell.appendChild(clone);

  let cell_style = getComputedStyle(cell);

  function cloneRemove(host) {
    clone.remove();
    clearInterval(host.id);
  }

  function isInside(host) {
    if (cell_style['z-index'] === '0') {
      cloneRemove(host);
    }
  }

  let host = {};
  host.id = setInterval(isInside.bind(null, host), 100);

  clone.addEventListener("mouseleave", function() {
    cloneRemove(host);
  });

}
td {
  border: 2px solid gray;
  padding: 0.7% 1%;
  text-align: center;
  white-space: nowrap;
  z-index: 0;
  position: relative;
}

td:hover {
  z-index: 2;
}

span {
  display: block;
  overflow: hidden;
}

.hovercell {
  background-color: white;
  border: 2px solid gray;
  
  padding: 6px 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
}
<table>
  <tbody>
    <tr>
      <td>
        <div onclick="showOverflow(this)">
          <span>A big cell--- 1</span>
        </div>
      </td>
      <td>
        <div onclick="showOverflow(this)">
          <span>A big cell--- 2</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Hope it helps someone.

Upvotes: 0

Ed Lucas
Ed Lucas

Reputation: 7355

You could do something similar using CSS by repeating the content (enlarged) and showing and hiding it on hover. Simple example below.

table {
  padding: 30px;
}

td {
  position: relative;
  padding: 4px;
  border: 1px solid blue;
}

.grow {
  display: none;
  background-color: #fff;
  border: 1px solid #000;
  padding: 3px;
  z-index: 10;
}

td:hover .grow {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.5);
}
<html>

<head></head>

<body>
  <table>
    <tr>
      <td>asdf<span class="grow">ASDF</span></td>
      <td>fasd<span class="grow">FASD</span></td>
  </table>
</body>

</html>

Upvotes: 1

Related Questions