Home / Questions / 183185
Accepted
userStack
Asked: 2020-07-23 17:51:13 +0800 CST 2020-07-23 17:51:13 +0800 CST

Find out if a div is full

  • 772

Out of curiosity, how can you determine if a div is full?

Full example :

enter image description here

The above image shows a filled div, because there is no space to continue typing, the word hello filled the limit of the div.

Example that it is not full (because it still has space below to continue writing)

enter image description here

full != not empty

As @A.Cedano says "determining if it is full depends on various factors such as font size".

Can this example help? http://jsfiddle.net/yfSUk/3

html

4 Answers

  1. Best Answer

    Here I use a wrapper to prevent the code snippet from interfering, the trick is to check the clientHeightagainst the scrollHeight.

    In the case of div one it is visible, in the case of div three it is hidden by a container

    document.addEventListener('DOMContentLoaded', function() {
  let losDivs = [...document.getElementsByClassName("trackme")];

  losDivs.forEach(function(element) {

    console.log(element.id, element.clientHeight, element.scrollHeight);
    if (element.clientHeight < element.scrollHeight) {
      element.style.background = "#fe0";
      console.log(element.id, "se pasa de texto");
    }
  });


});
    .contenedor div {
  width: 640px;
  height: 120px;
  overflow: auto;
  padding: 5px;
  margin: 5px;
  border: 1px dashed red;
}

.oculta {
  width: 0;
  height: 0;
  overflow: hidden;
}
    <div class="contenedor">
  <div id="uno" class="trackme"><b>UNO</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pharetra diam. Cras nisi leo, lobortis non lorem non, suscipit aliquam felis. Duis posuere laoreet eros, vel efficitur sem aliquet ac. Ut sit amet lectus rhoncus felis pharetra
    euismod sed at dolor. Praesent quis lectus id enim facilisis finibus et nec leo. Vestibulum a lacus arcu. Praesent a fringilla ligula, a facilisis neque. Phasellus vitae efficitur lectus. Duis volutpat scelerisque ipsum non faucibus. Ut scelerisque
    ex eget rutrum bibendum. Nulla malesuada lacus eu felis porta molestie. Sed tincidunt arcu lorem, et porttitor odio dictum nec. Morbi rutrum tellus ornare, pulvinar sem vitae, rutrum magna. Curabitur vel rutrum sapien. Integer scelerisque tellus odio,
    sit amet tincidunt lorem accumsan ut.
  </div>
</div>
<div class="contenedor">
  <div id="dos" class="trackme"><b>DOS</b> Curabitur ornare ligula id laoreet tempor. Aliquam nisi justo, blandit id massa nec, pharetra vehicula est. Nunc et velit eu mi facilisis tempor id ac mauris. Sed non lacinia eros. Fusce orci tortor, consectetur a erat et, dignissim rhoncus
    felis. Suspendisse id tempor lorem, et vulputate tortor. Donec ac condimentum odio. Sed porta id nisi vitae malesuada. Sed ultricies, odio quis hendrerit hendrerit, eros magna interdum nulla, sed bibendum tellus nunc sit amet nibh.</div>
</div>
<div class="contenedor oculta">
  <div id="tres" class="trackme"><b>TRES</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pharetra diam. Cras nisi leo, lobortis non lorem non, suscipit aliquam felis. Duis posuere laoreet eros, vel efficitur sem aliquet ac. Ut sit amet lectus rhoncus felis pharetra
    euismod sed at dolor. Praesent quis lectus id enim facilisis finibus et nec leo. Vestibulum a lacus arcu. Praesent a fringilla ligula, a facilisis neque. Phasellus vitae efficitur lectus. Duis volutpat scelerisque ipsum non faucibus. Ut scelerisque
    ex eget rutrum bibendum. Nulla malesuada lacus eu felis porta molestie. Sed tincidunt arcu lorem, et porttitor odio dictum nec. Morbi rutrum tellus ornare, pulvinar sem vitae, rutrum magna. Curabitur vel rutrum sapien. Integer scelerisque tellus odio,
    sit amet tincidunt lorem accumsan ut.
  </div>
</div>

    • 2

  2. One thing you could do is create a clone of the element, add a character to it, and check if the height of the element has changed. If it changed, it means that it was full and did not admit more. If the height is the same, it means there was still room for more text.

    To do this you can create a function like this:

    function comprobarLleno(selector) {
  // seleccionamos el original y creamos un clon
  var original = document.querySelector(selector);
  var copia = original.cloneNode(true);

  // le añadimos un carácter (por ejemplo, un punto) y lo escondemos con CSS
  copia.innerHTML += ".";
  copia.style.visibility = "hidden";
  copia.style.overflow = "auto";

  // añadimos el clon al documento
  document.querySelector("body").append(copia);

  // comparamos las alturas de clon y original
  if (copia.scrollHeight > original.scrollHeight) {
    // si la altura del clon es mayor, el elemento original estaba lleno
    console.log(`El elemento ${selector} está lleno`);
  } else {
    // la altura del clon es igual a la del elemento original que no estaba lleno
    console.log(`El elemento ${selector} NO está lleno`);
  }

  // eliminamos el clon
  copia.remove();
}

    And here you can see it working:

    function comprobarLleno(selector) {
  var original = document.querySelector(selector);
  var copia = original.cloneNode(true);
  copia.innerHTML += ".";
  copia.style.visibility = "hidden";
  copia.style.overflow = "auto";
  document.querySelector("body").append(copia);
  if (copia.scrollHeight > original.scrollHeight) {
    console.log(`El elemento ${selector} está lleno`);
  } else {
    console.log(`El elemento ${selector} NO está lleno`);
  }
  copia.remove();
}

comprobarLleno("#tarjeta-1");
comprobarLleno("#tarjeta-2");
    .tarjeta {
  font-size: 16px;
  width: 150px;
  height: 150px;
  border:1px solid black;
  float: left;
  margin: 10px;
}
    <div class="tarjeta" id="tarjeta-1">
  En un lugar de la Mancha, de cuyo nombre no quiero acordarme...
</div>

<div class="tarjeta" id="tarjeta-2">
  En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín...
</div>

    • 2

  3. In jQuery you can use the select emptyas follows, knowing that being filled means having something, even if it's just white space.

    var divStatus = "";
var divID = "";
$("div").each(function() {
  divID = $(this).prop('id');
  divStatus = ($(this).is(':empty')) ? "Vacío" : "Lleno";
  console.log(`El div ${divID} está: ${divStatus}`);
});
    .my-div {
  height: 100px;
  width: 300px;
}

.vacio {
  background-color: blue;
}

.lleno {
  background-color: red;
}

.enblanco {
  background-color: yellow;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-div lleno" id="lleno">Lorem ipsum dolor sit amet</div>
<br />
<div class="my-div vacio" id="vacio"></div>
<br />
<div class="my-div enblanco" id="enblanco"> </div>

    • 0

  4. If a div is full? The function you posted has nothing to do with what you ask, I invite you to fix your question or else this is the answer.

    It uses the .html()jquery method to fetch what is inside a selector.

    Cheers

    //Función cuando este listo el DOM
$(function(){

//Evento cuando le den click al div
$(document).on('click','div',function(){
  
  //Con una condicional ternaria validar si el div está lleno.
  let msg = $(this).html() === '' ? 'Está vacío': 'No está vacío';
  alert(msg);
});

});
    div{
height:200px;
width:49%;
color:red;
background-color:aliceblue;
float:left;
margin:0.5%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div><p>WTF</p></div>

    • -1