asked on

Resize with animation of a DIV layer

I have a div that starts off as hidden. I want it to slide in to a fixed size on click.

It is used in a graph, the size-in is for effect.

Where t is the finished size for top
where w is the finished size for width
and h is the finished size for height.

<div id="Layer1" style="position:absolute; left:102px; top:<cfoutput>#t#</cfoutput>px; width:<cfoutput>#w#</cfoutput>px; height:<cfoutput>#h#</cfoutput>px; z-index:1; visibility:hidden;">
<table width="100%" height="100%">
<tr>
<td class="expired"> </td>
</tr>
</table>
</div>

at the moment I snap it in by using
<a href="#" onClick="Layer1.style.visibility='visible';"><img name="transperantcfm_r1_c2" src="fireworksimages/transperant.cfm_r1_c2.gif" width="420" height="19" border="0" alt=""></a>

any ideas???

Zvonko

Any questions???

kleigh

ASKER

i'm sorry... the question is? How do I show and resize a DIV on click with some annimation effects?

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kleigh

ASKER

Zvonko:
I must be missing something.
I tried your script an there is no annimation? it just snaps in.

here is how i wrote it, and i am sure i messed something up

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="../CSS/NewMessageCenterSKIN.css" rel="stylesheet" type="text/css" />

<script>
var theDiv, dTop, dWidth, dHeight, tStep;
var xStep = 10;
var xFact = 10;
function startMove(divID,t,w,h){
theDiv = document.getElementById(divID);
dTop = 500;
dWidth = 500;
dHeight = 500;
theDiv.style.visibility="visible";
tStep = setTimeout("doMove()", xStep);
}

// and this is the stepper move function:

function doMove(){
var xT = dTop - theDiv.offsetTop;
var xW = dWidth - theDiv.offsetWidth;
var xH = dHeight - theDiv.offsetHeight;
if(xT+xW+xH!=0){
theDiv.style.top = theDiv.offsetTop+(xT/xFact);
theDiv.style.width = theDiv.offsetWidth+(xW/xFact);
theDiv.style.height = theDiv.offsetHeight+(xH/xFact);
tStep = setTimeout("doMove()", xStep);
}
}
</script>
</head>

<body>
<div id="Layer1" style="position:absolute; left:102px; top:200px; width:200px; height:200px; z-index:1; visibility:hidden;">
<table width="100%" height="100%">
<tr>
<td class="expired"> </td>
</tr>
</table>
</div>

<a href="#" onClick="startMove('Layer1',300,500,300);return false;">test</a>

</body>
</html>

Zvonko

I see it sliding, but of course first after inserting some visible text:
<td class="expired"> Here Some Text</td>

kleigh

ASKER

Silly Me.... Thanks a lot.

Zvonko

You are welcome.