Modifying switchcontent.js to tell which is filterTag is expanded

[Strangeplant]

Hi,

I'm using switchtoggle.js, found at http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm (the older version, but it won't make any difference here).

Works beautifully, BTW, and am using it in several places, usually generating the sections in a loop from content taken from a database or flat files with php, so the sections have an base id of 'band' and numbered 1, 2, 3..... with the resultant id's being band1, band2, etc.

I need to know which section is expanded so I can have javascript do appropriate tasks depending on which section is expanded. So, to do this I need to augment the script. Where and how are somewhat evasive, but it probably should be in this section:

switchcontent.prototype.expandcontent=function(header){
var innercontent=document.getElementById(header.id.replace("-title", ""))
innercontent.style.display="block"
this.togglestatus(header, this.statusOpen)
this.togglecolor(header, this.colorOpen)
}

Has anyone already done this? I was thinking about adding:


var sec=document.getElementByID(header);
section=sec.substring(str.lastIndexOf("d")+1,str.lastIndexOf("-"));

and defining section in the first, main javascript in my program. The "d" is the last character in the base section identifier that I happen to be using in this page, but it is not a generic solution. And also, this is not the right way because variables should be self contained in this file and not referenced directly elsewhere. What is the proper way to do this so I have generic code to use elsewhere?

[vwphillips]

to add a callback function


//PRIVATE: Contracts a content based on its corresponding header entered

switchcontent.prototype.contractcontent=function(header){
var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content container for this header
innercontent.style.display="none"
this.togglestatus(header, this.statusClosed)
this.togglecolor(header, this.colorClosed)
if (typeof(this.oncontract)=='function'){
this.oncontract(innercontent);
}
}


//PRIVATE: Expands a content based on its corresponding header entered

switchcontent.prototype.expandcontent=function(header){
var innercontent=document.getElementById(header.id.replace("-title", ""))
if (header.ajaxstatus=="waiting"){//if this is an Ajax header AND remote content hasn't already been fetched
switchcontent.connect(header.ajaxfile, header)
}
innercontent.style.display="block"
this.togglestatus(header, this.statusOpen)
this.togglecolor(header, this.colorOpen)
if (typeof(this.onexpand)=='function'){
this.onexpand(innercontent);
}
}




definition



var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="http://img242.imageshack.us/img242/5553/opencq8.png" /> ', '<img src="http://img167.imageshack.us/img167/7718/closedy2.png" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.onexpand=function(obj){
alert(obj.id);
}
bobexample.oncontract=function(obj){
alert(obj.id);
}

bobexample.init()

[Strangeplant]

I modified the switchcontent.js as vwphillips documented, above. I thank you for the code work, specially because I would not have thought of using 'typeof'. It returns the div id correctly.

Then, in the switchcontent definition, I add the following javascript code, just before the .init(), like this, to retrieve the numerical part of the div id, and assign it to the variable 'section':

<script type="text/javascript">
var section=0
var band=new switchcontent("switchband", "div")
band.setStatus("[close] ", "[expand] ")
band.setColor("darkred", "purple")
band.setPersist(true)
band.collapsePrevious(true)
band.onexpand=function(obj){
var r = /\d+/
section = obj.id.match(r)
}
band.init()
</script>

or in the php code that I use to generate the page, like this:

echo('<script type="text/javascript">'."\n");
echo('var section=0'."\n");
// the rest of the definition goes here
echo('band.onexpand=function(obj){'."\n");
echo(' var r = /\d+/'."\n");
echo(' section = obj.id.match(r)'."\n");
// echo(' alert(obj.id + " section: " + section)'."\n"); // testing returned section value
echo('}'."\n");
echo('band.init()'."\n");
echo('</script>'."\n");


This way, I can use the section value to activate the proper and variable link when using modal dialog, jquery.simplemodal.1.4.4.min.js. And the dialog link is on the page like this:

<td nowrap align="right"><a href="#" onclick="modalDialog(section); return false;"><b>File Structure &amp; Processing Notes &raquo;&nbsp;</b></a></td>

Just to finish showing what I was up to, here is the php code to give the javascript modal dialog function:

<script type="text/javascript">
function modalDialog(x){
links = ["lib/Default.html","lib/lidar_rawdata_format.htm","lib/lidar_netcdf_file_format.htm","lib/lidar_rawdata_format.htm"];
var src = links[x];
$.modal('<iframe src="' + src + '" height="520" width="1020" style="border:0">', {
close: true,
containerCss:{
backgroundColor:"#fff",
height:550,
padding:20,
width:1060
},
overlayClose:true,
onOpen: function (dialog) {
dialog.overlay.fadeIn(function () {
dialog.data.hide();
dialog.container.fadeIn(function () {
dialog.data.fadeIn();
});
});
},
onClose: function (dialog) {
dialog.data.fadeOut(function () {
dialog.container.fadeOut(function () {
dialog.overlay.fadeOut(function () {
$.modal.close();
});
});
});
}
});
}

$('select').change(function() {
$(this).parents('form').submit();
});
</script>