Solved

Resize with animation of a DIV layer

Posted on 2006-06-28
7
860 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 500 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa‚Ķ
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now