PDA

View Full Version : Animated Collapsible DIV



JimWormold
09-04-2009, 02:15 PM
Anyone know if this script can be modified so the expanded content is revealed "upwards". Eg, the "expand" link sits at bottom of a container - when clicked on the expanded div is revealed above it as if being "shoved up" from below?

vwphillips
09-04-2009, 03:56 PM
demonstration of concept

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.p {
position:relative;left:100px;top:200px;width:100px;height:20px;background-Color:red;
}

#tst {
position:absolute;overflow:hidden;left:0px;top:0px;width:100px;height:0px;background-Color:#FFFFCC;
}

/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/

function Test(id,ms){
this.obj=document.getElementById(id);
this.maxh=this.obj.getElementsByTagName('DIV')[0].offsetHeight;
this.top=this.obj.offsetTop;
this.hoop=zxcBAnimator('height#',this.obj,this.maxh,0,10);
this.hoop=zxcBAnimator('top#',this.obj,this.top-this.maxh,this.top,10);
this.ms=ms||1000;
}

Test.prototype.Toggle=function(){
this.hoop=zxcBAnimator('height#',this.obj,this.maxh,0,this.ms);
this.hoop=zxcBAnimator('top#',this.obj,this.top-this.maxh,this.top,this.ms);
}

/*]]>*/
</script>

</head>

<body onload="T=new Test('tst');">
<div class="p" onclick="T.Toggle();">
<div id="tst" >
<div >
Line 0 <br />
Line 1 <br />
Line 2 <br />
Line 3 <br />
Line 4 <br />
Line 5 <br />
Line 6 <br />
Line 7 <br />
Line 8 <br />
Line 9 <br />
</div>
</div>
Toggle
</div>



</body>

</html>

JimWormold
09-04-2009, 04:10 PM
Wow Vic. That's exactly what I was looking for!

Thanks very much. You've saved me a heap of trouble.

vwphillips
09-04-2009, 04:28 PM
better


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.p {
position:relative;left:100px;top:200px;width:100px;height:20px;background-Color:red;
}

#tst {
position:absolute;overflow:hidden;left:0px;top:0px;width:100px;height:0px;background-Color:#FFFFCC;
}

/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/

function Test(id,ms){
var obj=document.getElementById(id);
this.maxh=obj.getElementsByTagName('DIV')[0].offsetHeight;
this.top=obj.offsetTop;
this.hoop=zxcBAnimator('height',obj,1,0,10);
this.toop=zxcBAnimator('top',obj,this.top-1,this.top,10);
this.ms=ms||1000;
}

Test.prototype.Toggle=function(){
var ud=this.hoop.data[2]==0;
this.hoop.update([this.hoop.data[0],ud?this.maxh:0],this.ms,[0,this.maxh]);
this.toop.update([this.toop.data[0],ud?this.top-this.maxh:this.top],this.ms,[0,this.maxh]);
}

/*]]>*/
</script>

</head>

<body onload="T=new Test('tst');">
<div class="p" onclick="T.Toggle();">
<div id="tst" >
<div >
Line 0 <br />
Line 1 <br />
Line 2 <br />
Line 3 <br />
Line 4 <br />
Line 5 <br />
Line 6 <br />
Line 7 <br />
Line 8 <br />
Line 9 <br />
</div>
</div>
Toggle
</div>


</body>

</html>

Renzo
09-23-2009, 10:15 PM
Thanks vic, I'm using this script in my website, I know it's a prototype, but I must tell you that works fine in Firefox but in Explorer does not work, you might do something?

Thanks

PS: sorry for my english :(

vwphillips
09-24-2009, 07:30 AM
wgat version of IE are you using?

Renzo
09-24-2009, 05:21 PM
IE 7 is installed on my computer, I've got to try on other versions.

Thank you for your speedy response :)

vwphillips
09-25-2009, 06:59 AM
just retested the code above in IE7 and it works for me.


popst any modified code or your application or link to your application

Renzo
09-25-2009, 11:31 AM
Thank you Vic, but I discovered the problem. ;)
I have the lightbox script that problem.
Remove link to the lightbox js your script works perfectly.

Ligtbox several problems apparently is not the first time I had trouble with this script. :mad:

Thanks anyway for your interest. :)

Renzo
09-25-2009, 11:34 AM
Sorry if you have trouble, I discovered that the problem is only on IE and Firefox is fine with lightbox enabled.