Animated Collapsible DIV

[HeavenCore]

1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem: How to wait till collapse complete before continuing with a function?

Hello all, i have a simple ajax function that loads some content into a DIV, this works fine, what i would like to do however is collapse the div then load content then re-expand the div. I already have this sort of working, however the page content loads instantly (during development) and shows before the div finished collapsing. How can i alter the function below to wait for the collapse to complete before continuing with the AJAX calls etc?

function AJAX_LoadPanel(PanelID) {
    animatedcollapse.hide('content')
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp == null) {
        alert("Unable to Create an AJAX element, please contact IT at Head Office.");
        return;
    }
    var url = "AJAX_functions.asp";
    url = url + "?task=LoadPanel";
    url = url + "&ID=" + PanelID;
    url = url + "&sid=" + Math.random();
    xmlHttp.onreadystatechange = DrawLoadedPanel;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function DrawLoadedPanel() {
    if (xmlHttp.readyState == 4) {
        document.getElementById("content").innerHTML = "";
        document.getElementById("content").innerHTML = xmlHttp.responseText;
        animatedcollapse.show('content')
    }
}

[ddadmin]

You'll want to modify animatedcollapse.js itself to invoke your own custom code when an animated DIV has been collapsed. Find the line:

$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500)

and change that to something like:

$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
 if (this.style.display=="none"){ //if this DIV has been collapsed
  //run custom code here
 }
 })

[HeavenCore]

so something like this?

slideengine: function(divid, action) {
    var $divref = this.divholders[divid].$divref
    if (this.divholders[divid] && $divref.length == 1) { //if this DIV exists
        var animateSetting = { height: action }
        if ($divref.attr('fade'))
            animateSetting.opacity = action
        $divref.animate(animateSetting, $divref.attr('speed') ? parseInt($divref.attr('speed')) : 500, function() {
            if (this.style.display == "none") { //if this DIV has been collapsed
                //run custom code here
                alert("collapse finished")
            }
        })
        return false
    }
},

Cheers mate, i'll have a play (gonna be tricky passing values through this lot)

UPDATE: i tried a simple test, where "//run custom code here" was i tried alert("finished"), however no message was presented on the collapse, sure this syntax is correct?

UPDATE: ok i have checked the syntax of the JQuery Animate function and it seems like the above should work so not sure what i am doing wrong :S

UPDATE: on removing the 'if clause' it works great:

slideengine: function(divid, action) {
    var $divref = this.divholders[divid].$divref
    if (this.divholders[divid] && $divref.length == 1) { //if this DIV exists
        var animateSetting = { height: action }
        if ($divref.attr('fade'))
            animateSetting.opacity = action
        $divref.animate(animateSetting, $divref.attr('speed') ? parseInt($divref.attr('speed')) : 500, function() {
                alert("collapse finished")
        })
        return false
    }
},

According to JQuery, this function is only called when animation completes, so not sure the 'IF' statement is really nessasary, besides "(this.style.display=="none")" condition is correct.

[HeavenCore]

OK, i have got this working, (sorry for the double post), i had to pass my Panel ID (the variable i wanted to pass to my ajax function) through the hide, showhide and slidengine functions, then check what the action was, if the action was "hide" then call a new function that executed the AJAX. as follows (changes in red bold)

    showhide: function(divid, action, PanelID) {
        var $divref = this.divholders[divid].$divref //reference collapsible DIV
        if (this.divholders[divid] && $divref.length == 1) { //if DIV exists
            var targetgroup = this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
            if ($divref.attr('groupname') && targetgroup.count > 1 && (action == "show" || action == "toggle" && $divref.css('display') == 'none')) { //If current DIV belongs to a group
                if (targetgroup.lastactivedivid && targetgroup.lastactivedivid != divid) //if last active DIV is set
                    this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
                this.slideengine(divid, 'show', 0)
                targetgroup.lastactivedivid = divid //remember last active DIV
            }
            else {
                this.slideengine(divid, action, PanelID)
            }
        }
    },

    slideengine: function(divid, action, PanelID) {
        var $divref = this.divholders[divid].$divref
        if (this.divholders[divid] && $divref.length == 1) { //if this DIV exists
            var animateSetting = { height: action }
            if ($divref.attr('fade'))
                animateSetting.opacity = action
            $divref.animate(animateSetting, $divref.attr('speed') ? parseInt($divref.attr('speed')) : 500, function() {
                if (action == "hide") {
                    AJAX_ActionLoad(PanelID)
                }
            })
            return false
        }
    },

    show: function(divids) { //public method
        if (typeof divids == "object") {
            for (var i = 0; i < divids.length; i++)
                this.showhide(divids[i], "show", 0)
        }
        else
            this.showhide(divids, "show", 0)
    },

    hide: function(divids, PanelID) { //public method
        if (typeof divids == "object") {
            for (var i = 0; i < divids.length; i++)
                this.showhide(divids[i], "hide", PanelID)
        }
        else
            this.showhide(divids, "hide", PanelID)
    },

function AJAX_LoadPanel(PanelID) {
    animatedcollapse.hide('content', PanelID)
}

function AJAX_ActionLoad(PanelID) {
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp == null) {
        alert("Unable to Create an AJAX element, please contact IT at Head Office.");
        return;
    }
    var url = "AJAX_functions.asp";
    url = url + "?task=LoadPanel";
    url = url + "&ID=" + PanelID;
    url = url + "&sid=" + Math.random();
    xmlHttp.onreadystatechange = DrawLoadedPanel;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

[ddadmin]

That's great. If it works, it works.