PDA

View Full Version : Query on "Switch Content Script II"



jasm
04-14-2006, 10:28 AM
Script: Switch Content Script II
http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm

I tried to use the above script to create a table as follows:
http://testing.freeownhost.com/testing2.htm

May I know how I should modify the script so that when I click on the "minus" sign or "contract all", B under Project 1 and D and E under Project 2 can be hidden as well.

I would appreciate if someone could help.

jscheuer1
04-14-2006, 02:50 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Projects</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://testing.freeownhost.com/" />
<style type="text/css">

.showstate{ /*Definition for state toggling image */
cursor:hand;
cursor:pointer;
float: right;
margin-top: 2px;
margin-right: 3px;
}

.headers{
width: 400px;
font-size: 120%;
font-weight: bold;
border: 1px solid black;
background-color: lightyellow;
}

.switchcontent{
width: 400px;
border-top-width: 0;
}

td {
empty-cells: hide;
}

.inset, .inset table {
border:none;
}

</style>

<script type="text/javascript">

/***********************************************
* Switch Content script II- c Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 2nd, 2005.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var memoryduration="7" //persistence in # of days

var contractsymbol='minus.gif' //Path to image to represent contract state.
var expandsymbol='plus.gif' //Path to image to represent expand state.

/////No need to edit beyond here //////////////////////////

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}

function sweeptoggle(ec){
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=(ec=="contract")? "none" : ""
inc++
}
revivestatus()
}


function expandcontent(curobj, cid){
if (ccollect.length>0){
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="none")? "none" : ""
curobj.src=(document.getElementById(cid).style.display=="none")? expandsymbol : contractsymbol
}
}

function revivecontent(){
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="none"
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="none")
statecollect[inc].src=expandsymbol
else
statecollect[inc].src=contractsymbol
inc++
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="none")
selectedItem+=ccollect[inc].id+"|"
inc++
}
if (get_cookie(window.location.pathname)!=selectedItem){ //only update cookie if current states differ from cookie's
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+parseInt(memoryduration))
document.cookie = window.location.pathname+"="+selectedItem+";path=/;expires=" + expireDate.toGMTString()
}
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && get_cookie(window.location.pathname)!="" && ccollect.length>0)
revivecontent()
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>
</head>
<body>
<!--Optional Expand/ Contact All links. Remove if desired-->
<div style="margin-bottom: 5px;text-align:center;"><a href="javascript:sweeptoggle('contract')">Contract All</a> | <a href="javascript:sweeptoggle('expand')">Expand All</a></div>

<table align="center" border="3" cellspacing="5" cellpadding="5">

<tr><td>01</td><td>2002</td><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc1')" />Project 1</td></tr>
<tr><td></td><td></td><td class="inset">
<table id="sc1" class="switchcontent" border="3" cellspacing="5" cellpadding="5">

<tr><td><a href=>A</a></td></tr>

<tr><td><a href=>B</a></td></tr></table></td></tr>

<tr><td>02</td><td>2003</td><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc2')" />Project 2</td></tr>

<tr><td></td><td></td><td class="inset">
<table id="sc2" class="switchcontent" border="3" cellspacing="5" cellpadding="5">

<tr><td><a href=>C</a></td></tr>

<tr><td><a href=>D</a></td></tr>
<tr><td><a href=>E</a></td></tr></table></td></tr>

</table>
</body>
</html>

jasm
04-14-2006, 02:57 PM
Dear Professor Jscheuer1,
Thank you so much for your kind assistance. You are excellent!

jasm
04-15-2006, 05:36 AM
Sorry to query again.

http://testing.freeownhost.com/Project2.htm

To make the page neater, may I know if it is possible to reduce the cell spacing between the rows for the PROJECT table to be the same as that of the analysis table on top?

Thanks once again.

jscheuer1
04-15-2006, 06:12 AM
I would think so. That really is a simple matter, up to you. You can play with the values for cellpadding and cellspacing all you like - to see what you like. If you notice, I was just using the values you had established.

jasm
04-15-2006, 06:17 AM
Thanks a million :p