?
Solved

Resize with animation of a DIV layer

Posted on 2006-06-28
7
Medium Priority
?
882 Views
Last Modified: 2013-11-19
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">&nbsp;</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???
0
Comment
Question by:kleigh
  • 4
  • 3
7 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 17007183
Any questions???
0
 

Author Comment

by:kleigh
ID: 17011173
i'm sorry... the question is? How do I show and resize a DIV on click with some annimation effects?
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 17013660
The starting point is already good.
But you need a function for the move initialization and a second function for move steps.
You call the initialization function like this:

<a href="#" onClick="startMove('Layer1',100,200,300);return false;"><img name="transperantcfm_r1_c2" src="fireworksimages/transperant.cfm_r1_c2.gif" width="420" height="19" border="0" alt=""></a>

The initialization function looks like this:
<script>
var theDiv, dTop, dWidth, dHeight, tStep;
var xStep = 10;
var xFact = 10;
function startMove(divID,t,w,h){
  theDiv = document.getElementById(divID);
  dTop = t;
  dWidth = w;
  dHeight = h;
  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>


0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:kleigh
ID: 17018061
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">&nbsp;</td>
  </tr>
</table>
</div>

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

</body>
</html>
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17018179
I see it sliding, but of course first after inserting some visible text:
<td class="expired">&nbsp;Here Some Text</td>

0
 

Author Comment

by:kleigh
ID: 17018408
Silly Me.... Thanks a lot.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17018423
You are welcome.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question