Printable View
Hello,
I've just added the Switch Content Script II to my pages, it works well bu the cookies that is set is set for tha page you are on not the whole site. Therefore if you collaspe a couple of areas and then go to another page they reopen, if you then go back a page they close.
So how do I make stay open or closed depending upon what the user has done across the whole site?
I had the same problem and found this script in an archive here. I updated it with the Expand/Collapse functions.
It works fine for me as a single file (SSI) that is used site-wide. You may want to experiment with var collapseprevious setting. I have it set to "yes" for my site and it works as I want it to.
Good luck with it.
Maura
Hi Maura,
many htanks for the script :D
I've reaplaced the standard script with this version but I'm not getting to work :( do you have an online demo I could try out?
Thanks
Sorry, what I'm building is behind a firewall. But this should get you going:
I have a common header file (header.asp) that is used throughout my site. In that file I place the script call:
<script type="text/javascript" language="javascript" src="switchcontent.js"></script>
In the .asp files on my site I call the header file as a SSI:
<!--#include virtual="/scripts/header.asp"-->
In a common menu file (menu.asp) which is also used as a SSI, here's the HTML to use the script (I'm using button images):
<div class="button"><img id="company" name="company" src="company.gif" border="0" alt="Company" height="25" width="120" onclick="return expandcontent('sc1', this);"></div>
<div id="sc1" class="switchcontent">
<div><a href="about.asp">Who We Are</a></div>
<div><a href="what.asp">What We Do</a></div></div>
The last thing is that I use these settings in the script:
var enablepersist="on"
var collapseprevious="yes"
Setting var collapseprevious="no" also works.
Hope this helps,
Maura
All that is really needed for a script that already sets a page only cookie to set one 'sitewide' is for the cookie code to be altered to include the setting and retrieval of a path, as opposed to only the url of the page. See:
Quirksmode Cookie Page
for information on how that is done.
Not tested but, this should do what I propose in my previous post:
Code:<script type="text/javascript">
/***********************************************
* Switch Content script II- © 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('switchState') != ""){
selectedItem=get_cookie('switchState')
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('switchState')!=selectedItem){ //only update cookie if current states differ from cookie's
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+parseInt(memoryduration))
document.cookie = "switchState="+selectedItem+";path=/;expires=" + expireDate.toGMTString()
}
}
function do_onload(){
uniqueidn="switchStatefirsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && get_cookie('switchState')!="" && 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>
Hi John,
Thanks so much for posting a revised script! I did test it and it doesn't quite work for what I'm doing. But based on your reply I went back to the original Switch Content script here: http://www.dynamicdrive.com/dynamici...tchcontent.htm
and modified it to this (changed items are in red):
/***********************************************
* 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("switchcookie") != ""){
selectedItem=get_cookie("switchcookie")
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="switchcookie="+selectedItem+";path=/"
}
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
This now works exactly as I need it to (persists sitewide from a single menu file). I have a very complicated site and am using this script for the menuing system. This works for me, might not work for others. Thank you for your help!
Maura
thanks all I now have it working :D
a further question, when I go to any page that has content boxes closed I firstly see them rendered open and then a second later they close up once the browser has had time to read the cookie.
Is there anyway of it being the other way around so that the windows are always closed and then openend once the cookie is read by the browser?
Thanks
That's the way (the way you say you want it) the demo page here at DD works for me in IE and in FF. What browser are you using?Quote:
Originally Posted by matg
PLEASE: Include the URL to your problematic webpage that you want help with.
The script is working, Im using FF or Safari, I cant link you to the pages I'm working on as its for a corporate intranet.
I have 5 panels similar to the demo page, a user can now select which ones they want open or closed and the cookie is set and retained for the whole site not just the current page - pefect :)
However when the page loads all the panels appear open, after the page is rendered the cookie is then read by the browser and the specified panels close up, this takes about 1 second, therefore the users sees the panels they closed as open then they shut.
Does the demo here at DD do that for you when viewed in those browsers?
<snip>However when the page loads all the panels appear open, after the page is rendered the cookie is then read by the browser and the specified panels close up, this takes about 1 second, therefore the users sees the panels they closed as open then they shut.</snip>
matg,
That is *exactly* what I was experiencing (IE6 & FF on the pc) which is why I went back to the original Switch Content script (not II) and modified it for a sitewide cookie per John's comments earlier in this thread.
The original script does not have this problem.
Best regards,
Maura
Well, I was talking about the original Switch Content script. If it is Switch Content II that is exhibiting that behavior (starting out all open, no matter what), it is the way the script is written. This can be changed by creating a temporary style block . . .
This post has been edited due to the fact that it contained an incomplete solution to this issue in Switch Content II. A link will soon be provided to a demo that is a complete solution.
for this latest post. I did try your latest but the panels stay open. For now I'm going to stick with what I did in my earlier post here in this thread, as it does work and behave the way that I need it to for my particular site.
Best regards,
Maura
That wasn't so much for you, mclover as for matg. However, if either of you are interested, I posted that solution in haste. It needs to be worked out with the rest of the script in greater detail. I have a copy that does work and would be happy to share it. For clarity, I am now talking about Switch Content II. What I said earlier about the original Switch Content (I), that I don't see it opening before closing in the demo here on DD even with persist enabled is a separate issue.
Thanks for this. It worked for me.
Jim
Quote:
Originally Posted by mclover