...

View Full Version : Change Div Size with animation



thephoton
01-30-2007, 10:34 PM
Hi!

I've written/modified the code below to fulfill my purposes, but I am having a problem using it on multiple divs at once. (Basically, the page is dynamically filled [ASP] with divs that need to be sized using this code.) It works for all of them, except when you try and 'open' two or more at once. I don't particually want to have to declare a bunch of variables, so if anyone can help, that would be great!


<script language="javascript">
var y =100; //Starting Height of div..
var g = 0; //Shows current position of the script (up or down)
var tID = 0; //Shows current map that is open
function changeheight(bid,mapframe,maplink,postcode){
if(y==621)document.getElementById(mapframe).style.display='none';
if(y>621&&g==0){y=621; e.style.height = y + 'px';g=1;showmap(mapframe,postcode);document.getElementById(maplink).innerHTML='Close Map';return;} //Change y>XXX to max desired height
if(y<100&&g==1){y=100;g=0;showmap(mapframe,postcode);document.getElementById(maplink).innerHTML='Show Map';return;} //Change y<XX to variable y + 1
if(g)q=-60;if(!g)q=60;y=y+q;
e=document.getElementById(bid);

e.style.height = y + 'px';
t=setTimeout("changeheight('"+bid+"','"+mapframe+"','"+maplink+"','"+postcode+"');",0);
}
function showmap(Tiframe,postcode){
document.getElementById(Tiframe).src = 'maps.asp?q='+postcode;
if(g)document.getElementById(Tiframe).style.display='block';if(!g)document.getElementById(Tiframe).s tyle.display='none';
}
</script>

_Aerospace_Eng_
01-30-2007, 10:37 PM
Hmm you are better off using an already built prototype library like the one here: http://script.aculo.us/

Check out their demos

http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo

vwphillips
01-30-2007, 11:38 PM
converted your script to OOP

If you requir more assistane ask, and dont know what q is for



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="javascript">
var y =100; //Starting Height of div..
var g = 0; //Shows current position of the script (up or down)
var tID = 0; //Shows current map that is open

function CngHeight(bid,mapframe,maplink,postcode){
var oop=window['zxcOOP'+bid];
clearTimeout(oop.to);
oop.changeheight(bid,mapframe,maplink,postcode);
}

function InitCngHeight(id){
window['zxcOOP'+id]=new CngHeightOOP(id)
}

function CngHeightOOP(id){
this.obj=document.getElementById(id);
this.y =100; //Starting Height of div..
this.g = 0; //Shows current position of the script (up or down)
this.tID = 0; //Shows current map that is open
this.ref='zxc'+id;
window[this.ref]=this;
this.to=null;
}

CngHeightOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

CngHeightOOP.prototype.changeheight=function(mapframe,maplink,postcode){
this.mapframe=mapframe||this.mapframe;
this.maplink=maplink||this.maplink;
this.postcode=postcode||this.postcode;
if(this.y==621)document.getElementById(this.mapframe).style.display='none';
if(this.y>621&&g==0){
this.y=621;
this.obj.style.height = this.y + 'px';
this.g=1;
showmap(mapframe,postcode);
document.getElementById(this.maplink).innerHTML='Close Map';return;
} //Change y>XXX to max desired height
if(this.y<100&&this.g==1){
this.y=100;
this.g=0;
showmap(mapframe,postcode);
document.getElementById(this.maplink).innerHTML='Show Map';return;
} //Change y<XX to variable y + 1
if(this.g)q=-60;
if(!this.g)q=60;
this.y=this.y+q;
this.obj.style.height = this.y + 'px';
this.setTimeOut('changeheight();',100);
}

function showmap(Tiframe,postcode){
return;
document.getElementById(Tiframe).src = 'maps.asp?q='+postcode;
if(g)document.getElementById(Tiframe).style.display='block';
if(!g)document.getElementById(Tiframe).style.display='none';
}
</script></head>

<body onload="InitCngHeight('Tst1');InitCngHeight('Tst2');" >
<input type="button" name="" value="Run Txt1" onclick="CngHeight('Tst1','Tst1Txt','Tst1IFrame','PO75UG');" >
<div id="Tst1Txt" style="position:relative;width:100px;heigh:10px;background-Color:#ff0000;" ></div>
<br>
<div id="Tst1" style="position:relative;width:100px;height:100px;background-Color:#ff0000;" ></div>
<input type="button" name="" value="Run Txt2" onclick="CngHeight('Tst2','Tst2Txt','Tst2IFrame','PO75UG');" >
<div id="Tst2Txt" style="position:relative;width:100px;heigh:10px;background-Color:#ff00ff;" ></div>
<br>
<div id="Tst2" style="position:relative;width:100px;height:100px;background-Color:#ff00ff;" ></div>
</body>

</html>

thephoton
01-31-2007, 06:46 AM
Thanks everybody, I decided to go with Aerospace's idea, it seems to work better for my purpose.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum