PDA

View Full Version : Animated Collapsible DIV



HeavenCore
09-09-2008, 03:54 PM
1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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
09-09-2008, 04:19 PM
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
09-09-2008, 04:28 PM
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 (http://docs.jquery.com/Effects/animate)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
09-09-2008, 05:11 PM
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
09-09-2008, 05:54 PM
That's great. If it works, it works. :)