Why can't we use percentages to change the max-height property in JavaScript?

Question

Why can't we use percentages to change the max-height property in JavaScript?

I am currently working on creating a responsive menu featuring a hamburger icon. My goal is to have the menu list slide in and out without using jQuery, but instead relying purely on JavaScript.

HTML :

<div id="animation">  
</div>
<button id="toggle">Toggle</button>

CSS :

div {
width: 300px;
height: 300px;
background-color: blue;
}

Javascript :

var but = document.getElementById('toggle');
var div = document.getElementById('animation');
var animate = function(type, callback){
var inter = -1, start = 100, end = 0;
if(type==true){
    inter = 1;
    start = 0;
    end = 100;
}
var si = setInterval(function(){
    console.log('maxheight');
    div.style.maxHeight = (start + inter) + '%';
    if(start == end){
        clearInterval(si);
    }
}, 10);
}

var hidden = false;
but.onclick = function(){
animate(hidden, function(){
    hidden = (hidden == false) ? true : false;
});
}

div.style.maxHeight = "50%";

javascript html css

Answer 1

Answer №1

The issue arises from the fact that for proportional height in an element to work properly, a fixed height needs to be set on the parent element. However, in your case, no parent with a fixed height has been provided since the maxHeight property also relies on a percentage value based on the parent element.

To resolve this, you need to enclose your div within a parent container that has a fixed height. Here is the corrected version of your code:

var button = document.getElementById('toggle');
var container = document.getElementById('animation');
var animate = function(type, callback) {
  var interval = -1,
    startPercentageValue = 100,
    endPercentageValue= 0;
  if (type) {
    interval = 1;
    startPercentageValue = 0;
    endPercentageValue = 100;
  }
  var si = setInterval(function() {
    console.log('maxheight');
    container.style.maxHeight = (startPercentageValue + interval) + '%';
    if (startPercentageValue == endPercentageValue) {
      clearInterval(si);
    }
  }, 10);
}
var hidden = false;

button.onclick = function() {
  animate(hidden, function() {
    hidden = !hidden ;
  });
}

container.style.maxHeight = "50%";

#animation {
  width: 300px;
  height: 300px;
  background-color: blue;
}
#parent {
  width: 500px;
  height: 500px;
}

<div id="parent">
  <div id="animation">
  </div>
  <button id="toggle">Toggle</button>
</div>

Note:

It should be noted that there are certain statements in your JavaScript code that require modification:

if(type==true) can be simplified to if(type).
hidden = (hidden == false) ? true : false;
can be shortened to hidden = !hidden

Answer 2

The issue arises from the fact that for proportional height in an element to work properly, a fixed height needs to be set on the parent element. However, in your case, no parent with a fixed height has been provided since the maxHeight property also relies on a percentage value based on the parent element.

To resolve this, you need to enclose your div within a parent container that has a fixed height. Here is the corrected version of your code:

var button = document.getElementById('toggle');
var container = document.getElementById('animation');
var animate = function(type, callback) {
  var interval = -1,
    startPercentageValue = 100,
    endPercentageValue= 0;
  if (type) {
    interval = 1;
    startPercentageValue = 0;
    endPercentageValue = 100;
  }
  var si = setInterval(function() {
    console.log('maxheight');
    container.style.maxHeight = (startPercentageValue + interval) + '%';
    if (startPercentageValue == endPercentageValue) {
      clearInterval(si);
    }
  }, 10);
}
var hidden = false;

button.onclick = function() {
  animate(hidden, function() {
    hidden = !hidden ;
  });
}

container.style.maxHeight = "50%";

#animation {
  width: 300px;
  height: 300px;
  background-color: blue;
}
#parent {
  width: 500px;
  height: 500px;
}

<div id="parent">
  <div id="animation">
  </div>
  <button id="toggle">Toggle</button>
</div>

Note:

It should be noted that there are certain statements in your JavaScript code that require modification:

if(type==true) can be simplified to if(type).
hidden = (hidden == false) ? true : false;
can be shortened to hidden = !hidden

Answer 3

Answer №2

It appears that there are some errors in your code that I have addressed. I have made adjustments to the JavaScript and added comments to clarify the changes I made.

var button = document.getElementById('toggle');
var targetDiv = document.getElementById('animation');
var animateToggle = function (type, callback) {
  var start = 100,
      end = 0;

  if (type) {
    start = 0;
    end = 100;
  }

  var intervalId = setInterval(function () {
    if (type) { 
      start++;
    } else {
      start--
    }

    targetDiv.style.maxHeight = start + '%';

    if (start == end) {
      clearInterval(intervalId);
    }
  }, 10);

  callback.call(this); 
}

var isHidden = false;
button.onclick = function () {
  animateToggle(isHidden, function () {
    isHidden = !isHidden; 
  });
}

/*make sure parent container has a height set or max height won't work*/
html, body {
    height:100%;
    margin:0;
    padding:0;
} 
div {
    width: 300px;
    height: 300px;
    background-color: blue;
}

<div id="animation"></div>
<button id="toggle">Toggle</button>

Example Fiddle

Answer 4

It appears that there are some errors in your code that I have addressed. I have made adjustments to the JavaScript and added comments to clarify the changes I made.

var button = document.getElementById('toggle');
var targetDiv = document.getElementById('animation');
var animateToggle = function (type, callback) {
  var start = 100,
      end = 0;

  if (type) {
    start = 0;
    end = 100;
  }

  var intervalId = setInterval(function () {
    if (type) { 
      start++;
    } else {
      start--
    }

    targetDiv.style.maxHeight = start + '%';

    if (start == end) {
      clearInterval(intervalId);
    }
  }, 10);

  callback.call(this); 
}

var isHidden = false;
button.onclick = function () {
  animateToggle(isHidden, function () {
    isHidden = !isHidden; 
  });
}

/*make sure parent container has a height set or max height won't work*/
html, body {
    height:100%;
    margin:0;
    padding:0;
} 
div {
    width: 300px;
    height: 300px;
    background-color: blue;
}

<div id="animation"></div>
<button id="toggle">Toggle</button>

Example Fiddle

Why can't we use percentages to change the max-height property in JavaScript?

Answer №1

Answer №2

Similar questions

Adding pixels to the top position with jQuery in Angular 2

Reorganize a list based on another list without generating a new list

What is the best way to change the background color for my photo gallery?

Positioning Tumblr blockquotes beneath each other, rather than within

jQuery: Implementing smooth horizontal scrolling functionality

Utilizing Array Elements to Populate the Title Attribute in <TD> Tags

A guide on showcasing a MultiPolygon GeoJSON on a Leaflet map

Certain javascript files have had illegal characters mistakenly added to them

Is there a way to allow an HTML page rendered by node.js to communicate back to its corresponding node.js file?

Choosing a Component in a Collection with Angular 2

What is the best way to incorporate an AJAX GET request into an HTML element?

The Scrapy CSS selector is not fetching any prices from the list

Discovering the quantity of pagination tabs in Selenium WebAutomation

Ways to delete a tag with jQuery

I'm encountering a npm error on Windows_NT 10.0.19042, does anyone know how to troubleshoot this issue?

Creating a curved edge for a shape in React Native can add a stylish and

Is using CSS as an HTML attribute considered poor practice?

Manually assigning a value to a model in Angular for data-binding

Responsive Alignment of Slanted Edges using CSS

What is the best way to trigger a snackbar notification when two passwords do not match?