hello im trying to animate a drop down y changing properties of a div tag. unfortunately i cannot figure out how to restrict the text area to compensate for its collapsed size. here is my test page code you can copy past it to see what i mean. I want "-Lorem Ipsum Dolor" hidden until Animate is clicked.
Is there a method of doing this in css or other?
Thanks
MCP, .Net Solutions Development <%_%>
Is there a method of doing this in css or other?
Thanks
Code:
<html>
<head>
</head>
<body>
<script type="text/javascript" language="javascript">
var key;
key = 40;
function animate() {
if (key <= 300){
var timer;
key = key + 5;
menu.style.height = key
timer = setTimeout('animate()',1);
}
}
var SlideKey1;
SlideKey1 = -60;
function SlideDown1(){
if ( SlideKey1 <= 85 ) {
var TimerKey;
SlideKey1 = SlideKey1 + 10;
s1.style.top = SlideKey1;
TimerKey = setTimeout('SlideDown1()',1);
}
}
</script>
<input type="button" value="Animate" OnClick="javascript:animate()" />
<div style="background-color:teal; height:10px; width:150px; position:absolute; max-width:150px;" id="menu">
</ br></ br>-Lorem Ipsum Dolor</ br>
-Lorem Ipsum Dolor</ br>
-Lorem Ipsum Dolor</ br>
-Lorem Ipsum Dolor</ br>
-Lorem Ipsum Dolor</ br>
-Lorem Ipsum Dolor</ br>
-Lorem Ipsum Dolor</ br>
-Lorem Ipsum Dolor</ br>
-Lorem Ipsum Dolor</ br>
-Lorem Ipsum Dolor</ br></div>
<div style="background-color:gray; position:absolute;" id="s1">Lorem Ipsum Dolor</ br></div>
</body>
</html>MCP, .Net Solutions Development <%_%>