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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    call a function after another has ended

    I have some code that needs to run only when the previous function has finished.
    How is that done?
    1st function:
    Code:
    function ddCollapse(c){
      c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
      
    }
    Second bit of code to run when the above is finished:
    Code:
    c.style.height = '0px';
    Thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    (1) Put the code in at the end of the function:
    Code:
    function ddCollapse(c){
      c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
      c.style.height = '0px';
    }
    That changes the c.style.height at the end of the ddCollapse function, without waiting for the ddSlide() call.

    (2) Put the code in at the end of the function:
    Code:
    function ddCollapse(c){
      c.timer = setInterval(
             function()
             {
                  ddSlide(c,-1);
                  c.style.height = '0px';
              }, DDTIMER
           );
    Now the height is set to 0 each time that anonymous function is invoked.

    I'm a bit curious what you mean by "when the previous function has finished". Since you are using setInterval, that anonymous function that in turn calls ddSlide( ) is going to get called *forever*, every DDTIMER milliseconds, so in some sense it will never be "finished."

    Did you mean to use setInterval( ) instead of setTimeout( )???

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I think it is easier to give all the javascript that is involved as I got it from elsewhere and am quite new to Js.
    Code:
    var DDSPEED = 15;
    var DDTIMER = 20;
    
    // main function to handle the mouse events //
    function ddMenu(id,d){
      var h = document.getElementById(id + '-ddheader');
      var c = document.getElementById(id + '-ddcontent');
      clearInterval(c.timer);
      if(d == 1){
        clearTimeout(h.timer);
        if(c.maxh && c.maxh <= c.offsetHeight){return}
        else if(!c.maxh){
          c.style.display = 'block';
          c.style.height = 'auto';
          c.maxh = c.offsetHeight;
          c.style.height = '0px';
        }
        c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
      }else{
        h.timer = setTimeout(function(){ddCollapse(c)},50);
      }
    }
    
    // collapse the menu //
    function ddCollapse(c){
      c.timer = setInterval(function(){ddSlide(c,-1);},DDTIMER);
      
    }
    
    // cancel the collapse if a user rolls over the dropdown //
    function cancelHide(id){
      var h = document.getElementById(id + '-ddheader');
      var c = document.getElementById(id + '-ddcontent');
      clearTimeout(h.timer);
      clearInterval(c.timer);
      if(c.offsetHeight < c.maxh){
        c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
      }
    }
    
    // incrementally expand/contract the dropdown and change the opacity //
    function ddSlide(c,d){
      var currh = c.offsetHeight;
      var dist;
      if(d == 1){
        dist = (Math.round((c.maxh - currh) / DDSPEED));
      }else{
        dist = (Math.round(currh / DDSPEED));
      }
      if(dist <= 1 && d == 1){
        dist = 1;
      }
      c.style.height = currh + (dist * d) + 'px';
      c.style.opacity = currh / c.maxh;
      c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
      if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
        clearInterval(c.timer);
      }
    }
    if i can somehow get the c.style.height = '0px'; done at the end of the slideup that would be great as for some reason the slide up leaves a trace behind.
    Thanks

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    AHA! Okay...

    The problem is that ddSlide is called every 20 milliseconds until the slide is complete, then *apparently* it cancels its own setInterval.

    So you will almost surely need to do this by modifying ddSlide, which you don't show us.

    You need to add in your code at the same time that the interval is cancelled.

  • #5
    New Coder
    Join Date
    May 2009
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ddslide is the last function there.
    I am sure you are right that it needs to be altered but I am not sure how.
    Tx

  • #6
    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
    Here
    Code:
      if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
        clearInterval(c.timer);
        c.style.height = '0px';
      }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    A certain idiot who shall remain nameless didn't realize there was more code there because he missed seeing the scrollbar. DOH!

    Aerospace has it ALMOST right. That's what I was looking for and what I expected to do: change the height to zero as the interval timer is removed.

    BUT...

    But he is changing the height to zero no matter WHICH WAY the slider was moving.

    If I read you correctly, you only want to do it when the slider is finished moving up.

    So I think it needs to be like this:
    Code:
      if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
        clearInterval(c.timer);
        if ( d < 0 ) c.style.height = '0px';
      }
    For consistency, I'd probably rewrite the if condition there, too:
    Code:
      if( (currh < 2 && d < 0 ) || (currh > (c.maxh - 2) && d > 0) ) {
        clearInterval(c.timer);
        if ( d < 0 ) c.style.height = '0px';
      }
    But that's just me.
    Last edited by Old Pedant; 05-22-2009 at 08:49 AM. Reason: rewrite condition


  •  

    Posting Permissions

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