How to reset variables in animation and why a variable cannot be set to the actual height of an element?

tinfanide · August 20, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>function hCtrl(el){	var h = parseInt(document.getElementById(el).style.height);	if(h<100){timer1=setInterval("addHeight('"+el+"')",10); clearInterval(timer2);}	if(h>0){timer2=setInterval("cutHeight('"+el+"')",10); clearInterval(timer1);}	}function addHeight(el){	if(h<100){h+=1;}	document.getElementById(el).style.display = "block";	document.getElementById(el).style.height = h+"px";	document.getElementById("status").innerHTML = "Content height: " + document.getElementById(el).style.height;		}function cutHeight(el){	if(h>0){h-=1;}	document.getElementById(el).style.height = h+"px";	document.getElementById("status").innerHTML = "Content height: " + document.getElementById(el).style.height;	}</script><style>.menu {	background-color: #6F6;	width: 200px;	height: 50px;}.content {	display: none;	background-color: yellow;	width: 200px;	height:0px;	min-height: 0px;	max-height: 100px;	overflow: hidden;}</style></head><body><div id="menu1" onclick="hCtrl('content1');" class="menu">Menu 1</div><div id="content1" class="content">Content 1</div><div id="menu2" onclick="hCtrl('content2');" class="menu">Menu 2</div><div id="content2" class="content">Content 2</div><hr /><div id="status" style="width: 200px; background-color: #FC0"></div></body></html>

Why I cannot set the variable h like this:

var h = parseInt(document.getElementById(el).style.height);

If I set the condition like this, it does not work as well:

h = 0;function hCtrl(el){	if(h<parseInt(document.getElementById(el).style.maxHeight)){timer1=setInterval("addHeight('"+el+"')",10); clearInterval(timer2);}	if(h>parseInt(document.getElementById(el).style.minHeight)){timer2=setInterval("cutHeight('"+el+"')",10); clearInterval(timer1);}	}

The reason why I want to set variables according to the acutal height of the two contents is becauseif I set h = 0 and set h in the conditions like

h = 0;function hCtrl(el){	if(h<100){timer1=setInterval("addHeight('"+el+"')",10); clearInterval(timer2);}	if(h>0){timer2=setInterval("cutHeight('"+el+"')",10); clearInterval(timer1);}	}

The result will beWhile content 1 is toggled to the height of 100,toggle content 2 to the same heightcontent2 will not be toggledWhen you click content2 againit toggles to 100When you toggle up content1 to 0, it does the job.But when you toggle up content2 to 0, because h = 0 already, even the height of content2 is 100, it starts from 0 again and content2 is toggled down from 0 to 100.Is there a fix for that?

jeffman · August 20, 2011

This article explains the problem. This one explains one possible solution. There are simpler solutions, too, but you should understand what the basic problem is first.

Sign In

How to reset variables in animation and why a variable cannot be set to the actual height of an element?

Recommended Posts

tinfanide

Link to comment

Share on other sites

jeffman

Link to comment

Share on other sites

Archived

Browse

Activity