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

JavaScript's getElementsByName() method allows for easy access and

Alert: It is invalid for an <a> element to be nested inside another <a> element according to validateDOMNesting

What is the best way to switch the CSS style of a button that has been mapped

Get rid of the strange border on the material dialog

Creating a reusable field for reactive forms in Angular: A step-by-step guide

Notifying the view with a SignalR message from the controller upon event trigger

Move an object in relation to the right boundary of the viewport

Why is my code throwing an error stating "Unable to assign value to innerHTML property of null"?

Guide to transforming the image's color with CSS3

Troubleshooting tip for React JS: encountered an unexpected object error when trying to import components

Executing jQuery post request on a div loaded via ajax

Menu navigation - ensuring the background color extends to cover the entire page, not just the viewport

Employing lodash for object comparison and removal from an array

Tips on configuring HTTP headers for numerous messages within Node-RED?

Converting Epoch timestamp to AM/PM format in a React render function

Personalized 404 Error Page on Repl.it

What are some strategies for keeping the focus state on the parent item in a dropdown menu?

What is the best way to implement individual fade-ins for each image in my project?

Tips for choosing the initial paragraph within a div that has a designated class (CSS 2)

Contrast the differences between arrays and inserting data into specific index positions