Help with Switch Content Script

**buzzy1** · 11-22-2005, 03:22 PM

Hey, I'm new to the Forums, but I have been using DD's stuff for quite a while.

I have been using the Switch Content Script , but recently I have had the need to use it multiple times within the same paragraph. Can someone help me find a way to do this? Or does someone know or have code that will allow me to do this?

Thanks for your help.

**jscheuer1** · 11-23-2005, 06:42 AM

1 ) What would be the difference between using it more than once in a single paragraph and using it just once in a paragraph, but using additional items? If all you want is to put some regular content in between two blocks of switchable content, that should be easy.

2 ) Are you using the expand all/contract all part and want it to be applied to only one block, with a separate expand all/contract all control for the other block? That would be fairly easy to break up.

3 ) How about the:

var collapseprevious="no"

If set to yes, are you trying to have only one group of content respond to that logic at a time?

What is it you are trying to do?

Please answer these three numbered questions and, it would help if you could:

PLEASE: Include the URL to your problematic webpage that you want help with.

**buzzy1** · 11-23-2005, 03:19 PM

1. I guess my problem is I don't know how to add additional items.

2. If there are more than one on a page I do.

3. I don't understand.

See attachment.

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head>
<title>Brandon's Testing Page</title>
<script type="text/javascript">
/***********************************************
* Switch Content script- © 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 collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
var contractsymbol=' ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
var expandsymbol=' ' //HTML for expand symbol.
 
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}
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 thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}
 
function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}
function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}
function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}
function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=contractsymbol
else
statecollect[inc].innerHTML=expandsymbol
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=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}
document.cookie=window.location.pathname+"="+selectedItem
}
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" && ccollect.length>0){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
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>
</p>
</p>
<h2>Problem</h2>
<p>Receive error "unable to perform search for members" when trying to process a Search.</p>
<h2>Solution</h2>
<p>Perform a <u>People Backup</u>, then <u>Clear User Directories</u>.</p>
<br>
<blockquote><i>The above sentence contains two different processes our clients would need to perform. If they click "People Backup," then the steps to perform the backup should show below the sentence. If they click "Clear User Directories,", then the steps to clear the directories should show.</i></blockquote>
<blockquote><i>Due to not knowing how to put two in one paragraph tag, I have to put them like shown below. I prefer the above.</i></blockquote>
<p onClick="expandcontent(this, 'sc4')" style="cursor:hand; cursor:pointer"><span class="showstate"></span><u><FONT color=#0000ff>Perform a People Backup</font></u>.</p>
<div id="sc4" class="switchcontent"><h3>To perform a backup:</h3>
<ol style="list-style: decimal;"
type=1>
 
<li class=kadov-p><p>Have everyone exit ACS.</p></li>
 
<li class=kadov-p><p>On the Windows Taskbar, click <span style="font-weight: bold;">Start</span>.</p></li>
 
<li class=kadov-p><p>Point to <span style="font-weight: bold;">Programs</span>, 
point to ACS, select <span style="font-weight: bold;">Backup</span>.</p></li>
 
<li class=kadov-p><p>Logon with your normal user name and password.</p></li>
 
<li class=kadov-p><p>Under Files to Backup/Restore, select People Modules 
(Includes CB/TMS/VM).</p></li>
 
<li class=kadov-p><p>Click <span style="font-weight: bold;">Backup</span>.</p></li>
 
<li class=kadov-p><p>At the top of the next screen, select the location 
where you would like to save the backup.</p></li>
 
<li class=kadov-p><p>Once you have selected the location, give the 
backup a name. <!--kadov_tag{{<spaces>}}-->&nbsp;<!--kadov_tag{{</spaces>}}-->The 
default is awpedata.zip for People. <!--kadov_tag{{<spaces>}}-->&nbsp;<!--kadov_tag{{</spaces>}}-->A 
People Backup includes the Ministry Scheduler Module.</p></li>
 
<li class=kadov-p><p>Click <span style="font-weight: bold;">Save</span>.</p></li>
 
<li class=kadov-p><p>Say <span style="font-weight: bold;">Yes</span> 
to the following message.</p></li>
</ol></div>
<p onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span><u><FONT color=#0000ff>Clear User Directories</font></u>.</p>
<div id="sc1" class="switchcontent">
<H3>To clear user directories:</H3>
<OL style="LIST-STYLE-TYPE: decimal" type=1>
<LI class=kadov-p>
<P>Be sure that the user whose directory you are about to clear is not logged in.</P>
<LI class=kadov-p>
<P>On the Windows taskbar, click <SPAN style="FONT-WEIGHT: bold">Start</SPAN>.</P>
<LI class=kadov-p>
<P>Point to <SPAN style="FONT-WEIGHT: bold">Programs</SPAN>, point to ACS, and then click <SPAN style="FONT-WEIGHT: bold">Utility Manager</SPAN>.</P>
<LI class=kadov-p>
<P>Click <SPAN style="FONT-WEIGHT: bold">Clear User Directories</SPAN>.</P>
<LI class=kadov-p>
<P>The message "This program should only be used with the guidance of an ACS Support Representative. Do you want to continue?" displays. Click <SPAN style="FONT-WEIGHT: bold">Yes</SPAN>.</P>
<LI class=kadov-p>
<P>Select the user name that experienced the problem.</P>
<LI class=kadov-p>
<P>Click <SPAN style="FONT-WEIGHT: bold">Remove all Listed Files</SPAN>.</P>
<LI class=kadov-p>
<P>Click <SPAN style="FONT-WEIGHT: bold">Exit</SPAN>.</P></LI></OL></div>
</body>
</html>

**buzzy1** · 11-23-2005, 05:35 PM

Also, does anyone know how to make everything show if the page is printed?

**jscheuer1** · 11-24-2005, 05:30 AM

First off, Kudos on your explanation of your requirements. I wish everyone would take the time to organize their thoughts and express them so graphically as you have in your attachment, good job!

Normally the @media print {} rule is used in the style to control that (your second question) but, the style for this script is set in the script, so I've incorporated the rule into the script. To test this, once you have saved the below code as an html file, load it in your browser and choose:

File --

Print preview

You will see the entire page included.

Basically all I had to do to achieve the other part of your request was to change the <p> (paragraph) elements in the markup to spans. This allows them to appear inline in your markup, what you wanted. I also set the enablepersist="off" and the collapseprevious="yes", as these seemed to make the most sense for your purposes. If you want to play with those settings, feel free but, remember these values, in case you don't like the results of your trials. Also since persistence involves cookies, deleting your browsers cookies and/or cache may be required to see the effects of changes you make to the code as regards persistence. Here's your demo upgraded with red highlights of important changes:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Brandon's Testing Page</title>
<script type="text/javascript">

/***********************************************
* Switch Content script- © 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="off" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

var contractsymbol=' ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
var expandsymbol=' ' //HTML for expand symbol.


if (document.getElementById){
document.write('<style type="text/css">\n\
@media print {\n')
document.write('.switchcontent{display:block;}\n\
}\n\
@media screen {\n')
document.write('.switchcontent{display:none;}\n\
}')
document.write('</style>')
}

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 thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}


function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}

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

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=contractsymbol
else
statecollect[inc].innerHTML=expandsymbol
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=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

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" && ccollect.length>0){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
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>
</p>
</p>
<h2>Problem</h2>
<p>Receive error "unable to perform search for members" when trying to process a Search.</p>
<h2>Solution</h2>
<p>Perform a <span onClick="expandcontent(this, 'sc4')" style="cursor:hand; cursor:pointer"><span class="showstate"></span><u><FONT color=#0000ff>Perform a People Backup</font></u>.</span>, then <span onClick="expandcontent(this, 'sc1')" style="cursor:hand; cursor:pointer"><span class="showstate"></span><u><FONT color=#0000ff>Clear User Directories</font></u>.</span>.</p>
<br>
<div id="sc4" class="switchcontent"><h3>To perform a backup:</h3>

<ol style="list-style: decimal;"
	type=1>
	
	<li class=kadov-p><p>Have everyone exit ACS.</p></li>
	
	<li class=kadov-p><p>On the Windows Taskbar, click <span style="font-weight: bold;">Start</span>.</p></li>
	
	<li class=kadov-p><p>Point to <span style="font-weight: bold;">Programs</span>, 
 point to ACS, select <span style="font-weight: bold;">Backup</span>.</p></li>
	
	<li class=kadov-p><p>Logon with your normal user name and password.</p></li>
	
	<li class=kadov-p><p>Under Files to Backup/Restore, select People Modules 
 (Includes CB/TMS/VM).</p></li>
	
	<li class=kadov-p><p>Click <span style="font-weight: bold;">Backup</span>.</p></li>
	
	<li class=kadov-p><p>At the top of the next screen, select the location 
 where you would like to save the backup.</p></li>
	
	<li class=kadov-p><p>Once you have selected the location, give the 
 backup a name. <!--kadov_tag{{<spaces>}}-->&nbsp;<!--kadov_tag{{</spaces>}}-->The 
 default is awpedata.zip for People. <!--kadov_tag{{<spaces>}}-->&nbsp;<!--kadov_tag{{</spaces>}}-->A 
 People Backup includes the Ministry Scheduler Module.</p></li>
	
	<li class=kadov-p><p>Click <span style="font-weight: bold;">Save</span>.</p></li>
	
	<li class=kadov-p><p>Say <span style="font-weight: bold;">Yes</span> 
 to the following message.</p></li>
</ol></div>

<div id="sc1" class="switchcontent">
<H3>To clear user directories:</H3>
<OL style="LIST-STYLE-TYPE: decimal" type=1>
<LI class=kadov-p>
<P>Be sure that the user whose directory you are about to clear is not logged in.</P>
<LI class=kadov-p>
<P>On the Windows taskbar, click <SPAN style="FONT-WEIGHT: bold">Start</SPAN>.</P>
<LI class=kadov-p>
<P>Point to <SPAN style="FONT-WEIGHT: bold">Programs</SPAN>, point to ACS, and then click <SPAN style="FONT-WEIGHT: bold">Utility Manager</SPAN>.</P>
<LI class=kadov-p>
<P>Click <SPAN style="FONT-WEIGHT: bold">Clear User Directories</SPAN>.</P>
<LI class=kadov-p>
<P>The message "This program should only be used with the guidance of an ACS Support Representative. Do you want to continue?" displays. Click <SPAN style="FONT-WEIGHT: bold">Yes</SPAN>.</P>
<LI class=kadov-p>
<P>Select the user name that experienced the problem.</P>
<LI class=kadov-p>
<P>Click <SPAN style="FONT-WEIGHT: bold">Remove all Listed Files</SPAN>.</P>
<LI class=kadov-p>
<P>Click <SPAN style="FONT-WEIGHT: bold">Exit</SPAN>.</P></LI></OL></div>
</body>
</html>

Thread: Help with Switch Content Script

Thread Tools

Search Thread

Help with Switch Content Script

Bookmarks

Bookmarks

Posting Permissions