Obtain the height of an invisible element

Question

Obtain the height of an invisible element

I am faced with the challenge of determining the height of an element in order to smoothly transition it. The issue I encounter is that the element initially has no fixed height due to potential disruption of my website layout.

This height value varies depending on the device used to access the site and represents the height of my text box.

One approach could involve loading the page without hiding the text, obtaining its height, and then concealing it using JavaScript. However, I do not consider this a preferred solution.

Ultimately, my objective is to ensure that regardless of whether the page contains only images or displays text, everything is centered both vertically and horizontally.

document.getElementById("intro-img").onclick = function() {
  $("#intro-img").toggleClass('show');
  $("#text").toggleClass('show');
}

.full-size {
  height: 100vh;
  overflow: hidden;
}
.title-img {
  max-height: 250px;
}
#intro-img {
  cursor: pointer;
  height: 250px;
  transition: all 0.75s linear;
}
#intro-img.show {
  height: 125px;
}
#text {
  opacity: 0;
  height: 0;
  transition: all 0.75s linear;
  overflow: hidden;
}
#text.show {
  opacity: 1;
  height: 105px; /* I need this value set based on vw */
}
.container {
  margin-left: auto !important;
  margin-right: auto !important;
}
.row {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container full-size valign-wrapper">
    <div class="row">
      <div class="col s12 center-align">
        <img id="intro-img" class="responsive-img title-img" src="http://undeadleech.com/img/UndeadLeech_x3_round.png">
      </div>
      <div id="text" class="col s12 center-align">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </div>
</body>

javascript html css materialize

Answer 1

Answer №1

To determine the height of an element, you must first render it according to my knowledge. Here's a suggestion on how to achieve this:

Initially, render the page with your element appearing as if it had height by applying height: auto (disregarding the height: 0)
Retrieve the actual height of the element
Remove the temporarily added inline style, specifically height: auto
Create a special rule for this in a <style> tag

Note: Remember to update the style with the new height if you resize the page.

var $text = $('#text')
$text.css({ height: 'auto' })
var height = $text.css('height')
$text.css({ height: '' })

// JavaScript code snippet to dynamically create and apply CSS class
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#text.show { height: ' + height + ' }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById("intro-img").onclick = function() {
  $("#intro-img").toggleClass('show');
  $("#text").toggleClass('show');
}

.full-size {
  height: 100vh;
  overflow: hidden;
}
.title-img {
  max-height: 250px;
}
#intro-img {
  cursor: pointer;
  height: 250px;
  transition: all 0.75s linear;
}
#intro-img.show {
  height: 125px;
}
#text {
  opacity: 0;
  height: 0;
  transition: all 0.75s linear;
  overflow: hidden;
}
#text.show {
  opacity: 1;
  /*height: 105px; /* I need this value set based on vw */
}
.container {
  margin-left: auto !important;
  margin-right: auto !important;
}
.row {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

<body>
  <div class="container full-size valign-wrapper">
    <div class="row">
      <div class="col s12 center-align">
        <img id="intro-img" class="responsive-img title-img" src="http://undeadleech.com/img/UndeadLeech_x3_round.png">
      </div>
      <div id="text" class="col s12 center-align">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </div>
</body>

Answer 2

To determine the height of an element, you must first render it according to my knowledge. Here's a suggestion on how to achieve this:

Initially, render the page with your element appearing as if it had height by applying height: auto (disregarding the height: 0)
Retrieve the actual height of the element
Remove the temporarily added inline style, specifically height: auto
Create a special rule for this in a <style> tag

Note: Remember to update the style with the new height if you resize the page.

var $text = $('#text')
$text.css({ height: 'auto' })
var height = $text.css('height')
$text.css({ height: '' })

// JavaScript code snippet to dynamically create and apply CSS class
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '#text.show { height: ' + height + ' }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById("intro-img").onclick = function() {
  $("#intro-img").toggleClass('show');
  $("#text").toggleClass('show');
}

.full-size {
  height: 100vh;
  overflow: hidden;
}
.title-img {
  max-height: 250px;
}
#intro-img {
  cursor: pointer;
  height: 250px;
  transition: all 0.75s linear;
}
#intro-img.show {
  height: 125px;
}
#text {
  opacity: 0;
  height: 0;
  transition: all 0.75s linear;
  overflow: hidden;
}
#text.show {
  opacity: 1;
  /*height: 105px; /* I need this value set based on vw */
}
.container {
  margin-left: auto !important;
  margin-right: auto !important;
}
.row {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

<body>
  <div class="container full-size valign-wrapper">
    <div class="row">
      <div class="col s12 center-align">
        <img id="intro-img" class="responsive-img title-img" src="http://undeadleech.com/img/UndeadLeech_x3_round.png">
      </div>
      <div id="text" class="col s12 center-align">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </div>
</body>

Answer 3

Answer №2

If you want to determine the size, you'll need to render it, as mentioned by Mauricio Poppe. However, this can be done without actually displaying it on the screen. Simply set the opacity to 0 to make it invisible.

function calculateElementHeight(element) {
  element.classList.add("hidden");

  // Add it at the beginning
  if (document.body.childNodes[0]) {
    document.body.insertBefore(element, document.body.childNodes[0]);
  } else {
    document.body.appendChild(element);
  }
  
  var height = element.clientHeight;

  document.body.removeChild(element);
  element.classList.remove("hidden");

  return height;
}

.hidden {
  opacity: 0;
  z-index: -1000000000; /* Move to the back */
  display: block; /* Required for z-index */
  pointer-events: none;
}

Answer 4

If you want to determine the size, you'll need to render it, as mentioned by Mauricio Poppe. However, this can be done without actually displaying it on the screen. Simply set the opacity to 0 to make it invisible.

function calculateElementHeight(element) {
  element.classList.add("hidden");

  // Add it at the beginning
  if (document.body.childNodes[0]) {
    document.body.insertBefore(element, document.body.childNodes[0]);
  } else {
    document.body.appendChild(element);
  }
  
  var height = element.clientHeight;

  document.body.removeChild(element);
  element.classList.remove("hidden");

  return height;
}

.hidden {
  opacity: 0;
  z-index: -1000000000; /* Move to the back */
  display: block; /* Required for z-index */
  pointer-events: none;
}

Obtain the height of an invisible element

Answer №1

Answer №2

Similar questions

The compatibility between Typescript methods and event handlers is lacking

Weapons of Mass Destruction - receive markdown content

Styling a specific element in Svelte without needing a globally unique identifier

Initiate an asynchronous request from JavaScript to a C# controller located in a separate directory

Issue with Firefox: During drag events, dataTransfer.files return as null, while this behavior is consistent in all other browsers

Using Django to generate a JSON object from a model and pass it to a template

Leveraging deep linking to launch the email application in react native

"Adjusting the font size in a blogger's photo caption: A quick guide

Silly problem arising from the animate feature in jQuery

React component not displaying dynamic content when extending from a class

What is the best way to navigate to the href link?

Can CSS masking be implemented in all current web browsers?

Retrieve and store an array from a JSON response using jQuery

Transition the canvas video from black and white to full color

"Click to view the latest data visualization using the Chart.js

Vertically center the button inside a MaterialUI grid

Deleting Cart Items Permanently with AJAX in Vue.js and Shopify

Button click not clearing the contents of the div container

javascript The onclick function works only for a single interaction

The CSS background shadow on one div behaves differently compared to the neighboring div