0

So I need to find the height of an element to correctly transition it in. My problem is that this element does not have a height initially because it would mess with my website layout.

This value changes based on the device used to view the site and it's the height of my text box.

It might be possible to load the page without hiding the text and then getting the height and hiding it with javascript, but I believe that wouldn't be an ideal solution at all.

My goal is that no matter if the page is image only or if the text is displayed, in both cases everything should be vertically and horizontally centered.

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>
DropOfBlood
  • 23
  • 1
  • 9

2 Answers2

0

You need to render the element to get its height AFAIK, with that in mind how about

  • initially render the page with your element as if it had height by setting height: auto (ignoring the height: 0)
  • get the height of the element
  • remove the inline style inserted i.e. height: auto
  • create a <style> tag with this special rule that you have

Important note: if you resize the page don't forget to recreate the style with the new height

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

// runtime style taken from
// http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply
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>
Mauricio Poppe
  • 4,817
  • 1
  • 22
  • 30
0

To get the size, you have to render it, as Mauricio Poppe already said. But that's no problem because you can render it without making it visible: set opacity to 0 to make it completely transparent.

function testHeight(obj) {
  obj.className += " invisible";

  // Insert it as first child
  if (document.body.childNodes[0]) {
    document.body.insertBefore(obj, document.body.childNodes[0]);
  } else {
    document.body.appendChild(obj);
  }
  var height = obj.clientHeight;

  document.body.removeChild(obj);
  obj.className = obj.className.replace("invisible", "");

  return height;
}

.invisible {
  opacity: 0;
  z-index: -1000000000; /* Move to the back */
  display: block; /* Needed for z-index */
  pointer-events: none;
}
Aloso
  • 5,123
  • 4
  • 24
  • 41