Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Div Size with animation

    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!

    Code:
    <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).style.display='none';
    }
    </script>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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/scriptac...ionEffectsDemo
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    converted your script to OOP

    If you requir more assistane ask, and dont know what q is for
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks everybody, I decided to go with Aerospace's idea, it seems to work better for my purpose.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •