PDA

View Full Version : 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>
<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
<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
<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 :)