Find out if a div is full

Question

Find out if a div is full

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)
#4 by (-1 votes)

4

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

Full example :

The previous image shows a full div, because there is no space to continue writing, the word hello complete the limit of div .

Example that is not full (because you still have space below to continue writing)

full! = not empty

As @ A.Cedano says "determining whether it is full depends on several factors such as the size of the letter".

This example can help? link

html

asked by x-rw 23.07.2018 в 03:51

source

4 answers

2

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

For 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>

answered by 23.07.2018 в 16:27

0

In jQuery you can use the empty as follows, knowing that being full means having something, even a blank 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>

answered by 23.07.2018 в 04:40

-1

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.

Use the .html() jquery method to bring what is inside a selector.

Greetings

//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>

answered by 23.07.2018 в 04:18

Exclude a list of Strings in a table in C #? Query eloquent two tables

score 2 · Accepted Answer

Here I use a container to prevent the code snippet from interfering, the wave is to check the clientHeight against the scrollHeight .

In the case of the div one 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>