call some code after another function has ended

[mapleleaf]

I have some code that needs to run only when the previous function has finished.

How is that done?

1st function:

function ddCollapse(c){
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
  
}

 

Second bit of code to run only when the above has completed.

 

c.style.height = '0px';

 

Seems like it ought to be simple. But obviously not to me

[fanfavorite]

either put that code in the function at the end or have another function called at the end of that function. 

[mapleleaf]

Tried both of those.

I think I need something to detect the other function has completed. the first function is also call another function:

 

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);
  }
}

 

I am not sure how to alter this last one so have been working on the  first function.

[fanfavorite]

Not really sure what you are trying to do.  You want it to wait until the interval has passed and run the function before you change the height?  If so, then the height change should be in the ddSlide function. 

[Ken2k7]

If the variable c is defined, then -

 

c.timer = setInterval(function(){ddSlide(c,-1);c.style.height = '0px';},DDTIMER);

[mapleleaf]

The full code may make it easier.

The poroblem is that the slide up leaves a trace so I thought of setting the height to zero at the end of sliding up

 

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);
  }
}

 

Thanks for any suggestions

[Ken2k7]

You would think so, but people don't like to read over long complicated code to figure out how it works. So posting more code is worse. You should only do so if someone requested it.

[mapleleaf]

I totally agree about posting too much code Ken2k7 but once there is a bit of interest from someone like you who probably has that bug solving ability I thought it would make life easier.

 

If it helps I am fairly sure ddslide() is where there may need some change and that is the last function.

 

Thanks for your time.

[Ken2k7]

Well if you just post up functions, it's hard to debug anything. It's not like you said there are any errors. You just want to add a line of code somewhere. If there are no bugs, posting blocks of codes is useless.

 

So you want to execute something after the function ddSlide finishes executing or what? Please be specific. Thanks!

[mapleleaf]

yes set the height of

var c = document.getElementById(id + '-ddcontent');

 

to 0px but only once ddslide has completed.

ddslide is called in the function ddcollapse()

 

var c is declared in ddmenu()

 

Am I making it any clearer?

Tx

 

 

 

 

[Ken2k7]

If the variable c is defined, then -

 

c.timer = setInterval(function(){ddSlide(c,-1);c.style.height = '0px';},DDTIMER);

And what's wrong with the line I posted earlier? Did you give that a try?