apDiv animation

**ankush** · 02-10-2012, 01:26 PM

i want to animated apDiv in my page, anybody knows how to do that? please help
it is on bottom right on my page and i want it to appear like it is coming from bottom

here my code

HTML Code:

<html>
<head>
<style type="text/css">
#apDiv1 {
	position:fixed;
	right:0px;
	bottom:0px;
	width:242px;
	height:196px;
	z-index:1;
	background:#09F;
	color:#FFF;
	border:#000 2px solid;
}
</style>
</head>
<body>
<div id="apDiv1">this is an apDiv :)</div>
</body>
</html>

**vwphillips** · 02-11-2012, 11:11 AM

Code:

<html>
<head>
<style type="text/css">
#apDiv1 {
	position:fixed;
	right:0px;
	bottom:-300px;
	width:242px;
	height:196px;
	z-index:1;
	background:#09F;
	color:#FFF;
	border:#000 2px solid;
}
</style>
</head>
<body>
<div style="height:2000px;" ></div>
<div id="apDiv1">this is an apDiv :)</div>
<script type="text/javascript">
/*<![CDATA[*/

function SlideUp(id,ms){
 obj=document.getElementById(id);
 animate('bottom',obj,-obj.offsetHeight,0,new Date(),ms);
}

 function animate(mde,obj,f,t,srt,mS){
  var ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style[mde]=now+'px';
  }
  if (ms<mS){
   setTimeout(function(){ animate(mde,obj,f,t,srt,mS); },10);
  }
  else {
   obj.style[mde]=t+'px';
  }
 }

SlideUp('apDiv1',1000);
/*]]>*/
</script></body>
</html>

**ankush** · 02-13-2012, 09:32 AM

thank you so much, exactly what i was looking for, and one question where can i define its delay? so that it will come after 2 second of page load.

**vwphillips** · 02-13-2012, 10:52 AM

Code:

<html>
<head>
<style type="text/css">
#apDiv1 {
	position:fixed;
	right:0px;
	bottom:-300px;
	width:242px;
	height:196px;
	z-index:1;
	background:#09F;
	color:#FFF;
	border:#000 2px solid;
}
</style>
</head>
<body>
<div style="height:2000px;" ></div>
<div id="apDiv1">this is an apDiv :)</div>
<script type="text/javascript">
/*<![CDATA[*/

function SlideUp(id,ms){
 obj=document.getElementById(id);
 animate('bottom',obj,-obj.offsetHeight,0,new Date(),ms);
}

 function animate(mde,obj,f,t,srt,mS){
  var ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style[mde]=now+'px';
  }
  if (ms<mS){
   setTimeout(function(){ animate(mde,obj,f,t,srt,mS); },10);
  }
  else {
   obj.style[mde]=t+'px';
  }
 }

setTimeout(function(){
 SlideUp('apDiv1',1000);
},2000);

/*]]>*/
</script></body>
</html>

**ankush** · 02-13-2012, 12:42 PM

thanks a lot

Thread: apDiv animation

Thread Tools

Search Thread

apDiv animation

The Following User Says Thank You to vwphillips For This Useful Post:

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions